[Js] Arrow함수 , This

 

this

this 의 기본 형식

const temp = {
    checkThis() {
        if(this == temp){
            console.log("같다");
        }else{
            console.log("다르다");
        }        
    },
};
temp.checkThis();
// 같다

즉 this 는 어디에서 선언되냐에 따라 그 값이 바뀐다.

• global scope 에서 사용될 때 this 는 전역 객체를 가리킨다.(window 객체)
• 함수에서 사용될 때에도 this 는 전역 객체를 가리킨다.
• 객체에 속한 메소드에서 사용될 때 this 는 메소드가 속한 객체를 가리킨다.
• 객체에 속한 메소드의 내부함수에서 사용될 때 this는 전역 객체를 가리킨다.
• 생성자에서 사용될때 this는 이 생성자로 인해 생성된 새로운 객체를 가리킨다.

 

객체에 속한 메서드의 내부함수

위까지는 장소가 명확하지만 객체에 속한 메소드에서 this는 메소드가 속한 객체를 가르키는데 그 메소드에서 선언된 함수의 this는 전역객체를 가르키는 것이다.

 

const student = {
    name: "Gildong",
    nickname: "Bandit",
    getIntro: function() {
        introFunction = function() {
            return `${this.username}님의 닉네입은 ${this.nickname} 입니다`
        };
        console.log(introFunction());
    }
};

student.getIntro();
// undefined님의 닉네입은 undefined 입니다

코드를 살펴보면 student라는 객체가 있습니다. 여기에는 name, nickname, getIntro라는 메소드가 있습니다.

이 메소드에는 introFunction이라는 내부함수가 있습니다. 이 내부함수에서 ${this.username} 과

${this.nickname}을 호출합니다. 그리고 student.getIntro(); 를 실행하지만 여기서 username과 nickname은

undefined으로 출려 됩니다.

 

왜냐하면 student.getIntro();는 전역스코프에서 실행이 되었고 따라서 여기에 getIntro의 내부함수인 introFunction이

this.username 과 this.username을 호출하기 때문에 this 가 window를 가르키게 되기 때문이다.

내부함수가 global에서도 제대로 작동하기 위해서는 내부함수에 객체의 this를 바인딩 할 필요가 있다.

 

 

Bind(자바스크립트 함수 호출)

bind는 새로운 함수를 반환한다. 이는 함수를 실행하기위해 () 소괄호를 사용하는 것과는 차이점, 다른 특징을 가질 수 있다, call(), apply() 처럼 this 를 지정할 수도 있고 또한 원하는 인자를 전달할 수도 있다. 이러한 이유로 bind()가 사용된다.

 

ex)

const student2 = {
    name: 'Gildong',
    info() {
        console.log(`내 이름은 ${this.name} 입니다.`);
    },
}

student2.info();
student2.info.bind({name: 'Cheolsu'}) ();

// 내 이름은 Gildong 입니다.
// 내 이름은 Cheolsu 입니다.

bind는 원본을 바꾸지 않고 this 객체만 바꿀수 있다.(bind 는 this를 재정의 한다.)

 

ex2)

let obj = {
    name: "Gildong"
};
function bindTest() {
    console.log(this.name);
}

bindTest(); //undifined 출력
let bindTest2 = bindTest.bind(obj); //bindTest 함수에 obj객체를 bind
bindTest2(); // Gildong

 

Arrow(화살표) 함수

 

화살표 함수의 특징

• 익명 함수로만 만들 수 있다.
• 생성자로 사용할 수 없다.
• 함수가 정의된 스코프에 존재하는 this 를 가리킵니다.
• 생성될 때 this 가 결정됩니다.
• 화살표 함수가 어떻게 사용되건, 호출되건, this 는 바뀌지 않는다.
• return하지 않아도 값이 반환된다.

const student5 = {
    name: "Gildong",
    nickname: "Bandit",
    getIntro: function() {
        introFunction = () => 
            `${this.name}님의 닉네입은 ${this.nickname} 입니다`
        
        console.log(introFunction());
    },
};

student5.getIntro();
//Gildong님의 닉네입은 Bandit 입니다

위 (예)와 비교를 하면 undefined값이 나왔던 getIntro 의 내부 함수가 정상적으로 작동하는 것을 확인 할 수 있습니다.

화살표 함수에서의 this는 자기가 정의된 스코프에 존재하는 this를 가르킵니다. 즉 자기의 상위에 있는 스코프의 this를 가르키는 것이죠. 따라서 우리는 내부함수에 어떠한 바인딩도 하지 않았지만 화살표 함수로 함수를 정의 했기 때문에 this 가 student5를 가르킵니다. (객체의 메소드를 화살표 함수로 정의하면 안됩니다.)

 

화살표 함수를 쓰면 안되는 상황

const Foo2 = () => {};
      const foo = new Foo2();
      
//에러

화살표 함수를 생성자함수로 사용하면 에러가 난다. 생성자 함수로는 사용할 수 없게 만들어졌다.