JavaScript 면접 질문

JavaScript 면접에서 다루는 내용

샘플 JavaScript 면접 질문

• 클로저란 무엇이며, 실제 사용 예를 들어보세요.
  좋은 답변이 다루는 것

  • 함수와 렉시컬 환경의 조합
  • 데이터 은닉(private variable)
  • 카운터, 이벤트 핸들러 예시
  • 모듈 패턴
  • 메모리 누수 주의

  샘플 답변 보기

  클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 함수 내부에서 외부 변수에 접근할 수 있는 특성을 의미하며, 자바스크립트의 변수 스코프가 함수 수준임에 기반합니다. 대표적인 예로 `function outer() { let count = 0; return function inner() { count++; return count; } } const counter = outer(); counter();`와 같은 카운터 함수가 있습니다. 이를 통해 데이터 은닉과 상태 유지가 가능합니다. 실제로는 이벤트 핸들러에서 클릭 횟수 추적, 모듈 패턴에서 내부 변수 은닉 등에 사용됩니다. 주의할 점은 불필요한 클로저는 메모리 누수를 유발할 수 있으므로 사용 후 참조를 해제하는 것이 좋습니다.

• 이벤트 루프, 마이크로태스크, 매크로태스크를 설명하세요.
  좋은 답변이 다루는 것

  • 싱글 스레드 + 이벤트 루프
  • 호출 스택과 Web API
  • 매크로태스크(setTimeout, setInterval, I/O)
  • 마이크로태스크(Promise, queueMicrotask)
  • 우선순위: 마이크로태스크 우선
  • 예시: setTimeout vs Promise 순서

  샘플 답변 보기

  자바스크립트는 싱글 스레드 환경에서 동작하며, 이벤트 루프가 비동기 작업을 처리합니다. 호출 스택에 실행할 함수가 쌓이고, setTimeout, fetch 같은 비동기 함수는 Web API로 전달되어 완료 후 매크로태스크 큐에 콜백이 추가됩니다. 마이크로태스크 큐는 Promise.then, MutationObserver, queueMicrotask 등이 들어가며, 이벤트 루프는 호출 스택이 비면 먼저 마이크로태스크 큐를 모두 처리한 후, 하나의 매크로태스크를 꺼내 실행합니다. 예를 들어, setTimeout(callback, 0)과 Promise.resolve().then(...)이 있으면 Promise 콜백이 먼저 실행됩니다. 이로 인해 코드 실행 순서를 예측할 수 있습니다. 잘못 이해하면 렌더링 지연이나 성능 문제가 발생할 수 있습니다.

• ==와 ===의 차이점은 무엇이며, ==는 언제 허용되나요?
  좋은 답변이 다루는 것

  • type coercion
  • ===는 타입과 값 모두 비교
  • ==의 예측 어려움
  • null/undefined 체크에 == 사용 가능
  • Object.is와 차이
  • 권장: === 사용

  샘플 답변 보기

  `==`는 동등 연산자로, 비교 전에 피연산자의 타입을 강제 변환합니다. 예를 들어, `1 == '1'`은 `true`입니다. 반면 `===`는 일치 연산자로 타입 변환 없이 값과 타입이 모두 같아야 true를 반환합니다. `==`는 예측하기 어려운 결과를 낼 수 있어 일반적으로 `===` 사용이 권장됩니다. 하지만 `==`가 유용한 경우는 `null`과 `undefined`를 동시에 체크할 때입니다. `x == null`은 `x === null || x === undefined`와 같습니다. 추가로 `Object.is`는 `===`와 유사하지만 `NaN`과 `-0`을 다르게 처리합니다. 따라서 코드 가독성을 위해 특별한 이유가 없으면 `===`를 사용하는 것이 좋습니다.

• `this`는 어떻게 결정되며, call/apply/bind는 어떻게 변경하나요?
  좋은 답변이 다루는 것

  • 호출 방식에 따라 결정
  • 기본 바인딩 (global/undefined)
  • 암시적 바인딩 (메서드 호출)
  • 명시적 바인딩 (call, apply, bind)
  • new 바인딩
  • 화살표 함수의 lexical this

  샘플 답변 보기

  `this`는 함수가 호출되는 방식에 따라 결정됩니다. 기본적으로 전역 컨텍스트에서는 전역 객체(브라우저는 window)를 가리키며, 엄격 모드에서는 undefined입니다. 객체의 메서드로 호출되면 해당 객체가 `this`가 됩니다. `call`과 `apply`는 첫 번째 인자로 `this`를 명시적으로 설정하고 함수를 즉시 실행합니다. 차이는 인자를 전달하는 방식으로, `call`은 쉼표로, `apply`는 배열로 전달합니다. `bind`는 `this`가 고정된 새 함수를 반환하며, 이후에 호출할 수 있습니다. `new` 키워드로 생성자 함수를 호출하면 새로 생성된 객체가 `this`가 됩니다. 화살표 함수는 자체 `this`를 갖지 않고 상위 스코프의 `this`를 사용하므로, `call/apply/bind`로 변경해도 무시됩니다. 따라서 `this`를 예측하려면 호출 패턴을 명확히 이해해야 합니다.

• 디바운스(또는 쓰로틀) 함수를 구현하세요.
  좋은 답변이 다루는 것

  • 마지막 호출 후 delay만큼 기다림
  • clearTimeout과 setTimeout 적용
  • this와 인자 보존
  • 시간 복잡도 O(1), 공간 O(1)
  • leading 옵션(선택)

  샘플 답변 보기

  디바운스는 연속적인 호출을 그룹화하여 마지막 호출 이후 일정 시간이 지난 후에만 실행하는 기법입니다. 주로 입력 필드 자동완성, 검색 제안, 윈도우 리사이즈 이벤트 등에 사용됩니다. 아래는 디바운스 함수 구현입니다. ```javascript function debounce(func, delay) { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => { func.apply(this, args); }, delay); }; } ``` 주요 특징: `clearTimeout`으로 이전 타이머를 취소하고 새로운 타이머를 설정합니다. `this`와 `args`를 보존하기 위해 `func.apply(this, args)`를 사용합니다. 시간 복잡도는 호출 시 O(1)이며, 공간 복잡도는 O(1)입니다. 단, 연속 호출이 많으면 타이머가 계속 리셋되어 함수가 지연 실행됩니다. 주의할 점은 첫 번째 호출을 즉시 실행하는 leading 옵션이 필요할 수 있습니다.

  function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        func.apply(this, args);
      }, delay);
    };
  }

• var, let, const의 차이점은 무엇인가요?
  좋은 답변이 다루는 것

  • var: 함수 스코프, 호이스팅(undefined), 재선언 가능
  • let/const: 블록 스코프, TDZ, 재선언 불가
  • const: 재할당 불가(객체 속성 변경 가능)
  • 권장: const 기본, let 필요시

  샘플 답변 보기

  `var`는 함수 스코프를 가지며, 호이스팅 시 선언과 초기화가 모두 undefined로 이루어집니다. 같은 스코프 내에서 재선언이 가능합니다. `let`과 `const`는 블록 스코프를 가지며, 호이스팅되지만 Temporal Dead Zone(TDZ) 때문에 초기화 전에 접근하면 ReferenceError가 발생합니다. `let`은 재할당이 가능하지만 `const`는 상수로 재할당이 불가능합니다. `const`로 선언된 객체의 속성은 변경 가능하지만, 변수 자체를 다른 값으로 바꿀 수는 없습니다. 일반적으로 `var`는 사용을 지양하고, 재할당이 필요하면 `let`, 불변이면 `const`를 사용합니다.

준비 방법

• 까다로운 코드 조각의 출력을 예측할 수 있어야 합니다(루프 내 클로저, 비동기 순서).
• 디바운스, 쓰로틀, 간단한 프로미스를 처음부터 구현하는 연습을 하세요.
• 비동기 순서를 정확히 설명할 수 있을 정도로 이벤트 루프를 잘 이해하세요.
• 최신 기능(let/const, 화살표 함수, 구조 분해, 모듈)과 그 존재 이유를 알아두세요.

자주 묻는 질문