[JavaScript] 함수선언식, 함수표현식, 화살표함수

목차

• 함수의 구성 요소
• 자바스크립트에서 함수를 정의하는 방식
  • 1. 함수 선언문
  • 2. 함수 표현식
  • 3. 함수 선언문 vs 함수 표현식
  • 4. 화살표 함수 (ES6)

함수의 구성 요소

자바스크립트에서 함수를 정의하는 방식

1. 함수 선언문

- 함수 선언문을 사용해 함수를 정의하는 방식 예시

function add(x, y) {
  return x + y;
}

console.log(add(5, 6)); // 11

- 함수 선언문은 함수 이름을 생략할 수 없다.

function (x, y) {
  return x + y;
}
// Error: Function statements require a function name

2. 함수 표현식

- 함수 표현식을 사용해 함수를 정의하는 방식 예시  

- 함수 표현식은 함수 객체를 변수에 할당할 수 있는 함수 정의 방식이다.

const add = function (x, y) {
  return x + y;
};

console.log(add(3, 4)); // 7

3. 함수 선언문 vs 함수 표현식

- 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다.

- 함수 표혁식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.

위 와 같은 동작은 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 특징인 함수 호이스팅 때문이다.

// 함수 호출
console.log(add(5, 6)); // 11
console.log(sub(3, 4)); // error

// 함수 선언문
function add(x, y) {
  return x + y;
}

// 함수 표현식
const sub = function (x, y) {
  return x + y;
};

4. 화살표 함수 (ES6)

- function 키워드 대신 화살표를 사용해 함수를 선언하는 방식이다. (화살표 함수는 항상 익명 함수로 정의한다.)

const add = (x, y) => x + y;
console.log(add(3, 4)); // 7

 

Reference

모던 자바스크립트 딥다이브 12장