JavaScript 프론트엔드 면접 개념 정리 & 자주 나오는 질문 모음집

JavaScript 핵심 개념 & 면접 질문 정리

안녕하세요, 36기 YB 웹파트 최서희입니다. 😀

2주차 세미나를 통해 JavaScript를 더욱 구체적으로 배울 수 있었고, 이를 바탕으로 기술 면접 준비에 도움이 되는 내용을 정리해보았습니다.
이번 포스팅에서는 프론트엔드 면접을 준비하며 정리한 JavaScript 핵심 개념과 자주 등장하는 면접 질문들을 공유합니다. 스크랩해두고 꼭 복습해보세요! 🔥

✔️ 개념 정리 (핵심 요약)

📌 1. 변수 선언: var, let, const

• var: 함수 스코프, 호이스팅, 재선언 가능
• let: 블록 스코프, TDZ 존재
• const: 블록 스코프, 상수 선언

📌 2. 호이스팅 (Hoisting)

선언이 코드 상단으로 끌어올려지는 현상.

• var → undefined로 초기화
• let/const → TDZ(Temporal Dead Zone)에 묶임

📌 3. 스코프 & 클로저

• 스코프: 변수 접근 범위 (전역 / 함수 / 블록)
• 클로저: 외부 함수의 변수에 접근하는 내부 함수 → 상태 유지 가능

📌 4. 비동기 처리

• 콜백 → Promise → async/await로 발전
• 이벤트 루프, 태스크 큐, 마이크로태스크 큐 차이 이해 필수

📌 5. this 바인딩

• 호출 방식에 따라 this 바인딩 결정
• 화살표 함수는 상위 스코프의 this를 가짐

📌 6. 이벤트 위임

상위 요소에 이벤트 리스너를 등록해 하위 요소를 핸들링 → 동적 DOM 처리에 유용

📌 7. localStorage vs sessionStorage vs cookie

구분	유지 기간	자동 서버 전송	용량
localStorage	무기한	❌	5MB~10MB
sessionStorage	탭 종료 시 소멸	❌	5MB
cookie	만료 설정 가능	✅	4KB

📌 8. Debounce vs Throttle

• Debounce: 마지막 이벤트만 실행 (검색창 입력 등)
• Throttle: 일정 간격마다 실행 (스크롤, 리사이즈 등)

✔️ 실전 면접 질문 리스트

✅ 기본 문법

• var, let, const 차이점은?
• 호이스팅이란 무엇이며, let은 왜 ReferenceError가 날까?

✅ 함수 & 객체

• 클로저란 무엇인가요? 어디에 사용하나요?
• this 바인딩은 어떻게 결정되나요?
• 화살표 함수의 this는 일반 함수와 어떻게 다른가요?

✅ 비동기 처리

• 이벤트 루프란?
• microtask와 macrotask의 실행 순서 차이는?
• async/await는 어떻게 동작하나요?

✅ 브라우저 저장소

• localStorage와 sessionStorage, cookie의 차이점은?
• 쿠키는 언제 쓰고, localStorage는 언제 쓰나요?

✅ DOM & 이벤트

• 이벤트 위임이란?
• 이벤트 버블링과 캡처링 차이점은?
• addEventListener의 세 번째 인자는 무슨 역할?

✅ 기타

• 객체 깊은 복사 vs 얕은 복사?
• Debounce와 Throttle 차이?
• 프로토타입 기반 상속이란?

🔍 참고 자료

• 📘 Esoolgnah - Frontend Interview Questions
• 📘 baeharam - Must-Know-About-Frontend