"this" 키워드 퀴즈 7개 풀이(4~7번) by Dmitri Pavlutin

https://dmitripavlutin.com/javascript-this-interview-questions/#question-1-variable-vs-property

7 Interview Questions on "this" keyword in JavaScript. Can You Answer Them?

Question 4: Artificial method

How can you call logMessage function so that it logs "Hello, World!"?

const object = {
  message: 'Hello, World!'
};

function logMessage() {
  console.log(this.message); // "Hello, World!"
}

// Write your code here...

풀이

함수의 메소드인 call을 활용하여 object를 this값으로 정해주는 코드를 작성한다.

따라서 추가할 코드는..

logMessage.call(object);

결과는 의도한대로 "Hello, World!"가 출력되었다!

 

☛call 메소드와 비슷한 역할을 하는 메소드가 2개 있다.

//apply 메소드 (this,[arg1,agr2,...])
logMessage.apply(object);

//bind 메소드
const boundLogMessage = logMessage.bind(object);
boundLogMessage();

bind 메소드는 반드시 새로운 변수에 할당해주어 그 변수를 통해 함수를 실행해야 작동한다.

 

Question 5: Greeting and farewell

What logs to console the following code snippet:

const object = {
  who: 'World',

  greet() {
    return `Hello, ${this.who}!`;
  },

  farewell: () => {
    return `Goodbye, ${this.who}!`;
  }
};

console.log(object.greet());    // What is logged?
console.log(object.farewell()); // What is logged?

풀이

function 키워드 없이 greet처럼 함수를 선언하는 것이 되는 줄은 아는 바가 없으나,

선언되었다고 한다면 dot notation은 함수를 실행하는 최종 객체가  this이므로 첫 번째 정답은 'World'이다. --> 정답

 

두 번째는 화살표 함수이기 때문에 this를 인식하지 못한다.

따라서 상위 스코프에서 this를 찾지만 this.who를 정의하지 않았으므로 정답은 undefined --> 정답

Question 6: Tricky length

What logs to console the following code snippet:

var length = 4;
function callback() {
  console.log(this.length); // What is logged?
}

const object = {
  length: 5,
  method(callback) {
    callback();
  }
};

object.method(callback, 1, 2);

풀이

실행 컨텍스트를 확인해보면,

먼저 object가 실행되고 다음으로 callback이 실행되고 있다.

 

method 메소드가 callback 함수를 인자로 넘기므로,

callback 함수는 일반 함수 실행의 형식을 가지고 있다.

 

따라서 callback의 this는 전역 객체이다. 정답은 4!

Question 7: Calling arguments

What logs to console the following code snippet:

var length = 4;
function callback() {
  console.log(this.length); // What is logged?
}

const object = {
  length: 5,
  method() {
    arguments[0]();
  }
};

object.method(callback, 1, 2);

풀이

6번과 비슷하지만,

method에 넘겨준 인자들 중 첫 번째 인자를 일반 함수로 실행하였다.

 

일반 함수 실행 형식으로 callback 함수를 실행하였으므로 this는 전역 객체이다.

따라서 정답은 4 --> ❌

☛ method 함수에 넘긴 인자들은 총 3개이다.

그러므로 유사 배열 arguments = {callback, 1, 2}이 생성된다.

 

method 함수에서 argments[0], 즉 callback가 일반 함수 형태로 실행되는 듯 보이지만,

유사 배열 arguments 객체의 요소로서 실행되었기 때문에 callback의 this는 arguments 객체가 된다.

 

따라서 정답은 3(arguments.length === 3)

 

언제나 함수가 실행되는 방식이 어떻게 되는지 면밀히 분석해야겠다.

 

이것으로 스코어 5/7로 나름 선방했다.

 

더 많은 문제를 풀어봐야할 것 같다.