자바스크립트 - arrow function

참고자료: 인프런- 자바스크립트초급(es6)

Javascript ES6+ 제대로 알아보기 - 초급 - 인프런 | 강의

 

 

arrow function 

- arrow function을 쓰는이유는? arrow 함수 안에서 같은 this를 쓸 때! 

 

 

1) 기본형태

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

 

이런 식으로 간결하게 쓸 수 있어

특징적으로 함수지만, let을 쓰고 function 기본 함수를 사용하지 않는다는 점!

 

 

2) var와의 관계

  const a = function(){
    var x=10;
  }
  console.log(x);

원래 arrow function은 함수스코프가 자동으로 생성이 돼. 다만, 실행컨텍스트 생성시 this를 바인딩하지 않지!

즉, arrow 함수 안에 내부에 this를 사용하면 밖에 있는 this를 끌어와 사용하지

 

하지만, 참고로 위에 코드를 실행하면 error 발생

왜냐면 var는 함수 스코프 안에 있으면 따로 출력이 되지 않아. 왜냐면 var 블록 스코프의 영향을 받지 않거든!

 

 

3) arrow 함수 안에 forEach가 있다면?

const obj = {
  grades: [80, 90, 100],
  getTotal: function () {
    this.total = 0 //이 this는 obj 
    this.grades.forEach(function(v) { //이 this도 obj
      this.total += v //하지만 여기서는 window
    })
  }
}
obj.getTotal()
console.log(obj.total)

함수 내부에 있는 this들은 모두 obj를 가리키지만, 

forEach라는 함수 안에서는 window를 가리킴 왜냐면, 이 함수의 내부적인 특성상 어쩔 수 없다. 

그렇다면, 따로 this를 다른 것으로 지정할 수 없을까?

 

그럼 this를 가리킬 다른 객체를 넣으면 된다!

const obj = {
  grades: [80, 90, 100],
  getTotal: function () {
    this.total = 0 //이 this는 obj 
    this.grades.forEach(function(v) { //이 this도 obj
      this.total += v 
    }, this)
  }
}

이렇게! 쉽지?

 

 

 

4) function과 arrow function을 비교해보자

  function sum(...arg){
    console.log(this);
    return arg.reduce((p,c)=> p+c);
  }
  sum(1,2,3,4,5)
  sum.call({},1,2,3,4,5);

이 함수의 결과값은 

 

1. 첫번째 결과는 window에서 작동하고 결과값이 나올거야. 왜냐면 this를 지정해준 값이 없기 때문에

2. 그렇다면 call함수를 통해 this 값을 지정해준다면, 첫번째 인자인 {}라는 빈객체에서 this가 지정이 되고 그 다음 인자들이 argument로 들어와 값이 15로 출력되게 되지. 그렇다는 말은 window 객체 환경에서 함수가 출력되지 않는다는 말이야.

 

 

 

그렇다면, arrow함수는 어떨까?

 

const sum2 = (...arg) =>{
    console.log(this);
    return arg.reduce((p,c)=> p+c);
  }
  sum2(1,2,3,4,5);
  sum2.call({},1,2,3,4,5);

arrow 함수로 출력한다면,

둘 다 window 객체에서 출력값이 생성되게 돼.

arrow함수는 빈객체를 바인딩하지 않는다는 뜻이지.

 

 

 

 

이 둘의 console.dir로 함수를 살펴보면(sum과 sum2 비교)   (결과 값을 직접 사진으로 첨부하지 않고 설명할게!)

sum 함수는 프로토타입이 존재해. 그렇다면 생성자함수로 사용할 수 있다는 말이야. 그럼 new Sum()으로 새로운 함수를 만들 수 있다는 뜻이 되겠지?

 

반대로 sum2라는 arrow 함수는 프로토타입이 존재하지않아.

-> 생성자 함수로 사용할 수 없다는 말이지. 그저 함수로서의 기능만. 그렇기 때문에 invoke를 꼭 해줘야 돼