자바스크립트 인터뷰 질문 10가지와 핵심 개념 정리

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• JavaScript 프론트엔드/백엔드 개발자
• 중급 이상의 자바스크립트 이해도를 가진 인터뷰 준비자
• ES6+ 문법과 비동기 처리 개념 숙지 필요

핵심 요약

• 변수 스코프 차이: var → 함수 스코프, let/const → 블록 스코프
• 비동기 처리 핵심: Promise 객체와 이벤트 루프의 비동기 처리 메커니즘
• 메서드 내 this 참조: 메서드 → 객체 자체, 화살표 함수 → 부모 스코프

섹션별 세부 요약

1. 변수 선언과 스코프

• var은 함수 스코프이며 재선언 가능
• let/const은 블록 스코프로 let은 재할당 가능, const는 불변
• const는 값 할당 후 재할당 불가

2. 클로저(Closure) 개념

• 외부 스코프의 변수를 기억하는 함수 객체
• 예시: outer() 함수 내부에서 정의된 inner() 함수
• 사용 사례: 모듈 패턴, 메모이제이션

3. 비교 연산자 차이

• == → 타입 강제 변환 후 비교
• === → 타입 체크 + 값 비교 (예: "5" === 5 → false)

4. 이벤트 위임(Event Delegation)

• 부모 요소에 하나의 이벤트 리스너를 등록하여 자식 요소 이벤트 처리
• 성능 최적화 및 동적 콘텐츠 처리에 유리

5. Promise와 비동기 처리

• 비동기 작업의 완료/실패 상태를 표현하는 객체
• 예: new Promise((resolve, reject) => { ... })
• then()/catch()로 결과 처리 가능

6. 호이스팅(Hoisting) 메커니즘

• var → 선언만 상단으로 이동, let/const → Temporal Dead Zone(TDZ) 발생
• let a; → undefined, let b = null → null

7. `this` 참조 규칙

• 메서드 내부 → 호출 객체
• 전역 범위 → window 객체 (비엄격 모드)
• 화살표 함수 → 부모 스코프의 this

8. 이벤트 루프(Event Loop)

• 비동기 콜백 처리를 위한 스택/큐 관리 시스템
• setTimeout, Promise 처리 시 비동기 실행 순서 보장

9. 배열 메서드 차이

• map() → 새로운 배열 반환
• forEach() → undefined 반환 (값 변환 X)
• 예: [1,2,3].map(x => x*2) → [2,4,6]

10. `undefined` vs `null`

• undefined: 선언된 변수에 값 할당 X
• null: 의도적인 값 누락 (예: let b = null)

결론

• ES6+ 문법과 비동기 처리 개념은 실무에서 필수
• map()과 forEach()의 차이점 주의
• this 참조 규칙을 테스트 시 화살표 함수 vs 일반 함수 구분 필수
• 이벤트 위임과 Promise를 통해 성능 최적화 및 비동기 코드 관리 실천