ES6에서 Arrow 함수를 사용하는 이유

  • 9/12/2025
  • One-minute read

한 줄 정리

  • 직관적임
  • 소괄호 및 중괄호 생략 가능
  • 객체, 클래스 내부 메서드로 사용하는 경우, this 바인딩이 자동으로 이루어짐
  1. 직관적임
  • arrow function을 사용하면 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해준다.
let 두배만들기 = (x) => {
  return x * 2;
};

console.log(두배만들기(4));
console.log(두배만들기(8));
  1. 상황에 따라 소괄호 및 중괄호 생략 가능 ( LOC 줄여줌 )
let 두배만들기 = x => {
  return x * 2;
};

console.log(두배만들기(4));
console.log(두배만들기(8));

let 두배만들기 = (x) => x * 2;

console.log(두배만들기(4));
console.log(두배만들기(8));
  1. 내부에서 this 값 사용할 떄 밖에 있는 this 값 그대로 사용 가능
  • function으로 선언한 경우
    • 외부 객체와 바인딩되지 X, 일반 함수로 인식
    • 일반 함수에서 this 값을 쓸 때와 마찬가지로 출력된다.
let object1 = {
  fun: function () {
    console.log(this);
  },
};

object1.fun(); // window 출력
  • arrow function 활용
    • 선언된 위치에 있는 객체와 자동 바인딩이 된다.
let object1 = {
  fun: () => {
    console.log(this);
  },
};

object1.fun(); // object1 출력
  1. 개인적으로 더 깔끔하기도 한 것 같아서 선호
JS & TS