Published on

JS 단원 02: 함수 선언 vs 함수 표현식 vs 화살표 함수

1. 함수 선언문 (Function Declaration)

function greet(name) {
  return `Hello, ${name}`;
}
console.log(greet("Alice"));
  • 특징: 호이스팅됨 → 선언 전에 호출 가능
  • 구조: function 키워드로 시작, 이름 지정
sayHello(); // 가능
function sayHello() {
  console.log("Hi");
}

2. 함수 표현식 (Function Expression)

const greet = function(name) {
  return `Hello, ${name}`;
};
  • 함수 자체를 변수에 값처럼 할당
  • 호이스팅 안 됨 → 선언 전에 호출 불가
sayHello(); // TypeError
const sayHello = function() {
  console.log("Hi");
};

3. 익명 함수 vs 이름 있는 함수 표현식

익명 함수 표현식

const greet = function(name) {
  return `Hi, ${name}`;
};

이름 있는 함수 표현식

const greet = function hello(name) {
  return `Hi, ${name}`;
};
  • 이름을 내부에서만 참조 가능 (재귀 등에 사용)

4. 화살표 함수 (Arrow Function)

const greet = (name) => `Hello, ${name}`;
  • function 키워드 생략, return 생략 가능 (한 줄일 경우)
  • this 바인딩 방식이 기존 함수와 완전히 다름

5. 화살표 함수의 this 동작 차이

전통 함수에서는 호출 시점의 객체가 this

const obj = {
  name: "Tom",
  greet: function () {
    console.log(this.name); // Tom
  }
};

화살표 함수는 상위 스코프의 this를 그대로 사용

const obj = {
  name: "Tom",
  greet: () => {
    console.log(this.name); // undefined
  }
};

→ 화살표 함수는 this를 바인딩하지 않고 상위 렉시컬 환경에서 this를 캡처

6. 콜백에서의 활용

const numbers = [1, 2, 3];
const squares = numbers.map(n => n * n);

비교

const squares1 = numbers.map(function(n) {
  return n * n;
});

const squares2 = numbers.map(n => n * n);

→ 코드가 간결하고 가독성이 향상

7. 화살표 함수는 메서드로 적합하지 않음

const obj = {
  name: "Alice",
  greet: () => {
    console.log(`Hello, ${this.name}`);
  }
};
obj.greet(); // undefined
  • 메서드는 일반 함수로 선언해야 this 바인딩이 정확하게 동작

8. new와 함께 사용할 수 없음

const Person = (name) => {
  this.name = name;
};

const p = new Person("Jane"); // TypeError
  • 화살표 함수는 생성자로 사용할 수 없음

9. 정리된 비교

항목선언식표현식화살표
호이스팅OXX
이름필수선택변수명
this 바인딩동적동적상위 캡처
new 가능OOX
간결성일반적보통매우 높음
메서드 적합성OOX

요약

  • 함수 선언식은 호이스팅되며, 기본적인 구조에 적합
  • 함수 표현식은 동적으로 함수 정의할 수 있는 유연한 구조
  • 화살표 함수는 간결한 문법과 this 캡처 기능이 장점이나 메서드, 생성자에는 부적합

심화학습

Q1. 화살표 함수가 this를 캡처한다는 것은 어떤 의미인가?
A1. this를 호출 시점이 아닌 정의된 위치의 상위 스코프에서 가져온다는 뜻으로, 콜백 내부에서 유용하지만 메서드에서는 부적합하다.

Q2. 함수 선언과 표현식은 코드 구조에 어떤 차이를 만들까?
A2. 선언식은 코드 위쪽에서 바로 사용할 수 있어 순차적 로직에 적합하고, 표현식은 동적으로 함수 구성이 필요한 경우에 적합하다.

Q3. 화살표 함수는 어떤 상황에서 특히 효과적인가?
A3. 콜백 함수, 배열 메서드(map, filter 등), 내부 this에 의존하지 않는 간단한 로직 구현 시 가장 효과적이다.