Arrow Function

Arrow Function

Arrow 의 사전적 의미는 화살, 화살표 => (화살표 함수)

 

코드 형태

(param) => {함수 코드}

const add = function(one, two){
    return one + two;
};
log(add(1, 2));

const total = (one, two) => {    // function 키워드 대신에 화살표 => 사용
    return one + two;
};
log(total(1, 2));

[실행 결과]

3

3

 

• function(){}의 축약 형태이지만 고려할 사항도 있음(this 참조가 다름)

 

 

함수 블록 사용

• 함수 블록과 return 작성 생략

const total = (one, two) => one + two;    // 함수 블록 {}과 return을 생략한 형태로 {return one + two}와 같음
log(total(1, 2));

[실행 결과]

3

 

• 함수 블록{}만 작성한 형태

const total = (one) => {};    // {} 만 작성하면 함수 블록에 rerutn을 작성하지 않은 것과 같으므로 undefined를 반환함
log(total(1));

[실행 결과]

undefined

 

• {key:value}를 반환하는 형태

const point = (param) => ({book: param});    // {key:value}를 소괄호()로 감싸면 {key:value}를 반환함
const result = point("책");
for (const key in result){
    log(key + ": " + result[key]);
};

[실행 결과]

book: 책

 

 

파라미터 사용

• 파라미터가 하나일 때

const get = param => param + 20;    // 파라미터가 하나이면 (param)에서 소괄호를 생략할 수 있음
log(get(10));    // get(10)에서 10이 param에 설정됨

[실행 결과]

30

 

• 파라미터가 없으면 소괄호만 작성

const get = () => 10 + 20;    // 파라미터가 없으면 소괄호만 작성할 수 있음
log(get());

[실행 결과]

30

 

 

화살표 함수 구조

• function을 => 로 표기하는 것이 전부가 아님
• 화살표 함수는 일반 함수와 구조가 다르며, 특징이 있음
  • prototype과 constructor가 없음
  • prototype에 메소드를 연결하여 확장할 수 없음
  • prototype이 없으므로 그만큼 가벼움
  • new 연산자로 인스턴스를 생성할 수 없음

 

• arguments 사용 불가
• arguments 대신에 rest 파라미터 사용

 

 

화살표 함수와 this

• strict 모드에서 함수를 호출할 때 함수 앞에서 오브젝트 작성은 필수

"use strict"
function book(){
    function getPoint(){
        log(this);
    };
    getPoint();
    // window.getPoint();    // window를 앞에 작성하지 않으면 this 값이 undefined
};
window.book();    // strict 모드에서는 window.book()처럼 호출하는 함수 앞에 오브젝트를 작성해야 함

[실행 결과]

undefined

 

• 화살표 함수로 해결

"use strict"
var point = 100;
function sports(){
    const getPoint = () => {
        log(this.point);    // getPoint() 화살표 함수 안에서 this가 window 오브젝트를 참조
    };
    getPoint();    // 화살표 함수로 getPoint() 호출 가능
};
window.sports();

[실행 결과]

100

 

• 화살표 함수에서 this가 글로벌 오브젝트를 참조(this 값이 undefined)
• 화살표 함수는 함수에 this를 갖고 있지 않기 때문에, this가 window 오브젝트를 참조

 

this가 정적 스코프 참조

• 화살표 함수에서 정적 스코프의 this를 사용
• 정적(Lexical) 스코프란
• 엔진이 해석할 때, 화살표 함수를 만나면 function 오브젝트를 생성하고 화살표 함수가 속한 스코프를 생성한 오브젝트에 바인딩
• 오브젝트에 바인딩된 스코프의 this를 화살표 함수에서 this로 사용

var title = "책";
const book = {
    show: () => log(this.title)    // 함수 밖 스코프의 변수를 사용하듯이 show()의 스코프인 book 오ㅓ브젝트에 설정된 this를 화살표 함수에서 사용
};
book.show();    // book 오브젝트가 글로벌 오브젝트에 설정되므로 this가 window 오브젝트를 참조

[실행 결과]

책

 

 

화살표 함수와 인스턴스

• 인스턴스에서 화살표 함수의 작성 위치에 따라 this가 참조하는 오브젝트가 다름
• prototype에 메소드로 작성

var point = 200;
const Point = function(){
    this.point = 100;
};
Point.prototype.getPoint = () => {    // prototype에 화살표 함수를 연결하면 함수 안에서 this가 글로벌 오브젝트 참조
    log(this.point);    // 글로벌 오브젝트의 point 값인 200을 출력
};
new Point().getPoint();

[실행 결과]

200

 

• prototype의 메소드 안에 작성

const Point = function(){
    this.point = 100;
};
Point.prototype.getPoint = function(){    // 화살표 함수의 스코프인 getPoint()의 this를 사용하기 때문
    const add = () => this.point + 20;    // 화살표 함수에서도 this가 생성한 인스턴스 참조
    log(add());
    [1, 2].forEach((value) => {
        log(this.point + value);
    })
};
new Point().getPoint();    // getPoint()가 일반 함수이므로 this가 생성한 인스턴스 참조

[실행 결과]

120

101

102

 

 

화살표 함수 특징

• fuction 대신 => 를 사용, 함수 표현식 형태
  • ptototype이 없으므로 함수가 가벼움
  • constructor가 없으므로 new 연산자로 인스턴스를 생성할 수 없음
• 화살표 함수에 this가 없음
  • 화살표 함수로 function 오브젝트를 생성할 때 정적으로 화살표 함수가 속한 스코프의 this를 화살표 함수에 바인딩함
  • 바인딩된 this 참조가 바뀌지 않으며 화살표 함수에서 this로 사용함
  • 일반 함수는 call() 등으로 바꿀 수 있음
• 메소드보다 함수로 사용하는 것이 효율성이 높음