[JavaScript-07]this - this바인드편(bind,call,apply)

본 강의는 자바스크립트의 기초를 대충 안다고 가정하고 시작하는 조금 심도 깊은 포스팅이다.

완전 처음부터 배우고 싶다면 다른 블로그나 책의 글을 참조하기를 바란다.

특별한 추가 설명이 없다면 nodejs가 아닌 브라우저에서 사용하는 js를 의미한다.

참고:

javascript docs

ecmascript specification

this는 자바스크립트에서 조금 골치아픈 존재이다.

그리고 경우에 따라서 this는 획획 바뀔 수 있다. 그렇기 때문에 this를 고정시키는 방법이 존재한다.

이를 this바인딩이라고 한다.

여러분이 이상하다고 생각할 수 있는데... 솔직히 필자가 생각해도 이상하긴 하다.

다만 경우에따라서 매우 유용하게 사용할수 있다

예를들면 아래 보도록하자.

.

function sum(num) {
    return num + this.num1 + this.num2;
}

console.log(sum(100));

이러한 코드가 존재한다고 생각해보자.

위의 코드가 이상하다고 생각할 것이다.

왜냐하면 this라는게 없진 않지만 우리가 this를 따로 정할 수 없기때문에 this는 고정된 값이 될것이다.

어렵게 말했는데 쉽게 말하면 위같은 코드를 짜면 this가 의미가 없지 않은가. 그러니까 위같은 코드를 짜는게 좋지 않다는것이다.

실제로 위의 코드를 실행시키면 상황에 따라 값이 다르게 나온다.

위가 Browser라면? nodejs라면? strict모드라면? 메소드라면?? 모두 값이 다르게 나올 것이다.

그럼 이제 this를 바인딩해보도록 하자.

bind

function sum(num) {
    return num + this.num1 + this.num2;
}

var myObj = {num1:20, num2: 3};

var customSum = sum.bind(myObj);

console.log(customSum(5));

여러분은 어떠한 함수이건(그게 메소드라 할지라도) bind라는 함수를 사용할 수 있다.

즉 function object는 모두 bind를 사용할 수 있다는 것이다.

bind함수를 사용하면 this는 내가 정한 object로 고정된다.

그전에 만약 bind가 되있다면 그 bind를 무시하고 object를 고정하게 된다.

따라서 위는 어떠한 환경이던 this는 myObj가 되므로 확정된 결과를 보여줄 수 있게 된다.

위에서도 언급했지만 bind는 어떤상황에서든 사용할 수 있다.

설령 그게 메소드라 할지라도 말이다.

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    info(){
        console.log(`x: ${this.x}, y: ${this.y}`);
    }
}

var point = new Point(10, 20);

point.info();

point.info.bind({x: 100, y: 200})();

위처럼 코드를 작성해보자.

info는 Point의 메소드이기에 이미 this가 point로 bind되어있다.

그런데 여러분은 다시 바인드해서 사용할 수 있다.

필자는 항상 js를 볼때마다 도대체 왜 이렇게 까지 해야하나 싶긴하다.

bind를 통해서 this를 붙히는걸 하고나면 이제 this에 대해서 사용하기 매우 편하다.

call, apply

call, apply는 bind와 같은 역활을 하지만 차이점이 있다면 아예 실행까지 한다는 것이다.

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    info(v, w) {
        console.log(`x: ${this.x}, y: ${this.y}, v: ${v}, w: ${w}`);
    }
}

var point = new Point(10, 20);

point.info(1, 2);

var customPoint = {x: 100, y: 200};

point.info.call(customPoint, 20, 30);
point.info.apply(customPoint, [2, 3]);

위의 코드는 bind대신 call과 apply를 사용했다. bind와의 차이는 bind는 연결만한다.

call과 apply는 연결하고 실행까지 한다는 것이다.

둘의 차이는 call의 경우 함수를 실행할때 파라메터를 하나씩 넘기고 apply는 배열로 넘기게된다는 것이다.

이제 어느정도 this를 bind하였다. 이제 주의해야할 점을 확인해 보자.