화살표 함수와 일반 함수의 차이

장석원·2024년 4월 9일

화살표 함수

화살표 함수(arrow function)는 function 키워드 대신 =>를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있다.
내부 동작도 기존의 함수보다 간략하고 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.

정의

함수 선언문으로 정의할 수 없고 함수 표현식으로 정의해야 한다. 호출 방식은 기존과 동일

const a = (x, y) => x * y;
a(2, 3); // 6

매겨변수 선언

위의 코드처럼 소괄호() 안에 매개변수를 선언한다. 만약 한개라면 소괄호 생략 가능하다.
매개변수가 없다면 소괄호를 생략할 수 없다.

몸체 정의

const a = x => x ** 2
a(2); // 4

const a = x => { return x ** 2 };

위의 코드처럼 함수 몸체가 하나의 문으로 되어있다면 중괄호{}를 생략 가능하다. 이 때 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환된다.
하지만 내부의 문이 표현식이 아닌 문이라면 에러가 발생한다.
이유는 표현식이 아닌 문은 반환할 수 없기 때문.

화살표 함수와 일반 함수의 차이

화살표 함수와 일반 함수의 차이는 몇가지가 있다.

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다.

const a = () => {};
new a(); // TypeError

2. 중복된 매개변수 이름을 선언할 수 없다.

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

일반 함수는 동일한 매개변수를 선언해도 에러가 발생하지않지만 화살표 함수에선 에러가 발생한다.

3. 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

화살표 함수 내부에서 위의 것들을 참조하면 스코프 체인을 통해 상위 스코프의 것을 참조하게 된다.
화살표 함수가 중첩되어있다면 스코프 체인 상에서 가장 가까운 상위 함수중에서 참조하게 된다.

this

앞의 것들도 차이점이라 볼 수 있지만 두 함수를 구별하는 가장 큰 특징은 this다.
화살표 함수는 다른 함수의 인수로 전달되어 콜백 함수로 사용되는 경우가 많다.

화살표 함수의 this는 일반 함수의 this와 다르게 동작한다.
"콜백 함수 내부의 this 문제"
콜백 함수 내부의 this가 외부 함수의 this와 다르기 떄문에 발생하는 문제를 해결하기 위해 의도적으로 설계된 것.

일반 함수의 this

function main() {
  console.log(this);
}

const object = {
  name: "aa",
  main: main,
};

const object2 = {
  name: "bb",
  main: main,
};

object.main();
// {name: "aa", main: f} this 값 object
object2.main();
// {name: "bb", main: f} this 값 object2

함수가 선언된 위치랑은 관련이 없고 함수가 호출된 방법에 따라 결정된다.
일반함수는 자신만의 this를 가지고 있기 때문

화살표 함수의 this

const object = {
  name: "aa",
  main: function () {
    console.log(this);
  },
  mainArrow: () => {
    console.log(this);
  },
};

const object2 = {
  name: "bb"
  mainArrow: object.mainArrow,
};

object.mainArrow(); // Window{~~~}
object2.mainArrow(); // Window{~~~}