지난주에는 JavaScript를 시작하며 타입 시스템, var/let/const, 암묵적 타입 변환, 단축 평가를 배웠습니다. 핵심만 빠르게 짚어보겠습니다.
typeof null === 'object': JS 초기 설계 버그, 하위 호환을
위해 유지NaN === NaN은 false: NaN 확인은 Number.isNaN() 사용var: 함수 스코프, 재선언 가능, 호이스팅 시 undefined —
사용 지양let: 블록 스코프, 재선언 불가, TDZ로 선언 전 접근 시
ReferenceErrorconst: 블록 스코프, 재선언·재할당 불가. 단, 객체 내부
변경은 가능'5' + 1 = '51': +는 문자열 우선, '5' - 1 = 4: -는
숫자 변환 시도=== 사용: ==는 타입 변환 후 비교하므로 예측 불가 — 항상
===||: 왼쪽이 falsy면 오른쪽 반환 (기본값 패턴)&&: 왼쪽이 truthy면 오른쪽 반환 (조건부 실행 패턴)원시 타입(숫자, 문자열 등)은 값이 복사되지만, 객체는 참조(주소)가 복사됩니다. 같은 객체를 두 변수가 바라보게 되므로 한쪽을 바꾸면 다른 쪽도 바뀝니다.
// 원시 타입 — 값 복사 (독립적)
let a = 1;
let b = a;
b = 99;
console.log(a); // 1 — 영향 없음
// 객체 — 참조 복사 (같은 객체를 가리킴)
const obj1 = { x: 1 };
const obj2 = obj1; // obj2는 obj1과 같은 객체를 가리킴
obj2.x = 99;
console.log(obj1.x); // 99 — !obj1도 바뀜!
함수가 일급 객체라는 것은 함수를 값처럼 다룰 수 있다는 뜻입니다. 이게 왜 중요할까요? React에서 매일 쓰는 코드가 이 덕분에 동작합니다.
// React에서 이벤트 핸들러를 전달하는 코드
function App() {
const handleClick = () => alert("클릭!");
// handleClick 함수를 값으로 전달 — 일급 객체이기 때문에 가능
return <button onClick={handleClick}>클릭</button>;
}
// 배열 메서드에 함수를 인자로 전달하는 것도 같은 원리
const nums = [1, 2, 3];
const doubled = nums.map((n) => n * 2
"함수가 어디서 호출되는지"가 아니라 "어디서 작성되었는지"가 스코프를 결정합니다. 전학생 비유로: 학생이 다른 반에 놀러 가도(호출 위치), 소속 반(선언 위치)의 규칙을 따르는 것과 같습니다.
const x = 1; // 전역에서 선언
function foo() {
console.log(x); // foo는 전역에서 작성됨 → 전역의 x를 봄
}
function bar() {
const x = 2; // bar 안의 x
foo(); // foo를 bar 안에서 호출해도...
}
bar(); // 1 출력 — foo는 전역에서 작성됐으므로 전역의 x(1)를 참조
Q1. 함수 선언식은 호이스팅되어 선언 전에 호출할 수 있습니다. 그런데 함수
표현식(const fn = function() {})은 선언 전에 호출하면 TypeError가
발생합니다. ReferenceError가 아니라 왜 TypeError인지, 호이스팅 과정을
단계별로 설명하세요.
함수 선언식은 선언과 초기화가 함께 호이스팅되어 함수 전체가 올라갑니다. 반면
var 함수 표현식은 변수 선언만 호이스팅되고 값(함수)은 undefined
상태입니다. undefined()를 호출하면 "undefined is not a function"이라는
TypeError가 발생합니다. const/let 표현식은 TDZ 때문에
ReferenceError가 먼저 납니다.
"호이스팅이 안 돼서 에러가 난다"고 답하는 경우가 많습니다.
호이스팅은 일어났지만, 값이 undefined인 상태에서 호출해서 나는 에러
라는 점이 핵심입니다.
Q2. 아래 코드의 실행 결과를 예측하고, 렉시컬 스코프 개념을 사용해 이유를 설명하세요.
const x = "global";
function foo() {
console.log(x);
}
function bar() {
const x = "bar";
foo();
}
bar();
"global"JS는 렉시컬 스코프(정적 스코프)를 사용합니다. 함수의 상위
스코프는 "호출 위치"가 아니라 "선언 위치"에 의해 결정됩니다.
foo는 전역에서 선언됐으므로 어디서 호출하든 전역 스코프의 x를 참조합니다.
bar() 내부에서 호출했으니 bar의 x인 "bar"가 출력된다고 예측하는 경우가
많습니다. 이는 동적 스코프 방식의 사고입니다.
JS는 렉시컬 스코프이므로 선언 위치가 기준입니다.
Q3. 아래 코드에서 obj1.x의 값은 무엇인가요? 원시값 복사와 참조 복사의
차이를 설명하세요.
const obj1 = { x: 1 };
const obj2 = obj1;
obj2.x = 99;
console.log(obj1.x);
99객체를 변수에 할당하면 값이 복사되는 것이 아니라
참조(메모리 주소)가 복사됩니다. obj1과 obj2는 같은 객체를
가리키므로 obj2.x를 변경하면 obj1.x도 함께 바뀝니다. 원시값(숫자, 문자열
등)은 값 자체가 복사되어 독립적입니다. 복사본을 만들려면 spread 문법({...obj} )이나 Object.assign()으로 얕은 복사를 해야 합니다.
Q4. IIFE(즉시 실행 함수 표현식)를 사용하는 이유는 무엇인가요? ES6 모듈 시스템이 있는 현재에도 IIFE를 쓰는 경우가 있는지 설명하세요.
IIFE의 핵심은 스코프 격리와 즉시 실행입니다. 모듈 시스템이 보편화되기 전에는 전역 변수 충돌을 막는 사실상 유일한 방법이었습니다. 현재도 다음 경우에 사용됩니다.
top-level await가 불가능한 환경에서 비동기 즉시
실행이번 주 범위와 관련된 실제 면접 질문들입니다. 정답을 외우기보다는 자신만의 말로 설명하는 연습을 해보세요.
변수를 참조할 때 현재 스코프에서 먼저 탐색하고, 없으면 상위 스코프로 순서대로 올라가며 탐색하는 구조입니다. 전역 스코프까지 탐색해도 없으면 ReferenceError가 발생합니다.
const a = "전역";
function outer() {
const b = "outer";
function inner() {
const c = "inner";
console.log(c); // "inner" — 자신의 스코프
console.log(b); // "outer" — 상위 스코프
console.log(a); // "전역" — 전역 스코프
}
inner();
console.log(c); // ReferenceError — 하위 스코프는 접근 불가
면접 팁: "스코프 체인은 안에서 밖으로만 탐색합니다. 바깥에서 안쪽은 접근할 수 없습니다. 이 구조가 렉시컬 스코프, 나아가 클로저의 기반이 됩니다"라고 정리하면 좋습니다.
Q2. JavaScript에서 함수는 왜 일급 객체(First-Class Object)라고 하나요?
일급 객체란 값처럼 다룰 수 있는 대상을 뜻합니다. JS의 함수는 아래 세 가지가 모두 가능하기 때문에 일급 객체입니다.
const fn = function() {}arr.map(fn)return function() {}이 특성이 콜백 함수, 고차 함수, 클로저의 근거가 됩니다. React에서 컴포넌트를 props로 넘기거나, 이벤트 핸들러를 전달하는 것도 모두 이 특성 덕분입니다.
함수의 상위 스코프를 함수가 선언된 위치를 기준으로 결정하는 방식입니다. 함수가 어디서 호출되느냐와는 무관합니다.
const x = "전역";
function foo() {
console.log(x);
}
function bar() {
const x = "bar 내부";
foo(); // foo를 bar 안에서 호출해도
}
bar(); // "전역" 출력 — foo는 전역에서 선언됐으므로 전역의 x를 참조
면접 팁: "렉시컬 스코프는 클로저가 동작하는 근거입니다. 함수가 선언된 환경(스코프)을 기억하기 때문에, 외부 함수가 종료된 후에도 내부 함수가 외부 변수를 참조할 수 있습니다" 라고 연결해서 답하면 좋습니다.
다음 주에는 JS에서 가장 어렵다고 꼽히는 개념들을 다룹니다. let/const의 세부 동작, 프로토타입(Prototype) 과 상속, 그리고 일급 객체로서의 함수 심화입니다. 특히 프로토타입은 다른 언어의 클래스 상속과 다른 JS만의 방식이라 처음엔 낯설 수 있습니다. 미리 읽어오면 대면 때 훨씬 이해가 빠릅니다.
다음 주 학습 자료(week7)의 얄코 강의를 시청하거나, 스킵 진단 문제 10개를 풀어보세요. 프로토타입은 다른 언어와 다르므로 미리 읽어오면 대면 때 이해가 훨씬 빠릅니다.