[자바스크립트] Arrow Function은 무엇이고 this 스코프 차이

자바스크립트가 ES6로 개정되며 새로 들어온 것 중 하나가 Arrow Function이라는 것이 있다

Arrow Function 규칙

1) (매개변수) => { 본문 }
2) 매개변수가 하나뿐인 경우 괄호 생략 가능
3) 매개변수가 없을 경우엔 괄호 필수
4) 본문이 return [식 or 값] 뿐인 경우 { }와 return 키워드 생략 가능

위의 조건을 만족하게 예제를 통해 바꿔보자

var a = function () {
  return new Date()
}
var b = function (a) {
  return a * a
}
var c = function (a, b) {
  return a + b
}
var d = function (a, b) {
  console.log( a * b )
}

let a = () => new Date()
let b = a => a * a
let c = (a, b) => a + b
let d = (a, b) => {
  console.log( a * b )
}

 

5) 위 4)에서 return 할 값이 객체인 경우엔 괄호 필수

const f = () => {	// 에러
  a: 1,
  b: 2
}

const f = () => ({
  a: 1,
  b: 2
})

 

하지만! 기존의 function() {} 함수 형태를 1:1로 바로 변환할 수 있는 것은 아니다.

예제를 통해 기존의 function과 arrow function의 this 바인딩을 살펴보자

// function(){}방식으로 호출할 때
function objFunction() {
  console.log('Inside `objFunction`:', this.foo);
  return {
    foo: 25,
    bar: function() {
      console.log('Inside `bar`:', this.foo);
    },
  };
}

objFunction.call({foo: 13}).bar(); // objFunction의 `this`를 오버라이딩합니다.

Inside `objFunction`: 13 // 처음에 인자로 전달한 값을 받음
Inside `bar`: 25 // 자신이 있는 Object를 this로 인지해서 25를 반환

 

• 기존의 function에서 this의 탐색 범위가 함수의 {} 안에서 찾는다.
• 객체의 메소드에서의 this는 자신을 호출한 객체로 바인딩된다.

// Arrow Function방식으로 호출할 때
function objFunction() {
  console.log('Inside `objFunction`:', this.foo);
  return {
    foo: 25,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

objFunction.call({foo: 13}).bar(); // objFunction의 `this`를 오버라이딩합니다.

Inside `objFunction`: 13 // 처음에 인자로 전달한 값을 받음
Inside `bar`: 13 // Arrow Function에서 this는 일반 인자로 전달되었기 때문에 이미 값이 13로 지정됩니다

• arrow function을 사용하면 함수 안의 this는 상위 scope의 this를 가리킨다. (Lexical this라고 부름)

var name = 'kang';

var goo = {
  name: 'weon',
  getName: () => console.log(this.name),
};

goo.getName(); // 출력값 kang

• arrow function의 this는 상위 scope의 this를 가리킨다고 했다. 그래서 goo 객체의 상위 스코프인 window를 가리키게 된다.

 

그렇다면 위와 같은 this의 특성이 있는 블록 스코프와 비슷한데 무엇이 다를까?

• arrow function은 기본적으로 '함수 스코프'를 생성한다. but 실행컨텍스트 생성 시 this 바인딩을 하지 않는다.

 

또 다른 concise method와 arrow function의 차이

공통점

• prototype 프로퍼티가 없다. 즉 생성자 함수로 사용할 수 없다.
• arguments, callee가 숨겨져 있고 invoke해야만 값을 얻을 수 있다.

차이점

• method는 메소드로만 사용이 가능하다.
• arrow는 함수로만 사용이 가능하다.

        var name = '호호';
        const b = {
            name: '하하',
            bb(){
                return this.name;
            },
            a : x => {
                return this.name;
            }
        }

        console.log(b.bb());     // "하하"
        console.log(b.a());      // "호호"

따라서 a 프로퍼티는 메서드보다 함수로써의 기능을 수행하고 있다.

 

 

출처

• happycording.tistory.com/entry/Arrow-function-%EB%B9%84%EB%B0%80%EC%9D%84-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EC%9E%90-ES6
• beomi.github.io/2017/07/12/understanding_js_scope_function_vs_arrow/