Javascript(1)-Arrow Function

Arrow Function

Arrow Function은 ES6에서 등장한 문법입니다. 기존의 function과 어떠한 차이가 있는지 알아보았습니다.

기본문법

var foo = () => console.log('bar') // bar

var foo = x => console.log(x)
foo('bar') // bar

var foo = (a, b) => a + b
foo(1, 2) // 3

var foo = (a, b) => {
  a + b
} // undefined

var foo = (a, b) => {
  return a + b
}
foo(1, 2) // 3

//객체
var foo = a => ({ b: a })

위와 같이 표현할 수 있습니다. 주의하셔야 할 점은 {} (Block)을 사용하실 경우는 return을 사용해야 하는 점입니다.

ES5 vs ES6

//es5
function double(params) {
  return params * 2
}
double(4) // 8

//es 6
const double = params => params * 2
double(4) // 8

bind

es5

기존 es5에서 함수의 내부 콜백 함수에서 this는 window입니다.

그로 인해 아래 코드와 같이

var brouk = {
  age: '28',
  counter: function counter() {
    setTimeout(function() {
      console.log(this.age)
      // console.log(this) // window
    }, 1000)
  },
}

brouk.counter() // undefined

내부함수 setTimeout의 this는 window 이기때문에 undefined가 출력되게 됩니다. 문제 해결을 위해선

var brouk = {
  age: '28',
  counter: function counter() {
    setTimeout(
      function() {
        console.log(this.age)
      }.bind(this),
      1000
    )
  },
}

brouk.counter() // 28

아래와 같이 bind처리를 해주어야 합니다.

es6 (Arrow Function)

Arrow Function의 경우

var brouk = {
  age: '28',
  counter: function counter() {
    setTimeout(() => {
      console.log(this.age)
    }, 1000)
  },
}

brouk.counter() // 28

위와 같이 바깥 함수에 적용 되는 것을 확인 하실 수 있습니다.

this의 scope에 대해서는 따로 한번 다시 정리를 해야할 필요가 있을 것 같습니다.

Arrow Function의 기본 문법 및 ES5와의 Scope차이를 인지해둡시다.

Reference

Written by@brouk

web developer

GitHub