LANGUAGE/JAVA SCRIPT

[JAVA SCRIPT] ARROW FUNCTION - 화살표 함수

진심스테이크 2018. 10. 22. 13:53

 

Arrow Function (화살표 함수)

- function 키워드가 없어도 함수를 만들 수 있음

- return을 사용하지 않아도 식을 계산한 값이 자동으로 변환

-> 이를 화살표(=>)를 사용하여 모든 함수 정의를 한줄로 끝냄

var lordify = firstName => '캔터베리의 ${firstName}'
//예전 방식
var lordify = function(firstName, land) {
  if (!firstName) {
    throw new Error('lordify에 이름을 넘겨야 합니다')
  }

  if (!land) {
    throw new Error('영주에게는 영지가 있어야 합니다')
  }

  return '${land}의 ${firstName}'
}

//새로운 방식
var lordify = (firstName, land) => {
  if (!firstName) {
    throw new Error('lordify에 이름을 넘겨야 합니다')
  }

  if (!land) {
    throw new Error('영주에게는 영지가 있어야 합니다')
  }
  return '${land}의 ${firstName}'
}

console.log(lordify("이계영", "맬버른")) //멜버른의 이계영
console.log(lordify("오현석")) //오류!

 

- this를 새로 바인딩 하지 않음

var gangwon = {
  resorts: [
    "용평", "평창", "강촌", "강릉", "홍천"
  ],
  print: function(delay = 1000) {
    setTimeout(function() {
      console.log(this.resorts.join(","))
    }, delay)
  }
}

gangwon.print() //Cannot read property 'join' of undefined 오류 발생!

//수정
var gangwon = {
  resorts: ["용평", "평창", "강촌", "강릉", "홍천"],
  print: function(delay = 1000) {
    setTimeout(() => {
      console.log(this.resorts.join(","))
    }, delay)
  }
}

gangwon.print() //용평, 평창, 강촌, 강릉, 홍천