=> 쇽쇽

화살표 함수를 알아보기 전에 기존의 자바스크립트 함수 사용법을 알아보자.

다음은 기존 자바스크립트 함수를 선언하는 2가지 방법이다.

함수 선언문 방식(function statement)
function add(first, second) {
return first + second;
}
//typeof add ==='function'

함수 표현식 방식(function expression)
var add = function(first, second) {
return first + second;
};
//typeof add ==='function'

위의 함수 표현식은 익명 함수다. 이름이 없엉..
화살표 함수는 익명 함수를 선언하여 변수에 대입하는 방법과 유사하다.
다른점이라면 function 키워드를 생략하고 인자블록과 본문 블록 사이에 => 쵹! 해준다는 점이다.

1// var add = (first, second) => {
return first + second;
};
2// var add = (first, second) => first + second;
3// var addAndMultiple = (first, second) => ({add: first + second, multiply: first *second});

1은 앞서 말한 화살표 함수로 변경한것이고
2는 본문 블록이 비어있고 결과값을 바로 반환하는 경우 중괄호를 생략하고 => 뒤에 반환식을 넣을 수 있다.
3은 반환값이 객체라면 괄호로 결과값을 감싸 간결하게 표현한다.

화살표 함수는 함수 표현식을 간결하게 해주고, 이후 배우게 될 커링(currying???)과 같은 디자인 패턴에서 사용되는 함수를 반환할 때 '계단형 함수 선언'과 같은 구조가 만들어지지 않게 해준다는 장점이 있다

이게 뭔 뜻이냐?? 다음 코드를 보자아~

function addNumber(num) {
return function(value) {
return num + value;
};
}

이 친구를 이렇게 바꿘다.

var addNumber = num => value => num + value;

또한 화살표 함수는 콜백 함수의 this 범위로 생기는 오류를 피하기 위해 bind() 함수를 사용하여 this 객체를 전달하는 과정을 포함하고 있다.

뭔소리지.. 등짝을 보.. 아니 코드를 보자!

class Myclass {
value = 10;
constructor() {
var addThis2 = function(first, second) {
return this.value + first + second;
}.bind(this);
var addThis3 = (first, second) => this.value + first + second;
}
}

책 설명을 보니
addThis2() 함수는 this를 bind()함수에 전달하여 this의 범위를 유지하고 있고, addThis3()함수의 경우 화살표 함수이므로 이 과정이 생략 되었다고 한다.

ES6에서는 함수 내부에서 this가 전역객체를 바라보는 문제를 보완하고자, this를 바인딩하지 않는 화살표 함수를 새로 도입했다.
화살표 함수는 실행 컨텍스트를 생성할때 this 바인딩 자체가 빠지게 되어, 상위 스코프의 this를 그대로 활용할 수 있다.

기존 자바스크립트의 구조 분해 사용 방법 알아보기

before

var list = [0,1];
var item1 = list[0];
var item2 = list[1];
var item3 = list[2] || -1;

after

var list = [0,1];
var [
item1,
item2,
item3 = -1,] = list;

before

var temp = item2;
item2 = item1;
item1 = temp;

after

[item2, item1] = [item1, item2];

세상에

before

var obj = {
key1: 'one',
key2: 'two',
};
var key1 = obj.key1;
var key2 = obj.key2;
var key3 = obj.key3 || 'default key3 value';
var newKey1 = obj.key1;

after

var obj = {
key1: 'one',
key2: 'two',
};
var {
key1: newKey1,
key2,
key3 = 'default eky3 value',
} = obj;

구조 할당

var[item1, ...otherItems] = [0,1,2];
var{ eky1, ...others} = {key1: 'one', key2: 'two'};
//otherItems = [1,2]
//others = {key2: 'two'}