javascript Arrow function

js ES6부터 추가된 함수를 만드는 문법인 arrow function을 알아보장

Arrow function

function f() {
  
}
var f = function() {
  
}

보통 함수를 만들 때는 이렇게 사용한다.

화살표함수로 사용하면?

var f = () => {
  
}

function이라고 쓰는거 귀찮은데 잘됐다.

함수를 사용하는 이유는
여러가지 기능을 하는 코드를 하나로 묶고 재사용할 때,
입출력 기능을 만들 때,
사용하게 된다.

저 화살표함수는 입출력기능이 눈에 잘 보이게 표현됐다.

var sum = (x) => { return x * 2 }

이런식으로 이해하기 쉬움

근데 파라미터가 하나면? 소괄호도 생략 가능하다.

var sum = x => { return x * 2 }

여기서 리턴이 한줄이면 중괄호랑 리턴도 생략 가능

var sum = x => x * 2;

이렇게 생략하니까 상당히 간편하게 알아볼 수 있는게
x가 들어오면 x*2로 나간다는게 확실히 눈에 띈다.

this

함수를 쓸 때 함수위치에 따라 this의 값이 변하는데,
화살표 함수에서는 어디서 써도 내부의 this값이 변하지 않는다.
즉, 바깥의 this의미를 그대로 내부에서도 사용하는 함수가 화살표 함수다.

ex)

var object = {
  f : function(){ console.log(this) }
}

object.f()

위 코드를 실행하면 this는 object가 나오게된다.

화살표함수로 사용하게되면

var object = {
  f : () => { console.log(this) }
}

이렇게 실행하면??
this는 window로 나오게 된다.