[javascript] 자바스크립트 코드 읽기 연습 - 중급 퀴즈4

자바스크립트에서 this 키워드는 문맥에 따라 다르게 동작합니다. 이번 퀴즈에서는 this의 동작 원리를 이해하고 문제를 풀어보세요!

---

퀴즈를 위한 코드

const obj = {
    name: "JavaScript",
    getName: function() {
        return this.name;
    },
    delayedGetName: function() {
        setTimeout(function() {
            console.log(this.name);
        }, 1000);
    }
};

console.log(obj.getName());
obj.delayedGetName();

---

 

퀴즈 문제

1. 위 코드를 실행하면 콘솔에 어떤 출력이 나올까요?
   • a) JavaScript, undefined
   • b) JavaScript, JavaScript
   • c) undefined, JavaScript
   • d) 오류 발생
2. setTimeout 내부에서 this.name이 undefined가 되는 이유는 무엇인가요?
   • a) setTimeout 내부의 함수는 obj의 메서드가 아니기 때문
   • b) setTimeout이 this를 자동으로 바인딩하기 때문
   • c) this는 항상 전역 객체를 가리키기 때문
   • d) 함수 내부에서는 this를 사용할 수 없기 때문

---

 

 

 

 

 

 

 

 

 

정답 및 해설

1번 문제 해설 (출력 결과 예상)

console.log(obj.getName()); // JavaScript
obj.delayedGetName(); // undefined (1초 후 출력)

• obj.getName() → this는 obj를 가리키므로 "JavaScript"가 반환됨
• obj.delayedGetName() → setTimeout 내부의 함수는 일반 함수이므로 this는 window(브라우저 환경) 또는 undefined(strict mode)로 설정됨

정답: ✅ a) JavaScript, undefined

2번 문제 해설 (setTimeout 내부에서 this.name이 undefined가 되는 이유)

• setTimeout 내부 함수는 obj의 메서드가 아니라 일반 함수이므로, this는 obj가 아닌 window(브라우저) 또는 undefined(strict mode)로 설정됩니다.
• 이를 해결하려면 bind()를 사용하여 this를 명시적으로 obj에 바인딩해야 합니다.

정답: ✅ a) setTimeout 내부의 함수는 obj의 메서드가 아니기 때문

---

 

 

이 문제를 풀기 위해 필요한 자바스크립트 개념

• this 키워드의 동작 방식
• setTimeout과 this의 관계
• bind(), call(), apply() 메서드
• 전역 객체와 strict mode

---

끝