알아야 할 주요 JavaScript 인터뷰 질문

소개:

JavaScript는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로 남아 있습니다. 주니어 개발자이든 노련한 전문가이든 JavaScript를 마스터하는 것은 인터뷰에 성공하는 데 중요합니다. 이 블로그에서는 모든 개발자가 대답해야 할 10가지 필수 JavaScript 인터뷰 질문을 다룰 것입니다.

1. JavaScript의 클로저란 무엇입니까?

클로저는 JavaScript의 기본 개념입니다. 이는 함수가 해당 범위 외부에서 실행되는 경우에도 함수가 해당 어휘 범위에 대한 액세스를 유지하는 경우 발생합니다.

function outerFunction() {
  let outerVariable = 'I am from outer scope';

  function innerFunction() {
    console.log(outerVariable); // Accesses outerVariable
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // Outputs: I am from outer scope

중요한 이유: 클로저는 JavaScript의 데이터 캡슐화 및 함수 범위를 이해하는 데 핵심입니다.

2. 이벤트 루프와 작동 방식 설명

이벤트 루프는 JavaScript가 단일 스레드임에도 불구하고 비차단 작업을 수행할 수 있도록 하는 메커니즘입니다. 작업을 대기열에 배치하고 호출 스택이 비어 있을 때 실행하는 방식으로 작동합니다.

핵심 포인트:

Call Stack: 함수 실행을 처리합니다.
콜백 대기열: 실행할 준비가 된 콜백을 보관합니다.
이벤트 루프: 작업을 콜백 대기열에서 호출 스택으로 이동합니다.
중요한 이유: 효율적이고 반응성이 뛰어난 JavaScript 코드를 작성하려면 이벤트 루프를 이해하는 것이 필수적입니다.

3. ==와 ===의 차이점은 무엇인가요?

==(동등 연산자): 값을 유형 강제와 비교합니다.
===(엄격한 동등 연산자): 유형 강제 없이 값을 비교합니다(엄격한 동등).

console.log(5 == '5');  // true
console.log(5 === '5'); // false

중요한 이유: ===를 사용하면 유형 강제로 인해 발생하는 예기치 않은 버그를 방지하여 코드를 더 예측 가능하고 안정적으로 만들 수 있습니다.

4. Promise란 무엇이며 어떻게 작동하나요?

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 콜백에 비해 비동기 코드를 처리하는 더 깔끔한 방법을 제공합니다.

주요 방법:

then(onFulfilled, onRejected): 해결 및 거부된 상태를 처리합니다.
catch(onRejected): 오류를 처리합니다.
finally(onFinally): Promise의 결과에 관계없이 코드를 실행합니다.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Resolved!'), 1000);
});

promise.then(result => console.log(result)); // Outputs: Resolved!

5. JavaScript에서 이 키워드는 무엇입니까?

this 키워드는 현재 기능을 실행하는 개체를 나타냅니다. 그 값은 함수가 호출되는 상황에 따라 달라집니다.

일반적인 사용 사례:

전역 컨텍스트: 전역 개체를 나타냅니다.
객체 메소드: 객체를 나타냅니다.
생성자 함수: 생성된 인스턴스를 나타냅니다.

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

obj.greet(); // Outputs: Alice

6. 화살표 함수란 무엇이며 일반 함수와 어떻게 다릅니까?

화살표 함수는 더욱 간결한 구문을 제공하고 어휘 바인딩을 가집니다. 즉, 주변 컨텍스트에서 이를 상속받습니다.

const add = (a, b) => a + b;

차이:

정규 함수: 자체 this가 있습니다.
화살표 함수: 상위 범위에서 이를 상속합니다.

중요한 이유: 화살표 함수는 코드를 단순화하고 콜백에서 이 바인딩과 관련된 일반적인 문제를 방지합니다. 화살표 함수는 코드를 단순화하고 콜백에서 이 바인딩과 관련된 일반적인 문제를 방지합니다.

7. JavaScript에서 프로토타입 상속은 어떻게 작동하나요?

프로토타입 상속을 통해 객체는 다른 객체의 속성과 메서드를 상속받을 수 있습니다. JavaScript는 프로토타입을 사용하여 상속을 구현합니다.

const animal = {
  speak() {
    console.log('Animal speaks');
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log('Woof');
};

dog.speak(); // Outputs: Animal speaks
dog.bark();  // Outputs: Woof

8. null과 정의되지 않은 것의 차이점은 무엇입니까?

null: 의도적인 값 부재를 나타냅니다.

정의되지 않음: 선언되었지만 초기화되지 않은 변수를 나타냅니다.

let a;
console.log(a); // Outputs: undefined

let b = null;
console.log(b); // Outputs: null

9. 맵, 필터, 축소 방법이란 무엇인가요?

다음은 배열 조작에 사용되는 고차 함수입니다.

map: 각 요소에 함수를 적용하여 새로운 배열을 생성합니다.
필터: 테스트를 통과한 요소로 새 배열을 생성합니다.
축소: 함수를 적용하여 배열을 단일 값으로 줄입니다.

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((total, n) => total + n, 0);

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(evens);   // [2, 4]
console.log(sum);     // 15

10. JavaScript 성능을 어떻게 최적화합니까?

성능 최적화 기술:

축소 및 묶음: Webpack과 같은 도구를 사용하여 JavaScript 파일을 축소하고 묶습니다.

지연 로딩: 필요할 때만 리소스를 로드합니다.

디바운싱/스로틀링: 이벤트에 대한 응답으로 함수 실행 속도를 제어합니다.

메모리 누수 방지: 이벤트 리스너와 간격을 적절하게 정리하세요.

결론

이 10가지 JavaScript 인터뷰 질문을 마스터하면 기술 인터뷰에서 직면할 수 있는 다양한 시나리오와 과제에 대비할 수 있습니다. 이러한 주제에 대한 이해를 깊게 하면 인터뷰에 도움이 될 뿐만 아니라 전반적인 JavaScript 기술도 향상됩니다.

"권력은 욕구가 아니라 필요에 따라 나옵니다. 그러한 욕구를 창출해야 합니다."

위 내용은 알아야 할 주요 JavaScript 인터뷰 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!