[JavaScript] 화살표 함수(Arrow Functions)

출처

MDN 화살표 함수

 

MDN 예제

 

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
 
materials.map(function(material) { 
  return material.length; 
}); // [8, 6, 7, 9]
 
materials.map((material) => {
  return material.length;
}); // [8, 6, 7, 9]
 
materials.map(({length}) => length); // [8, 6, 7, 9]

 

 

 

자바스크립트에서 함수를 생성하기 위해서는 주로 function 키워드를 사용합니다.

function 키워드는 2가지 방법으로 함수를 생성할 수 있는데요, 

 

// 함수 선언(Function Declaration)
function sayHi(){ 
  console.log("hi!");
}
 
// 함수 표현(Function Expression)
var sayHi2 = function(){
  console.log("hi!");
};

 

이 중 함수 표현은 무명(anonymous:이름이 없음) 함수를 생성한 후 변수에 담는 방식입니다.

이 함수 표현 방법으로 함수를 생성할 때 화살표 함수를 사용하여 함수를 생성할 수 있습니다.

 

위 sayHi2를 화살표 함수로 생성하면 아래와 같습니다.

 

var sayHi2 = () => console.log("hi!");

 

이와 같이 화살표 함수는 무명 함수를 생성하는 방법 중의 하나로 기본 형태는  (파라메터1, 파라메터2,...) => { 함수내용 }입니다.

 

화살표 함수의 형태상 특징은 다음과 같습니다.

 

1. 함수 내용이 한줄인 경우 함수내용을 감싸는 {}를 사용하지 않아도 됩니다.

2. {}가 없는 경우 해당 함수의 실행결과를 자동으로 이천 합니다.

3. 함수 내용이 한줄 이상인 경우 return을 사용해서 결과를 리턴합니다.

4. 파라메터가 한개인 경우 파라메터를 감싸는 ()를 생략할 수 있습니다. (파라메터가 없는 경우에는 위의 sayHi2의 경우 처럼 파라메터 없이 빈 ()를     표시하여야 합니다.)

 

 

위 내용을 사용해서 함수 표현과 화살표 함수를 비교해 봅시다.

 

// 함수 표현
filteredArray = myArray.filter(function(element){
  return element > 2;
});
 
// 화살표 함수
filteredArray = myArray.filter(element => element > 2);

 

동일한 역할을 하는 코드지만 화살표 함수로 더 깔끔합니다.

화살표함수는 단순히 코드 수를 줄이는 역할 뿐만 아니라 일반 함수와 비교하여 this가 바인딩하지 않는다는 기능상의 차이도 있습니다.

 

var myObj = { 
  myText: "hi!",
  myFunc: function(){
    setTimeout(function(){
      console.log(this.myText);
    }, 1000)
  },
  myFunc2: function(){
    setTimeout(()=>console.log(this.myText), 1000);
  }
};
 
myObj.myFunc(); // undefined
myObj.myFunc2(); // "hi!"

 

위 예제에서 myFunc의 경우 setTimeout의 callback으로 function으로 생성된 무명 함수가 들어갑니다. 이 경우에 this는 새로 생성된 무명함수가 되어 this.myText는 undefined가 됩니다. 하지만 myFunc2처럼 화살표 함수를 사용하면 this는 그대로 myObj로 남게 되고 myObj.myText 역시 "hi!"로 남게 됩니다. 이처럼 객체에서 무명 함수를 callback으로 사용하는 경우this로 인해 헷갈리는 부분이 줄어들게 되었습니다.