2025년 프론트엔드 개발자에게 필요한 40개의 JavaScript 인터뷰 질문 요약
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상: 프론트엔드 개발자, JavaScript 기초~고급 개념을 탐구하는 개발자
- 난이도: 중급~고급(기초 개념부터 비동기, 클로저, 모듈 등 고급 주제까지 포함)
핵심 요약
- JavaScript 핵심 개념:
var
,let
,const
차이, 형 강제(==
vs===
), 클로저, 비동기 처리(async/await
,Promise
) - 실무 적용:
===
사용으로 타입 혼동 방지,let
/const
로 변수 오염 방지,Promise.all()
을 통한 병렬 처리 최적화 - 핵심 기술 용어:
Array.isArray()
,Object.assign()
,JSON.parse(JSON.stringify())
,fetch()
,async/await
섹션별 세부 요약
- JavaScript의 정의
- 고수준 언어로 웹 브라우저 및 Node.js 환경에서 작동
- 객체지향, 기능형, 이벤트 기반 프로그래밍 패턴 지원
- 변수 선언 키워드
var
: 함수 범위 (호이스팅, 재선언 가능)let
: 블록 범위 (TDZ, 재선언 불가)const
: 불변 바인딩 (값 변경 불가, 객체/배열은 변경 가능)
- 데이터 타입
- 원시 타입:
string
,number
,boolean
,null
,undefined
,symbol
,bigint
- 비원시 타입:
object
,array
,function
(참조로 저장)
- 타입 강제(
==
vs===
)
==
: 타입 강제 후 비교 (예:'5' == 5' → true
)===
: 값과 타입 모두 일치 시만 true (예:'5' === 5' → false
)
- 호이스팅(Hoisting)
var
은 선언 시undefined
로 초기화let
/const
는 TDZ(임시 죽음 존)에서 접근 불가- 함수 선언은 완전히 호이스팅되어 호출 가능
- 클로저
- 외부 스코프의 변수를 기억하는 함수
- 예:
counter
변수는outer()
실행 후에도inner()
에서 접근 가능
- 비동기 처리
- 동기: 코드 실행 차단
- 비동기:
Promise
,async/await
사용하여 비차단 처리 가능
- 화살표 함수
this
바인딩 없음, 메서드/생성자 사용 불가- 짧은 콜백 및 함수 스타일 프로그래밍에 적합
- 렉시컬 스코프
- 변수 범위는 소스 코드 위치에 따라 결정
- 내부 함수는 외부 스코프 변수에 접근 가능 (클로저 기반)
- 이벤트 루프
- 콜스택과 콜백 큐 간 작업 이동
- 비동기 처리 시 비차단 실행 보장
- 객체 복사
- Shallow Copy:
Object.assign()
,{...obj}
- Deep Copy:
JSON.parse(JSON.stringify())
(함수/날짜 제외) - 고급:
Lodash.cloneDeep()
사용 권장
- 배열 메서드
map()
: 각 요소 변환filter()
: 조건에 맞는 요소 필터링reduce()
: 누적 처리 (예: 합산, 객체 병합)
- 배열 확인
Array.isArray(value)
사용 (타입 확인 시typeof
대체)
- 디스트럭처링
- 배열/객체에서 변수 추출
- 예:
const [a, b] = [1, 2];
,const { name } = { name: "Alice" };
- 스프레드 연산자
- 배열/객체 전개:
...arr
- 불변성 패턴 및 데이터 병합에 유용
- 프로미스(Promise)
pending
,fulfilled
,rejected
상태.then()
,.catch()
로 체이닝 처리
- async/await
- 비동기 코드를 동기처럼 작성
try...catch
로 에러 처리
- fetch()
- HTTP 요청을 위한 브라우저 API
async/await
과 결합하여 사용
- 에러 처리
try...catch
로await
호출 시 예외 처리- 미처리 프로미스 거부 방지
- Promise.all()
- 여러 프로미스 병렬 처리
- 모든 프로미스 성공 시만 결과 반환
- 모듈
export
/import
로 코드 재사용- ES6+, React, Node.js 등에서 널리 사용
결론
- 인터뷰 준비 전략:
===
사용,let
/const
선호, 클로저/비동기 개념 정리 - 실무 팁:
- Promise.all()
사용으로 병렬 처리 최적화
- async/await
으로 비동기 코드 가독성 향상
- fetch()
와 try...catch
로 네트워크 요청 안정성 확보
- 핵심 개념 정리: 타입 강제, 호이스팅, 클로저, 모듈, 비동기 처리는 프론트엔드 개발자에게 필수적인 기술 요소로, 실무 및 인터뷰에서 반복적으로 평가됨.