자바스크립트의 유명한 함정 18개로 만든 퀴즈입니다 — 타입 강제 변환, 호이스팅, 일시적 사각지대(TDZ), 클로저, this 바인딩, 마이크로태스크 순서. 답을 고르면 이유를 설명합니다.
What does this log to the console?
Every expected output in this quiz is a hand-verified constant, not the result of running eval() on the snippet. That keeps the page safe and lets it show what a value should be even for the borderline cases.
출력값 맞히기는 자바스크립트 면접에서 가장 자주 나오는 함정들로 만든 짧은 퀴즈입니다. 각 문제는 실제 코드 조각(대부분 console.log())과 4개의 보기를 보여주며, 정답은 하나뿐입니다. 답을 고르면 정답은 초록색, 틀린 선택은 빨간색으로 표시되고, 어떤 규칙 때문에 그 결과가 나오는지 1~2문장으로 설명합니다. 현재 점수, 연속 정답(스트릭), 18문제 진행 상황이 상단에 계속 표시되며, 최고 점수는 localStorage로 브라우저에 저장됩니다.
문제들은 자바스크립트에서 "어? 왜 이러지?" 하는 순간을 만드는 몇 가지 핵심 동작에 집중합니다: [] + {}, "" == 0, [] == ![] 뒤에 있는 ToPrimitive와 추상 동등 비교 규칙, IEEE 754 부동소수점과 0.1 + 0.2, 호이스팅과 일시적 사각지대, 반복문 안에서 클로저에 붙잡히는 var, 호출 위치에 따라 결정되는 this와 화살표 함수의 차이, typeof null과 typeof typeof 1, map과 함께 쓰는 parseInt의 진법, 그리고 콜 스택·마이크로태스크 큐·setTimeout의 실행 순서입니다. 가입 없이 브라우저에서 바로 실행되고 모바일에서도 작동합니다.
짧은 자바스크립트 코드가 코드 블록에 나옵니다. 보기를 보기 전에 무엇이 출력될지 먼저 생각해 보세요.
4개 보기 중 하나를 선택합니다. 정답은 초록색으로, 틀렸다면 선택한 보기가 빨간색으로 표시됩니다.
결과 뒤에 있는 강제 변환, 호이스팅, 스코프 규칙을 짧게 설명합니다. 그다음 다음 버튼을 누르세요.
18문제가 끝나면 18점 만점 점수와 등급이 나옵니다. 최고 점수는 저장됩니다. 다시 하려면 재시작을 누르세요.
+ 연산자는 두 피연산자를 원시값으로 변환합니다. 빈 배열은 빈 문자열 "", 일반 객체는 문자열 "[object Object]"가 되므로 "" + "[object Object]" 는 "[object Object]" 입니다. 문장 맨 앞에 쓴 {} + [] 는 다릅니다. 이때 {} 는 빈 블록으로 해석되고 앞의 + 때문에 +[], 즉 0이 됩니다. console.log() 안이나 표현식 위치에서는 항상 "[object Object]" 입니다.0.30000000000000004 이고 0.1 + 0.2 === 0.3 은 false 입니다. 안전하게 비교하려면 소수 자릿수를 고정해 반올림하거나, 차이의 절댓값이 Number.EPSILON 같은 작은 값보다 작은지 확인하세요.let 과 const 로 선언한 변수는 블록 맨 위로 호이스팅되지만 초기화되지 않습니다. 일시적 사각지대는 블록 시작부터 선언 줄에 도달하기 전까지의 구간입니다. 이 구간에서 변수를 읽으면 ReferenceError: Cannot access before initialization 가 발생합니다. 호이스팅 시 undefined 로 초기화되는 var 와 다릅니다. TDZ는 블록 스코프 변수를 선언 전에 사용하는 것을 조용한 undefined 대신 명확한 오류로 만들기 위해 존재합니다.this 는 함수를 어떻게 호출했는지에 따라 정해집니다: obj.fn() 은 점 앞의 객체, 그냥 fn() 호출은 strict 모드에서 undefined 그 외에는 전역 객체, new Fn() 은 새 인스턴스, 그리고 call·apply·bind 는 명시적으로 지정합니다. 화살표 함수는 이 모든 것을 무시하고 정의된 주변 스코프의 this 를 영구히 캡처합니다. 그래서 메서드 안의 콜백에 화살표 함수가 유용합니다.+ 의 ToPrimitive 규칙, var·let·함수 선언의 호이스팅 방식, 클로저가 값이 아니라 변수를 캡처한다는 점, this 의 호출 위치 규칙, 그리고 콜 스택·마이크로태스크 큐·매크로태스크 큐가 실행되는 순서입니다. 그런 다음 확인하기 전에 답을 소리 내어 예측하고, 틀리면 설명을 읽으세요. 이 퀴즈를 몇 번 반복하면 흔한 패턴은 자동으로 익혀집니다.