[CH22]this

[yuzunsang]

[퀴즈 예시] Q. 여기에 퀴즈 설명을 적으세요.

적을 코드가 있다면 밑에 적어주세요. (백틱 3개로 코드를 감싸면 코드 양식을 적을 수 있습니다.)

// 예시 코드
const arr = [1, 2, 3];
console.log("Hello");

아래 코드를 복붙해서 정답을 적어주세요.

<details>
    <summary>정답</summary>
    <div markdown="1">    
    정답 설명
    </div>
</details>

[yuzunsang]

Q. 3초 뒤에 폭탄을 터트리기 위해 코드를 수정해보세요.

const bomb3sec = {
    boom: "BOOM",
    fire() {
        setTimeout(function () {
            console.log(this.boom);
        }, 3000);
    }
};

bomb3sec.fire();

[현재 결과] (3초 뒤에) undefined 출력 [예상 결과] (3초 뒤에) "BOOM" 출력 해답은 여러 개일 수 있습니다.

정답

화살표 함수로 변경
that 변수 사용
bind 메서드 사용

[J-yun-ji]

Q. this 바인딩이란 무엇인가?

정답

<div markdown="1">this와 this가 가리킬 객체를 바인딩하는 것이다. 
</div>

[bo-eun]

Q. 아래 함수 실행 값을 예상해보세요.

const cat = {
  name: 'meow',
  foo1: function() {
    const foo2 = function() {
      console.log(this.name);
    }
    foo2();
  }
};

cat.foo1();

정답

undefined
일반함수foo2의 this는 window이다. window에 name 프로퍼티가 없으므로 undefined가 뜬다.