[자바스크립트] ES6 - arrow function

[arrow function]

- function 표현에 비해 구문이 짧음

- 익명함수 : 함수 호출을 위해 함수 표현식을 사용

- 예시

let func1 = (val1, var2) => { return va1 + var2; }
let func2 = (var1,var2) => var1 + var2; 

- 블록을 지정할 때에는 return을 명시, 블록 지정하지않을 때 암묵적 return

[arrow function 특징]

1) 파라미터가 없을 때는 () 가 필수, 1개만 있을 때는 생략 가능

let func = var1 => { return va1; }

2) 객체 반환 시 소괄호 사용해서 짧게 작성해도됨

() => ({ a: 1 });

3) argements 객체 바인딩X : 함수 호출 시 인수를 담은 유사 배열 객체

/* ES5 */
let func1 = function(){
     console.log(arguments);
}

func1(1,2,3,4); // (4) [1, 2, 3, 4, callee: function, Symbol(Symbol.iterator): function]

/* ES6 arrow func */
let func2 = () => {
     console.log(arguments);
}

func2(1,2,3,4); // Uncaught ReferenceError: arguments is not defined

- arrow function의 함수객체에는 arguments 프로퍼티가 없음

4) arrow function는 고유의 this를 가지지않음

- 일반적인 함수 this 바인딩
(1) 생성자 - 새롭게 생성되는 객체
(2) 일반 호출 - window
(3) 객체 메서드 - 호출객체 

(4) 메서드 내부 함수 - window

- ‘use strict’ 에서는 일반 함수 호출 this를 undefined로 바인딩함

let func1 = function(){
    return this;
}

func1(); // window 객체 리턴, 호출된 환경(컨텍스트) 객체를 this로

let Person = function(name){ 
    this.name = name;
}
Person.prototype.getName = function(){
    return this.name;
}
let jinbro = new Person(‘jinbro’); 
jinbro.getName(); // jinbro

- arrow function의 this는 arrow function을 감싸는 외부 스코프 계승

let hi = () => {
    return this; //window
}

let jinbro = {
    name: 'jinbro',
    age: 26,
    getAge: () => {
        return this; //window, jinbro의 this
    }
}

let Person = function(name){
    this.name = name;
}
Person.prototype.getName = () => {
    return this;
}
let jinhyung = new Person(‘jinhyung’);
jinhyung.getName(); // window, jinhyung의 this

- 위와 같이 객체 메서드로 arrow function을 사용하면 객체의 this를 계승받으므로 window를 리턴함

5) prototype 객체를 포함하고 있지않음 : 생성자 없음(constructor)

- prototype 객체 내 constructor를 포함하고 있지않음

[정리]

- ES6 문법은 트랜스파일러와 함께 : babel

- this 명시적 바인딩 : call, apply, bind, this 변수화, array.prototype function params - thisArgs

[참고자료]

- MDN, Arrow Function : https://goo.gl/hdduQF

- MDN, Function.prototype : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function