ES6 - Arrow Functions (화살표 함수)

 

함수를 간단하게 쓸 수 있는 방법이다.

 

arrow function은 block scope가 생성된다. (function scope와 비교되는 말)

 

화살표 함수에 없는 3가지는

1. 함수이름

2. this (실행 컨텍스트)

3. arguments

이다.

 

 

먼저 arrow function을 어떻게 쓰는지 보자.

 

:: 쓰는 방법 ::

let adder = function(x){
	return function(y){
    	return x + y;
    }
}

이 함수를

let adder = x => {
	return y => {
    	return x + y;
    }
}

이렇게 쓸 수 있다. 

여기서 끝이 아니라 return 을 생략할 수도 있다.

let adder = x => y => x + y;

 

즉, arrow function을 통해 중괄호와 리턴을 생략할 수 있다.

 

 

:: 화살표 함수에 없는 것 1 - 함수이름 ::

 

함수이름을 선언으로 해주고 function이라는 문구를 삭제, parameter를 바로 써주기 때문에 함수이름이 없다!

 

 

:: 화살표 함수에 없는 것 2 - this (실행 컨텍스트) ::

화살표 함수의 실행 컨텍스트는 상위 스코프의 실행 컨텍스트로 대체된다.

 

여기서 inner function을 arrow function으로 써주었기 때문에 inner function안의 this는 outer의 실행컨텍스트를 따른다.

function outer는 this의 5가지 경우 중 function invocation 이므로 this는 window가 된다.

function outer() {
	let obj = {
    	inner: () => {
        	console.log(this) //outer가 어떻게 실행되는지 따라서 결정: lexical
        }
    }
    
    obj.inner();
}

console.log(outer()); // window

 

let foo = () => {
	console.log(this)
}

new foo() // Uncaught TypeError: foo is not a constructor
foo.call({a:1}) // window

위의 코드를 설명하자면

arrow function 을 사용했을 때, construction mode를 사용할 수 없기 때문에 new foo()를 했을 때 에러가 뜬다.

그래서 call 메소드를 활용해서 this를 {a:1}로 지정해주면 {a:1}의 this가 window이기 때문에 window가 출력된다.

라고 이해했는데 맞겠지..?

 

 

 

 

 

예제 한 가지 더!

function foo() {
	var that = this;
    var f = () => {
    	console.log(that === this) //true
    }
    f();
}

foo() //true

 

그리고 헷갈렸던 문제

var obj = {
	i: 10,
    b: () => console.log(this.i, this), //Q1
    c: function() {
    	console.log(this.i, this) // Q2
    }
}

Q1 은 undefined, window

Q2 은 10, obj

가 콘솔창에 찍힌다!

 

그리고 예제 또 하나!!!

 

:: 화살표 함수에 없는 것 3 - arguments ::

 

그냥 함수를 사용했을 때는 arguments가 배열로 담겨서 나오는데

let myFun = function (){
	console.log(arguments);
}

myFun(1, 2, 3, 4); //Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

 

화살표 함수를 사용했을 때는 안나온다!

let myFun2 = () => {
	console.log(arguments);
{

myFun2(1, 2, 3, 4); // reference error arguments is not defined