JS

[JS] 화살표 함수(Arrow Function)

코딩레코더 2023. 3. 31. 01:48

화살표 함수(Arrow Function)

ES6이전에는 함수를 선언하기 위해 function이라는 키워드를 썼었는대요, 하지만 ES6 이후에는 새롭고 간결하게 함수를 선언하는 화살표 함수가 등장했습니다.

화살표 함수(Arrow Function)는 function 키워드를 사용하지 않고 화살표(=>) 기호를 사용해서 함수를 선언합니다. 익명 함수(Anonymous Function)를 보다 간결하게 표현하여 가독성이 좋아지는 효과가 있습니다.

//General Function
const general1 = function() {
  console.log('Hello')
}

const general2 = function(x,y) {
  return console.log(x+y);
}

//Arrow Function
const arrow1 = () => console.log('Hello')
const arrow2 = (x,y) => console.log(x+y);

general1(); // Hello
general2(3,2); // 5
arrow1(); // Hello
arrow2(3,2);// 5

위와 같이 일반 함수는 여러 줄을 설명하는 반면에 Arrow Function은 한 줄로 표현이 가능한 것을 알 수 있어요.

또한 함수의 파라미터가 하나일 경우에 소괄호() 생략이 가능합니다.

const arrow2 = x => console.log(x);
arrow2(3);// 3

화살표 함수가 일반적인 함수보다 가독성이 좋고 심플하여 많이 사용됩니다. 그럼 왜? 일반 함수는 앞으로 안 쓰고 화살표 함수만 쓰면 좋은 거 아닌가? 하는 생각이 들 겁니다. 그러나 화살표 함수를 사용할 때는 다음과 같은 제약들을 기억해 두어야 합니다.

화살표 함수 사용 주의점

  • 화살표 함수는 익명 함수 표현식만 사용 가능합니다.
  • 객체의 메소드나 생성자 함수로는 사용이 불가능합니다.
  • 객체를 반환할 때는 소괄호로 감싸줘야한다.

화살표 함수에서의 this는 상위 환경의 객체(여기서는 전역 객체)를 가리키고 있기 때문에, 객체의 메서드로 사용하는 경우에는 this가 예상한 대로 동작하지 않을 수 있습니다. 

더보기

Java Script는 변수를 찾을 때 현재 환경(스코프)에서  그 변수가 없으면 바로 상위 환경에서 검색합니다. 그렇게 계속 타고 올라가다가 변수를 찾지못하고 가장 상위환경에 도달하면 작동이 멈춥니다. 따라서, 화살표 함수 내부에서 this를 사용할 때, 일반 함수처럼 실행 문맥에 따라 결정되는 것이 아니라, 상위 환경의 this를 그대로 상속받아 사용합니다. 이러한 차이점 때문에, 화살표 함수 내부에서 this를 사용하는 경우에는 주의해야 합니다. 상위 환경에서 this가 어떻게 결정되는지를 이해하고 있어야 합니다.

const game = {
name: 'LOL',
play: () => console.log(${this.name} 시작!), 
// this가 상위 환경의 객체를 가르키기 때문에 예상한 대로 동작하지 않음
};

game.play(); // undefined

 

또한 화살표 함수는 생성자 함수로 사용할 수 없습니다.

const Arrow = () => {};
const arrow = new Arrow(); // TypeError: Arrow is not a constructor


위와 같은 제약사항이 있기 때문에, 상황에 따라 일반 함수와 화살표 함수를 적절히 사용해야 합니다.