Arrow Function

 

 

Arrow Function( => ) 

 

- 기존 function 에 비해 구문이 짧고

- 자신의 this, arguments, super 또는 new target 을 바인딩 하지 않습니다.

- 화살표함수는 항상 익명입니다.

- 이 함수 표현은 메소드 함수가 아닌곳에 가장 적합합니다.

- 따라서 생성자로서 사용할 수 없습니다. - MDN

 

 

var materials = [

'Hydrogen',

'Helium',

'Lithium',

'Beryllium'

];

console.log(materials.map(material => material.length));

// expected output: Array [8, 6, 7, 9]

- materials 변수는 4개의 값을 가지는 배열을 가지고있습니다.

- map() 함수를 통해 배열 전체를 순회하면서 material 이란 이름으로 각각의 배열을 전달받아

- 각각의 text 에 대해서 length 로 총 몇 글자인지 그 값을 배열로 다시 반환합니다.

 

var materials = [

'Hydrogen',

'Helium',

'Lithium',

'Beryllium'

];

console.log(

materials.map(

function(materials) {

return materials.length;

}

)

)

 

첫번째의 화살표 함수를 기존 함수로 풀어서 쓰면 두번째 예제와 동일합니다.

 

 

 

바인딩 되지않은 this

 

기존 자바스크립트 함수는 자신의 this 값을 정의했다.

이 함수가 생성자인 경우는 새로운 객체를, strict 모드 함수호출에서는 undefined 등

 

function Person() {

this.age = 0;

console.log(this.age); // 0

setInterval(function increase() {

console.log(this.age++); // NaN

}, 1000);

}

var p = new Person();

 

Person() 은 new Person() 으로 생성자 함수에 정의된 this를 갖고

 

increase() 의 this 는 전역객체인 window에 정의된다.

 

위의 함수의 의도는 increase() 의 this.age++ 가 this.age = 0 을 가리켜 1초마다 age의 값이 1씩 증가하도록 만들려는 함수였지만 사실상 this는 따로 놀고있다.

 

이 문제를 화살표 함수를 사용하면 간단하게 해결 가능하다.

 

function Person() {

this.age = 0;

console.log(this.age); // 0

setInterval(() => {

console.log(this.age++); // 0 부터 1씩 증가하게 된다.

}, 1000);

}

var p = new Person();

 

화살표 함수는 전역컨텍스트에서 실행될때 this 를 새로 정의하지 않고 바로 바깥의 함수의 this값을 사용한다.

 

 

call , apply 를 통한 호출

 

화살표함수에서는 this가 바인딩 되지 않았기 때문에 call(), apply() 메서드는 인자만 전달할뿐 this 는 무시된다.

 

var adder = {

base: 1,

add: function(a) {

var f = v => v + this.base;

return f(a);

},

addThruCall: function(a) {

var f = v => v + this.base;

var b = {

base : 2

};

return f.call(b, a);

}

};

console.log(adder.add(1));

console.log(adder.addThruCall(1));

 

둘다 값은 2가 나온다.

 

adder.add(1)

 

- adder 변수 내부에 add 메소드를 실행하는데 함수는 인자로 1을 받는다.

- f 변수에는 인자 1을 받아 base에 저장된 값과 더해준다.

- 만약 f 에 정의된 함수가 화살표가 아니라 기존 함수형태 였다면 그 함수 내부의 this 는 window객체를 가르키게되고 this.base 는 undefined 가 떴을것이다.

 

 

adder.addThruCall(1)

 

- adder 내부에 addThruCall 메소드를 실행하는 인자로 1을 받는다.

- f 에는 add 메소드와 동일하게 2가 저장된다.

- b 에 base 변수에 2를 할당해 준다.

- f 에 call 메소드를 사용하여 f 에 b 를 바인딩해주고 1 인자를 넘겨주면 기존함수였다면 예상 결과값은 1 + 2 로 3이 나와야겠지만 b 는 무시되고 인자 a 만 전달되서 두번째 메소드도 2의 값이 나오게 된다.

 

 

code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.