자바스크립트 / 화살표 함수와 this

this ?

자바스크립트에서는 this 가 어디에서 사용되느냐에 따라 달라진다.

사용처가 어디인지 그 위치에 따라 this 가 가르키는 것이 달라지기 때문에 유의해서 사용해야한다.

 

일반 함수에서의 this 는 주체가 되는 객체를 가르키지만,

화살표 함수의 this 는 window 객체를 가르키게 되기 때문에 ,

undefined 를 반환한다.

---

화살표 함수

 

화살표 기호를 활용하여 간단하게 함수를 정의할 수 있으며 ,

이름이 없고 this를 활용할 수 없다.

메서드에서 화살표 함수가 지원되지 않았지만 , ES6부터 지원이 되게 되었다.

 

-매개변수가 없는 경우 : 괄호 생략 불가능

let foo = () => console.log('bar');
      // let foo = function() { console.log('bar'); }
      foo(); // bar

 

-매개변수가 하나인 경우 : 괄호 생략 가능

      let foo = x => x;
      foo('bar'); // bar

 

-매개변수가 두개 이상인 경우 : 괄호 생략 불가능

 

- 실행문이 한문장인 경우 {} 와 return 생략 가능

let foo = (a, b) => a + b;
      foo(1, 2); // 3

 

-실행문이 한문장이라도 , {} 를 쓰게 된다면 return 명시

let foo = (a, b) => { return a + b };
      foo(1, 2); // 3
      
let foo = (a, b) => { a + b }; // "{}"를 사용했는데 return이 없을 때 
     foo(1, 2); // undefined

 

-실행문이 여러줄 이상이라면 , {} 와 return 무조건 사용

      let foo = (a, b) => { 
        let c = 3;
        return a + b + c;
      }

 

 

예시

    let gang = {
      resorts: ["강릉","속초","동해","설악산"],
      print: function(delay=1000) {
                console.log('** print Test1) => '+this.resorts.join(","));
             
                setTimeout(function() {
                  console.log('** print Test2) => '+this.resorts.join(","))  
 
                  }.bind(this), delay); // bind 사용후 Code : 객체 gang 을 this 에 bind
      }
    } 
    gang.print();

첫 print 메서드를 실행했을때, Test1 이 실행된다. 여기서의 this 는 gang 을 인식한다.

함수안에 또다른 setTimeout 함수가 있는데

그 안의 함수는 this 가 gang 을 인식하지 못하고 window 객체를 가르키게 된다.

-> undefined 반환

그로 인해 함수의 메서드인 .bind 를 이용하여 함수내 this 를 가르키는 객체를 지정해준다.

.bind(this)는 객체 gang을 가르키게 됨으로 내부함수인 setTimeout 내의 익명함수에서도 this를 gang 을 가르키게 된다.