JavaScript 인터뷰 코딩 질문 — 1

// What will be the console log of the code below?
for (var i = 0; i < 4; i++) {
  setTimeout(() => console.log(i), 0);
}

// Solution 1:
for (let i = 0; i < 4; i++) {
  setTimeout(() => console.log(i), 0);
}

// Solution 2:
for (var i = 0; i < 4; i++) {
  (function (i) {
    setTimeout(() => console.log(i), 0);
  })(i);
}

이것은 이것의 범위에 관한 것입니다.

// What will be the logs in console?
function nameLogger() {
  this.name = 'halil';
  console.log('first:', this.name);
}

console.log('second:', this.name);
nameLogger();
console.log('third:', this.name);

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

second: undefined
first: halil
third: halil

"초"가 실행되는 동안this.name은 정의되지 않지만nameLogger() 함수가 실행된 후에 정의됩니다. this는 함수의 전역 개체를 참조하기 때문입니다. 그래서 다른 사람들은 예상대로 "halil"을 기록합니다.

!! 'use strict'에서는 작동하지 않습니다. 함수에서 엄격 모드에서는 this가 전역 객체 대신 undefined와 같기 때문입니다.

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

마지막은 this와 bind에 관한 것입니다.

// What will be written?
const module = {
  x: 55,
  getX: function () {
    console.log('x:', this.x);
  }
};
const unboundX = module.getX;
unboundX();

x: undefined가 현재 소유자 개체를 참조하기 때문에 콘솔 출력은 this가 됩니다. 따라서 새 개체getX에 unboundX 메서드만 할당하면 this가 이를 참조합니다. 그리고 x 속성이 없기 때문에 this.x가 undefined와 같습니다.

아래와 같이 bind()를 사용하여 수정할 수 있습니다.

const boundX = unboundX.bind(module);
boundX();

이제 모듈 개체를 unboundX 함수에 바인딩합니다. 그러면 모듈의 x 속성에 도달할 수 있습니다.

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