JavaScript - 문제 미리보기
문제 604
hard
다음 코드들의 실행 결과를 올바르게 예측한 것은?
```javascript
const obj1 = {
name: "Object1",
greet: function(greeting, punctuation) {
return greeting + " " + this.name + punctuation;
}
};
const obj2 = { name: "Object2" };
// 코드 A
const resultA = obj1.greet.call(obj2, "Hello", "!");
// 코드 B
const resultB = obj1.greet.apply(obj2, ["Hi", "?"]);
// 코드 C
const resultC = obj1.greet("Hey", ".");
```
```javascript
const obj1 = {
name: "Object1",
greet: function(greeting, punctuation) {
return greeting + " " + this.name + punctuation;
}
};
const obj2 = { name: "Object2" };
// 코드 A
const resultA = obj1.greet.call(obj2, "Hello", "!");
// 코드 B
const resultB = obj1.greet.apply(obj2, ["Hi", "?"]);
// 코드 C
const resultC = obj1.greet("Hey", ".");
```
정답: A
1. 코드 A: `obj1.greet.call(obj2, "Hello", "!")`
1) `call()`을 사용해 `obj1`의 `greet` 메서드를 `obj2` 컨텍스트에서 실행
2) `this.name`은 `obj2.name`인 "Object2"를 가리킴
3) 결과: "Hello Object2!"
2. 코드 B: `obj1.greet.apply(obj2, ["Hi", "?"])`
1) `apply()`를 사용해 `obj1`의 `greet` 메서드를 `obj2` 컨텍스트에서 실행
2) 인수는 배열로 전달되지만 함수 내부에서는 개별 매개변수로 받음
3) `this.name`은 `obj2.name`인 "Object2"를 가리킴
4) 결과: "Hi Object2?"
3. 코드 C: `obj1.greet("Hey", ".")`
1) 일반적인 메서드 호출로 `this`는 `obj1`을 가리킴
2) `this.name`은 `obj1.name`인 "Object1"을 가리킴
3) 결과: "Hey Object1."
이 예제는 `call()`과 `apply()`가 `this` 바인딩을 어떻게 변경하는지를 보여줍니다.
1) `call()`을 사용해 `obj1`의 `greet` 메서드를 `obj2` 컨텍스트에서 실행
2) `this.name`은 `obj2.name`인 "Object2"를 가리킴
3) 결과: "Hello Object2!"
2. 코드 B: `obj1.greet.apply(obj2, ["Hi", "?"])`
1) `apply()`를 사용해 `obj1`의 `greet` 메서드를 `obj2` 컨텍스트에서 실행
2) 인수는 배열로 전달되지만 함수 내부에서는 개별 매개변수로 받음
3) `this.name`은 `obj2.name`인 "Object2"를 가리킴
4) 결과: "Hi Object2?"
3. 코드 C: `obj1.greet("Hey", ".")`
1) 일반적인 메서드 호출로 `this`는 `obj1`을 가리킴
2) `this.name`은 `obj1.name`인 "Object1"을 가리킴
3) 결과: "Hey Object1."
이 예제는 `call()`과 `apply()`가 `this` 바인딩을 어떻게 변경하는지를 보여줍니다.
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.