JavaScript 화살표 함수

JavaScript 화살표 함수(Arrow Function) 정리

화살표 함수(Arrow Function)는 ES6(ECMAScript 2015)에서 도입된 함수 표현식 문법입니다.
간결하고 가독성이 높으며, this의 동작 방식이 일반 함수와 다르다는 특징이 있습니다.

기본 문법

(매개변수) => {
  실행문;
}

또는 실행문이 한 줄이라면 중괄호({})와 return을 생략할 수 있습니다.

(매개변수) => 표현식

 

예제 1: 기본 사용법

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

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

출력 결과

5

예제 2: 한 줄로 줄이기

const add = (a, b) => a + b;

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

출력 결과

5

 

예제 3: 매개변수가 하나일 때

매개변수가 하나일 경우, 괄호를 생략할 수 있습니다.

const square = x => x * x;

console.log(square(4));

출력 결과

16

예제 4: 매개변수가 없을 때

매개변수가 없을 때는 반드시 괄호를 써야 합니다.

const greet = () => console.log('안녕하세요!');
greet();

출력 결과

안녕하세요!

예제 5: 객체 반환 시 주의점

객체를 반환할 때는 객체 리터럴을 괄호로 감싸야 합니다.
그렇지 않으면 중괄호가 코드 블록으로 인식됩니다.

const getUser = () => ({ name: '홍길동', age: 25 });

console.log(getUser());

출력 결과

{ name: '홍길동', age: 25 }

this의 동작 차이

화살표 함수는 자신만의 this를 가지지 않습니다.
즉, 외부 스코프의 this를 그대로 사용합니다.

function Person(name) {
  this.name = name;
  setTimeout(() => {
    console.log(this.name); // 화살표 함수는 외부 this를 사용
  }, 1000);
}

const p = new Person('홍길동');

출력 결과 (1초 후)

홍길동

일반 함수(function)를 사용하면 this가 undefined가 되거나 전역 객체를 참조하게 됩니다.

주의할 점

1. 생성자 함수로 사용할 수 없습니다.
   화살표 함수에는 [[Construct]]가 없기 때문에 new 키워드로 호출할 수 없습니다.
2. this, arguments, super, new.target을 가지지 않습니다.
   화살표 함수 내부에서 이 키워드들을 사용하면 상위 스코프의 값을 참조합니다.
3. 메서드 정의에는 적합하지 않습니다.
   객체 메서드에서는 this가 객체를 가리켜야 하는데, 화살표 함수는 이를 변경하지 않습니다.

요약

구분                                                         내용

문법	(매개변수) => { 실행문 }
this	외부 스코프의 this 사용
return 생략	한 줄 표현식일 때 가능
객체 반환	괄호로 감싸야 함 → () => ({ ... })
사용 불가 상황	생성자 함수, 메서드 정의 등

결론

화살표 함수는 코드의 길이를 줄이고, this 바인딩 문제를 피할 수 있는 간결한 함수 문법입니다.
단, 메서드나 생성자처럼 this가 필요한 상황에서는 일반 함수를 사용하는 것이 좋습니다.