이러한 질문에 올바르게 답할 수 있다면 당신은 JavaScript를 사용할 수 있는 능력이 있는 것입니다

부정행위는 삼가해주세요.

이 질문의 개념은 제가 프로덕션 코드에서 접한 개념입니다. 이 퀴즈의 목표는 관련 있고 필수적인 JavaScript 지식을 테스트하는 것입니다.

Q1: 맥락 이해

콘솔에는 무엇이 기록되나요?

const user = {
  name: "Alice",
  isBanned: false,
  pricing: 'premium',
  isSubscribedTo: function(channel) {
    return channel === "JavaScript";
  },
  getName: function() {
    return this.name;
  },
  getStatus: function() {
    const status = () => {
      return `Name: ${this.getName()}, Banned: ${this.isBanned}`;
    };
    return status();
  }
};

const channel = "JavaScript";
const getName = user.getName;
const getStatus = user.getStatus;

console.log(user.getStatus());
console.log(getName());
console.log(getStatus());

정답:

• A) 이름: Alice, Banned: false, 정의되지 않음, TypeError: 정의되지 않은 'getName' 속성을 읽을 수 없습니다.
• B) 이름: Alice, 금지: false, 정의되지 않음, 이름: 정의되지 않음, 금지: 정의되지 않음
• C) 이름: Alice, 금지: false, 정의되지 않음, 이름: Alice, 금지: false
• D) 이름: Alice, Banned: false, 정의되지 않음, TypeError: this.getName은 함수가 아닙니다.

---

Q2: 종료

콘솔에는 무엇이 기록되나요?

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

const counter1 = createCounter();
const counter2 = createCounter();

counter1();
counter1();
counter2();

정답:

• 아) 1, 2, 3
• 나) 1, 2, 1
• 다) 1, 1, 1
• D) 1, 2, 정의되지 않음

---

Q3: 비동기 자바스크립트

콘솔에는 무엇이 기록되나요?

console.log('Start');

setTimeout(() => console.log('Timeout 1'), 0);

Promise.resolve().then(() => console.log('Promise 1'));

setTimeout(() => console.log('Timeout 2'), 0);

Promise.resolve().then(() => console.log('Promise 2'));

console.log('End')

정답:

• A) 시작, 종료, 시간 초과 1, 시간 초과 2, 약속 1, 약속 2
• B) 시작, 종료, 약속 1, 약속 2, 시간 초과 1, 시간 초과 2
• C) 시작, 약속 1, 약속 2, 시간 초과 1, 시간 초과 2, 종료
• D) 시작, 시간 초과 1, 시간 초과 2, 약속 1, 약속 2, 종료

---

Q4: JS의 프로토타입

콘솔에는 무엇이 기록되나요?

function Animal(name) {
  this.name = name;
}

Dog.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
}

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype.constructor = Dog;

const dog = new Dog('Rex');
dog.speak();

console.log(dog instanceof Dog);
console.log(dog instanceof Animal);

• A) 렉스가 소리를 낸다., 참, 거짓
• B) 렉스가 소리를 냅니다., 참, 참
• C) 오류: 말하기는 기능이 아닙니다.
• D) 렉스가 소리를 낸다., false, true

---

Q5: 기본 매개변수

각 통화에 대해 무엇이 기록되나요?

function displayUserInfo({ name = "Guest", role = "User" } = {}) {
  console.log(`Name: ${name}, Role: ${role}`);
}

displayUserInfo();
displayUserInfo({});
displayUserInfo({ name: "Alice" });
displayUserInfo(null);

---

Q6: 클로저와 기능

콘솔에는 무엇이 기록되나요?

const funcs = [];
for (var i = 0; i < 3; i++) {
  funcs.push(function() {
    console.log(i);
  });
}

for (let j = 0; j < 3; j++) {
  funcs.push(function() {
    console.log(j);
  });
}

funcs.forEach(func => func());

---

Q7: 이벤트 처리 및 전파

document.body.innerHTML = `
  <div id="outer">
    Outer
    <div id="middle">
      Middle
      <button id="inner">Inner</button>
    </div>
  </div>
`;

const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

outer.addEventListener('click', () => console.log('Outer Bubble'), false);
outer.addEventListener('click', () => console.log('Outer Capture'), true);

middle.addEventListener('click', (e) => {
  console.log('Middle Bubble');
}, false);
middle.addEventListener('click', () => console.log('Middle Capture'), true);

inner.addEventListener('click', () => console.log('Inner Bubble'), false);
inner.addEventListener('click', (e) => {
  console.log('Inner Capture');
}, true);

inner.click();

• A) 내부 캡쳐, 내부 버블, 중간 캡쳐, 중간 버블, 외부 캡쳐, 외부 버블
• B) 외부캡쳐, 중간캡쳐, 내부캡쳐, 내부버블, 중간버블
• C) 내부 버블, 중간 버블, 외부 버블
• D) 외부캡쳐, 중간캡쳐, 내부캡처, 내부버블, 중간버블, 외부버블
• E) 외부 캡쳐, 중간 캡쳐, 내부 캡쳐, 내부 버블

---

개발 도구 콘솔에 코드를 붙여넣어 직접 확인할 수 있습니다.

솔루션 Q1:

정답은 B입니다.

설명: user.getStatus() 호출은 화살표 함수 상태가 포함 범위 내에서 이에 올바르게 액세스하기 때문에 "이름: Alice, Banned: false"를 기록합니다. 그러나 getName()은 독립형 변수에 할당될 때 this 컨텍스트를 잃어버리기 때문에 undefound를 기록하고, getStatus()도 name과 isBanned 모두에 대해 undefound를 기록하게 됩니다.

솔루션 Q2:

정답은 B입니다.

설명: createCounter()를 호출할 때마다 새 클로저가 생성되므로 counter1과 counter2는 각각 별도의 count 변수를 갖습니다. 따라서 counter1은 처음 두 호출에서 1과 2를 기록하고 counter2는 첫 번째 호출에서 1을 기록합니다.

솔루션 Q3:

정답은 B입니다.

설명: 동기식 console.log는 "Start" 및 "End" 로그를 먼저 호출합니다. 이벤트 루프에서 약속은 setTimeout보다 우선순위가 높으므로 "Promise 1"과 "Promise 2"가 다음에 기록되고 "Timeout 1"과 "Timeout 2"가 기록됩니다.

솔루션 Q4:

정답은 A입니다.

설명: 이건 좀 까다롭네요. 말하기 메소드는 Dog.prototype에 올바르게 정의되어 있으며, dog은 Dog의 인스턴스입니다.

Dog 생성자 내에서 이 줄은 현재 this 컨텍스트와 name 인수를 사용하여 Animal 생성자를 호출합니다. 이는 새로 생성된 Dog 인스턴스의 name 속성을 효과적으로 설정합니다.

이제 코드가 다음과 같다고 가정해 보겠습니다.

// Code before...

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Code after...

그렇다면 정답은 B)가 될 것입니다.

참고: 직접 확인하려면 브라우저에 붙여넣어야 합니다(잘못된 답변을 얻는 LLM이 아님).

솔루션 Q5:

올바른 출력은 다음과 같습니다.

• 이름: 손님, 역할: 사용자
• 이름: 손님, 역할: 사용자
• 이름: 앨리스, 역할: 사용자
• TypeError: 'null'의 'name' 속성은 null이므로 분해할 수 없습니다.

솔루션 Q6:

정답: 3, 3, 3, 0, 1, 2

설명: 첫 번째 루프는 함수 범위가 있는 var를 사용하므로 배열의 전반부에 있는 모든 함수는 루프가 끝날 때까지 3인 동일한 i에 대해 닫힙니다. 두 번째 루프는 블록 범위가 있는 let을 사용하므로 후반부의 각 함수는 서로 다른 j 값(0, 1, 2)에 대해 닫히고 결과는 3, 3, 3, 0, 1, 2입니다.

솔루션 Q7:

정답은 D입니다.

설명:

• 이벤트는 상단(문서 루트)에서 시작하여 캡처 단계 동안 대상 요소로 아래로 이동하여 캡처 리스너(외부 캡처, 중간 캡처, 내부 캡처)를 트리거합니다.
• 대상(내부 버튼)에 도달하면 등록 순서(Inner Capture, Inner Bubble)에 따라 대상의 청취자를 트리거합니다.
• 그런 다음 버블이 발생하여 각 조상(중간 버블, 외부 버블)에서 버블 리스너를 트리거합니다.

이 예는 이벤트의 전체 수명주기를 보여줍니다. stopImmediatePropagation 또는 stopPropagation 함수를 호출하여 전파를 중지할 수 있습니다.

위 내용은 이러한 질문에 올바르게 답할 수 있다면 당신은 JavaScript를 사용할 수 있는 능력이 있는 것입니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!