상세 컨텐츠

본문 제목

[React.js] 1장. JavaScript 함수 표현식과 화살표 함수 비교하기

26-27/React.js

by kku-6 2026. 10. 2. 10:00

본문

728x90


1. 들어가며 - 함수를 작성하는 다양한 방법


JavaScript에서 함수를 공부하며 하나의 기능을 수행하는 함수를

여러 가지 방법으로 작성할 수 있다는 것을 알게 되었다.

자칫 헷갈릴 수 있는 JavaScript 함수 작성 방법을
함수 선언식, 함수 표현식, 화살표 함수 등으로 직접 작성해 보며 각각 어떤 차이가 있는지 정리해 보았다.

헷갈리는 함수 작성법.
직접 따라 하며 익혀보자!


2. function을 이용한 - 함수 선언식


- 익숙한 function으로 함수를 만들어보기

function add(a, b) {
  return a + b;
}

console.log(add(2, 3));
// 5
  • 함수 선언식은 function 키워드와 함수 이름을 사용하여 함수를 선언하는 방식이다.
  • a, b는 매개변수이고, return을 통해 두 값을 더한 결과를 반환한다.

 

3. 함수를 변수에 저장하는 - 함수 표현식


- 함수를 작성하는 또 다른 방법

const add = function(a, b) {
  return a + b;
};

console.log(add(2, 3));
// 5
  • add라는 변수를 선언하여 함수를 저장하였다

 

그렇다면 굳이 함수를
변수에 저장하는 이유는 무엇일까?

 

  • 함수를 변수에 저장하면 필요할 때 그 변수를 이용해 함수를 호출할 수 있기 때문이다.
  • 또한 함수를 값처럼 다룰 수 있기 때문에 다른 함수의 인자로 전달하거나, 필요에 따라 다른 변수에 할당하는 것도 가능하다.


ex. add(2, 3)과 같이 호출할 수 있다.

const add = function(a, b) {
  return a + b;
};

console.log(add(2, 3)); // 5

 

4. 낯선 함수 작성법 - 화살표 함수


- 갑자기 줄어든 코드의 길이?

const add = (a, b) => {
  return a + b;
};


- 그런데 더 짧아질 수 있다는 사실!

const add = (a, b) => a + b;
  • => 뒤에 작성한 a + b가 실행되며, 이 값이 함수의 결과로 반환된다.
  • 코드가 한 줄이고 별도의 return이 필요하지 않기 때문에 이렇게 간결하게 작성할 수 있다.

 


5. 직접 비교해 보기


- 함수 선언식

function multiply(a, b) {
  return a * b;
}

-> 가장 기본적이고 구조가 명확하다.

- 함수 표현식

const multiply = function(a, b) {
  return a * b;
};

-> 함수를 변수에 저장해 값처럼 사용할 수 있다.

- 화살표 함수

const multiply = (a, b) => a * b;

-> 같은 기능을 더 간결하게 표현할 수 있다.


6. 짧은 코드의 화살표 함수. 무조건 좋은가?

- 화살표 함수

const add = (a, b) => {
  return a + b;
};
const add = (a, b) => a + b;
  • 처음에는 코드가 짧아지는 화살표 함수가 기존 함수보다 간결하고 편리하다 생각했다.
  • 단순하게 값을 계산하거나 짧은 동작을 수행하는 함수라면 화살표 함수가 간결해서 읽기 편했다.
    반면 함수 내부에 여러 줄의 로직이 들어간다면 지나치게 짧게 작성하는 것보다 기존 형태가 더 익숙하게 느껴질 수도 있었다.

 


7. 경험과 견해

  • 함수 표현식과 화살표 함수를 비교하면서 JavaScript에서는 같은 기능을 구현하더라도
    상황에 따라 다양한 방식으로 코드를 작성할 수 있다는 것을 알게 되었다.
  • 특히 화살표 함수는 처음에는 낯설었지만 기존 함수 표현식과 비교해서 생각하니 구조를 이해하기 쉬웠다.
  • 이번 내용을 학습하며 단순히 “화살표 함수는 코드를 짧게 만들어준다”라는 생각에서 벗어나
    상황별로 어떤 코드가 유용하고 편리한지 판단하는 것이 필요하다 느꼈다.



8. 마무리하며

  • 이번에는 JavaScript의 함수 선언식, 함수 표현식, 화살표 함수를 비교해 보았다.
  • 세 가지 방법 모두 함수를 작성하는 데 사용할 수 있지만, 작성 방식과 코드의 표현 방법에는 차이가 있었다.
  • 앞으로 JavaScript를 공부하면서 단순히 문법을 외우는 것보다 직접 여러 방법으로 작성해 보고,
    각각의 장단점과 사용 상황을 이해해 보려고 한다.

 

 

9. 빈칸 문제

- 빈칸에 들어갈 적절한 답을 맞춰보자!

❓다음 빈칸에 들어갈 가장 적절한 용어는?
-> JavaScript에서 function 키워드와 함수 이름을 사용하여 함수를 정의하는 방식은 함수 ______이다.

✏️  _______



❓다음 빈칸에 들어갈 가장 적절한 용어는?

-> 함수를 변수에 할당하여 작성하는 방식은 함수 ______이라고 한다.

✏️  _______



❓다음 빈칸에 들어갈 가장 적절한 용어는?

-> (a, b) => a + b와 같이 작성하는 함수는 ______ 함수라고 한다.

✏️  _______



❓다음 빈칸에 들어갈 가장 적절한 키워드는?

-> 함수에서 계산한 결과를 함수가 호출된 곳으로 돌려줄 때 사용하는 키워드는 ______이다.

✏️  _______



❓다음 빈칸에 들어갈 가장 적절한 표현은?

-> 화살표 함수는 일반적인 함수 표현식보다 코드를 ______ 작성할 수 있다는 장점이 있다.

✏️  _______


10. 코드 문제

- 코드의 실행 결과를 예상해보자!

❓다음 코드의 실행 결과는 무엇인가?

const multiply = (a, b) => a * b; console.log(multiply(3, 4));

 

✏️  _______



❓다음 코드의 실행 결과는 무엇인가?

const add = function(a, b) { return a + b; }; console.log(add(5, 2));

 

✏️  _______


에디터명 : 융융
참고 및 작성 도움: ChatGPT (OpenAI)

 

728x90

티스토리툴바