Back
Featured image of post 자바스크립트 화살표 함수
Frontend

자바스크립트 화살표 함수

자바스크립트 화살표 함수 소개 및 주의사항!

화살표 함수

기존 함수 표기법을 화살표(⇒)형태로 간단하게 표기하는 함수 표기법

기존 함수 표현식과의 차이

//기존 함수 표현식
function name() {
  //code..
}

//화살표 함수
() => {
  //code..
};

화살표 함수 특징

괄호 생략

매개변수가 1개라면 괄호()도 생략이 가능하다.

const logMessage = (message) => {
  console.log(message);
};
logMessage('hello'); //'hello'

Lexical this

일반 함수 표기에서는 this사용 시 동적으로 해당 함수를 실행한 객체로 바인딩되었다.
하지만 화살표 함수에서는 자신을 소유하고 있는 객체로 바인딩되는게 아니라 해당 화살표함수를 소유하고 있는 상위 환경의 this를 그대로 계승한다. (이 개념을 Lexical this라고 한다..)
따라서 해당 객체의 속성에 접근이 필요한 메서드에서는 화살표 함수를 쓰지말자..

const person = {
  name: 'choi',
  getName: function () {
    return console.log(this.name);
  }
};
person.getName(); //choi

const food = {
  name: 'kimchi',
  getName: () => {
    return console.log(this.name);
  }
};
food.getName(); // ''

콜백 함수에서의 유용성

메서드 함수로 사용하는 대신, 함수를 반환하는 콜백 함수 용도로 사용하면 기존 함수 표현식 보다 깔끔해진다.
이미 문맥이 존재하고 함수 내부에서 이 함수를 사용하려고 할 때 유용하다.

//배열로 구성된 원소들에 대한 값을 검증하는 함수
const validator = {
  message: 'is valid.',
  checkElement: function (elements) {
    return elements.map((element) => {
      if (element) return element + this.message + '\n';
    });
  }
};
validator.checkElement(['값', '값2']);

만약 위 메서드 checkElement에서 화살표 함수가 아니라 일반 함수 표현식을 사용했다면, 내부함수에서의 this는 상위 컨텍스트를 바라보기 때문에 validator의 message를 가져오지 못하고 undefined를 출력 할 것이다. 따라서 화살표 함수를 사용하게된다면, 이러한 this 바인딩 범위를 잘 생각해야 한다.

© 2020 - 2023 Jiny