[ES6] 화살표 함수

기존 functio을 이요한 함수 선언 방식을 아예 대체하는 것은 아님

사용 용도가 조금 다름

주로 함수를 파라미터로 전달할 때 유용

etTimeout(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(); //흰둥이: 멍멍!

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

 

화살표 함수는 값을 연산하여 바로 반환해야 할 때 사용하면 가독성이 높일 수 있음

function twice(value) {
  return value * 2;
}

const triple = (value) => value * 3;

따로 {}를 열어 주지 않으면 연산한 값을 그래도 반환한다는 의미

 

 

※도서 "리액트를 다루는 기술" 참고