JavaScript 인터뷰 코딩 질문 - 4

// 1. What will be logged? Why?
const module1 = {
  x: 55,
  getX: function () {
    console.log('x:', this.x);
  }
};

const module2 = {
  x: 55,
  getX: () => {
    console.log('x:', this.x);
  }
};

(function() {
  this.x = 66;
  module1.getX();
  module2.getX();
})();

x: 55
x: 66

같은 문제를 다른 예에서 살펴보겠습니다.

// 2. What will be logged? Why?
const message1 = {
  hello : 'Hello',
  names : ['Sue', 'Joe'],
  showMessage: function () {
    this.names.forEach(function(name) {
      console.log(`${this.hello} ${name}`);
    });
  }
}
message1.showMessage();

const message2 = {
  hello : 'Hello',
  names : ['Sue', 'Joe'],
  showMessage: function () {
    this.names.forEach(name => {
      console.log(`${this.hello} ${name}`);
    });
  }
}
message2.showMessage();

콘솔 출력은 다음과 같습니다.

undefined Sue
undefined Joe
Hello Sue
Hello Joe

message1에서 this.names.forEach 내부의 함수는 일반 함수로 정의되어 있으므로 this는 기본적으로 전역 객체(브라우저의 경우 Window, Node.js의 경우 global)와 동일하며 hello 재산. this는 엄격 모드에서 기본적으로 undefined와 같습니다!

한편, message2에서는 this.names.forEach 내부의 함수를 화살표 함수로 정의한다. 화살표 함수에는 자체 범위가 없으므로 소유자(이 경우 showMessage) 범위와 같습니다. showMessage의 범위는 래퍼 객체message2입니다. 이러한 이유로 hello를 사용하여 message2의 this.hello 속성에 도달할 수 있습니다.

아래에서 테스트할 수 있습니다.

이 질문은 JavaScript에서 Promise에 대한 지식을 평가하기 위한 것입니다.

const promiser = ms => new Promise((resolve, reject) => {
  setTimeout(() => { resolve('wait wait..') }, ms)
});

const timeout = new Promise((resolve, reject) => {
  setTimeout(() => { resolve('timeout!') }, 2000)
});

const race1 = Promise.race([promiser(1000), timeout]);
const race2 = Promise.race([promiser(3000), timeout]);

// What will be the output?
race1.then(res => console.log('race1:', res))
  .catch(err => console.log('race1:',  err));

// What will be the output?
race2.then(res => console.log('race2:', res))
  .catch(err => console.log('race2:', err));

결과는 다음과 같습니다.

race1: wait wait..
race2: timeout!

Promise.race()는 더 빨리 이행하거나 거부하는 승자 약속을 반환합니다. 우리timeout의 약속은 2초 안에 해결됩니다. promiser는 해결 시간을 매개변수로 사용합니다. 첫 번째 경주에서는 1초만에 해결되어 경주에서 이기지만, 두 번째 경주에서는 매개변수로 3초가 걸리므로 timeout가 먼저 해결됩니다.

아래에서 테스트할 수 있습니다.