A JavaScript quiz built from 18 famous gotchas — type coercion, hoisting, the temporal dead zone, closures, this binding and microtask ordering. Pick an answer, see why it happens.
자바스크립트의 유명한 함정 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.
Guess the Output is a short JavaScript quiz built around the language's most repeated interview traps. Each question shows a real snippet — usually a console.log() — and four possible outputs, exactly one of which is correct. When you pick, the right answer turns green, a wrong pick turns red, and a one or two sentence explanation tells you which rule produced that result. Your running score, current streak and progress through the 18 questions stay visible at the top, and your best score is remembered in your browser with localStorage.
The questions deliberately cluster around a handful of mechanics that account for most "wait, what?" moments in JavaScript: the ToPrimitive and abstract-equality coercion rules behind [] + {}, "" == 0 and [] == ![]; IEEE 754 floating point and 0.1 + 0.2; hoisting and the temporal dead zone; var captured by a closure inside a loop; how this is resolved at the call site and why arrow functions differ; typeof null and typeof typeof 1; parseInt radix with map; and the order the call stack, microtask queue and setTimeout run in. It runs entirely in your browser, needs no signup, and works on mobile.
출력값 맞히기는 자바스크립트 면접에서 가장 자주 나오는 함정들로 만든 짧은 퀴즈입니다. 각 문제는 실제 코드 조각(대부분 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의 실행 순서입니다. 가입 없이 브라우저에서 바로 실행되고 모바일에서도 작동합니다.
A short JavaScript snippet appears in a code block. Work out what it prints before you look at the choices.
Choose one of the four answers. The correct one turns green; if you missed it, your pick turns red.
A short note explains the coercion, hoisting or scoping rule behind the result. Then press Next.
After 18 questions you get a score out of 18 and a band. Your best score is saved. Hit Restart to try again.
짧은 자바스크립트 코드가 코드 블록에 나옵니다. 보기를 보기 전에 무엇이 출력될지 먼저 생각해 보세요.
4개 보기 중 하나를 선택합니다. 정답은 초록색으로, 틀렸다면 선택한 보기가 빨간색으로 표시됩니다.
결과 뒤에 있는 강제 변환, 호이스팅, 스코프 규칙을 짧게 설명합니다. 그다음 다음 버튼을 누르세요.
18문제가 끝나면 18점 만점 점수와 등급이 나옵니다. 최고 점수는 저장됩니다. 다시 하려면 재시작을 누르세요.
+ operator converts both operands to primitives. An empty array becomes the empty string "" and a plain object becomes the string "[object Object]", so "" + "[object Object]" is "[object Object]". Note that {} + [] typed at the start of a statement is different, because the {} is parsed as an empty block and the leading + makes it +[], which is 0. Inside console.log() or any expression position it is always "[object Object]".0.30000000000000004, and 0.1 + 0.2 === 0.3 is false. To compare safely, round to a fixed number of decimals or check that the absolute difference is smaller than a small epsilon such as Number.EPSILON.let and const are hoisted to the top of their block but are not initialized. The temporal dead zone is the span from the start of the block until the declaration line is reached. Reading the variable in that span throws a ReferenceError: Cannot access before initialization, unlike var which is initialized to undefined when hoisted. The TDZ exists so that using a block-scoped binding before its declaration is a loud error instead of a silent undefined.this is set by how the function is called: obj.fn() makes this the object before the dot, a plain fn() call makes this undefined in strict mode or the global object otherwise, new Fn() makes this the new instance, and call, apply or bind set it explicitly. Arrow functions ignore all of that and permanently capture this from the surrounding scope where they were defined, which is why arrows are handy for callbacks inside methods.+, how var, let and function declarations hoist, how closures capture a variable and not a value, the call-site rules for this, and the order in which the call stack, microtask queue and macrotask queue run. Then predict each answer out loud before you check it, and read the explanation when you are wrong. Repeating this quiz a few times is enough for the common patterns to become automatic.+ 연산자는 두 피연산자를 원시값으로 변환합니다. 빈 배열은 빈 문자열 "", 일반 객체는 문자열 "[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 의 호출 위치 규칙, 그리고 콜 스택·마이크로태스크 큐·매크로태스크 큐가 실행되는 순서입니다. 그런 다음 확인하기 전에 답을 소리 내어 예측하고, 틀리면 설명을 읽으세요. 이 퀴즈를 몇 번 반복하면 흔한 패턴은 자동으로 익혀집니다.