[ES6] Arrow Function의 정의 및 일반 function과 차이점

1. Arrow Function - 화살표 함수

 - 함수를 정의할때 function이라는 키워드를 사용하지 않고 => 로 대체

 - 흔히 사용하는 콜백 함수의 문법을 간결화

// ES5 함수 정의 방식 var sum = function(a, b) {   return a + b; }; // ES6 함수 정의 방식 var sum = (a, b) => {   return a + b; } sum(10, 20);

※ 매개변수가 1개일때는 소괄호 생략 가능

var sum = x => {   return x; }

 

 

  - 반복문 예시

var arr = [1,2,3]; // ES5 함수 정의 방식 arr.forEach(function(value) {   console.log(value); }); // ES6 함수 정의 방식 arr.forEach((value) => {   console.log(value); });

 

 

2. 일반 function과 차이점

 

화살표 함수는 ES6 문법에서 함수를 표현하는 새로운 방식입니다. 이 문법은 주로 함수를 파라미터로 전달할 때 유용합니다.

setTimeout(function() {
 
  console.log('hello world');
 
}, 1000);
 
 
 
setTimeout(() => {
 
  console.log('hello world');
 
}, 1000);

하지만 이 문법이 기존 function을 대체할 수 없는 것은 용도가 다르기 때문입니다. 무엇보다 서로 가리키고 있는 this 값이 다릅니다.

function BlackDog() {
 
  this.name = '흰둥이';
 
  return {
 
    name: '검둥이',
 
    bark: function() {
 
       console.log(this.name + ': 멍멍!');
 
    }
 
  }
 
}
 
 
 
const blackDog = new BlackDog();
 
blackDog.bark(); // 검둥이: 멍멍!
 
 
 
function WhiteDog() {
 
  this.name = '흰둥이';
 
  return {
 
    name: '검둥이',
 
    bark: () => {
 
       console.log(this.name + ': 멍멍!');
 
    }
 
  }
 
}
 
 
 
const whiteDog = new WhiteDog();
 
whiteDog.bark(); // 흰둥이: 멍멍!

 

function()을 사용했을 때는 검둥이가 나타나고, () =>를 사용했을 때는 흰둥이가 나타납니다.

일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킵니다.

 

 

 

출처 : 책 [리액트를 다루는 기술] p.89