[JavaScript] this

오늘 나에게 시련을 준 과제 3번

그리고 처음 내 답안

let a = 30;
let b = 40;

function test_3() {
    let a = 10;
    let b = 20;

    let max = () => (a > b ? a : b);
    console.log(max());

    let min = function () {
        return this.a < this.b ? this.a : this.b;
    };
    console.log(min());
}

test_3();

출력 결과

20
undefined

function() 내부에서 this는 function()을 갖고 있는 test_3에 있는 a와 b가 나와야 되니까 적어도 min값은 제대로 나와야 되는데 undefined가 나와서 멘붕이 왔다.

(지금 생각해보니 function() 내부에서 this는 function()을 가리키니까 당연히 undefined가 나오는게 맞다..)

고민 15분정도 하다가 모르겠어서 문제가 잘못됐나 의심하기 직전에 js의 제왕 동근님께 물어봤다.

그렇게 나에게 주어진 멋진 답안

let a = 30;
let b = 40;

function test_3() {
    a = 10;
    this.b = 20;

    let max = () => (a > b ? a : b);
    console.log(max());

    let min = function () {
        return a < b ? a : b;
    };
    console.log(min());
}

test_3();

출력 결과

40
10

오 됐다. 근데 왜??

다시 수업시간에 배운 this 바인딩을 복기해봤다.

this는 메소드에서 자신이 속한 객체에 바인딩됨

따라서 a = 10; 으로 선언하면 전역변수 a는 10이 저장되고, this.b = 20; 으로 선언을 하면 this.b는 test_3() 안에 있는 b를 가리키고, b는 전역변수를 가리킨다.

그래서 max값을 구할 때는 10 > 40 ? 10 : 40 연산이 수행되므로 40이 저장되고, min값을 구할 때는 10 < 40 ? 10 : 40 연산이 수행되므로 10이 저장된다.

내가 생각한 게 맞는지 테스트를 해봤다.

let a = 30;
let b = 40;

function test_3() {
    a = 10;
    this.b = 20;
    
    console.log("a: " + a));
    console.log("this.a: " + this.a));
    console.log("b: " + b));
 	console.log("this.b: " + this.b));
}

test_3();

출력 결과

a: 10
this.a: undefined
b: 40
this.b: 20

test_3()에서 전역 변수 a에 10을 대입했기 때문에 a는 10이 나오고, test_3() 내에서 a가 선언되지 않았으므로 undefined가 출력된다.
b를 출력하면 전역변수 b에 저장된 40이 출력되고, this.b를 출력하면 test_3() 내의 지역변수 b에 저장된 20이 출력된다.

이 엄청난 사실을 스터디원들에게 알려주기 위해 이 문제를 해결했는지 물어봤는데 기윤님께서 동근님과 다른 답안을 보내주셨다.

let a = 30;
let b = 40;

function test_3() {
    this.a = 10;
    this.b = 20;

    let max = () => (a > b ? a : b);
    console.log(max());

    let min = function () {
        return this.a < this.b ? this.a : this.b;
    };
    console.log(min());
}

test_3();

이렇게 되면 위와 같은 원리지만 전역 변수 a에 10을 넣는 것이 아니라 전역 변수 a의 값은 30으로 남겨두고, test_3() 안에 지역변수 a를 선언해 10을 저장해 전역변수와 지역변수를 각각 비교하는 것이다.

let a = 30;
let b = 40;

function test_3() {
    this.a = 10;
    this.b = 20;
    
    console.log("a: " + a));
    console.log("this.a: " + this.a));
    console.log("b: " + b));
 	console.log("this.b: " + this.b));
}

test_3();

출력 결과

a: 30
this.a: 10
b: 40
this.b: 20

그래서 max값을 구할 때는 30 > 40 ? 30 : 40 연산이 수행되므로 40이 저장되고, min값을 구할 때는 10 < 20 ? 10 : 20 연산이 수행되므로 10이 저장된다.

내 생각에 문제에서 원하는 답은 전역변수와 지역변수를 각각 비교하는 위 코드가 맞는 것 같다.

갈피를 못 잡고 있던 저에게 도움을 주시고, 덕분에 깊게 공부할 수 있게 해주신 동근님과 기윤님께 감사드립니다!