📌 비전공자가 자바스크립트를 학습하며 마주한 용어 및 개념들을 간단하고 얕게 정리해둔 포스팅입니다. 학습 메모용으로 작성 중인 포스팅이며 계속 업데이트될 예정입니다! 개인 학습용이라 부정확한 설명이 포함되어있을 수 있습니다. 꼭 자바스크립트 용어가 아닌 IT 용어도 포함될 수 있습니다.
✏️ Hoisting(호이스팅)
자바스크립트는 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언이 마치 끌어올려진 듯한 현상을 보이는데 이를 호이스팅이라고 한다. 변수 호이스팅의 예시 코드를 살펴보자.
console.log(hoist); // 결과: undefined
var hoist = '호이스팅 됨';
console.log(hoist); // 결과: '호이스팅 됨'첫 번째 줄에서 선언 전 콘솔을 찍어보니 ReferenceError: hoist is not defined가 아닌 undefined가 뜨는 결과를 볼 수 있는데, 이는 var가 선언과 초기화를 동시에 진행하는 선언이기 때문이다. 따라서 코드가 실행되기 전에 var hoist가 호이스팅되어 undefined로 초기화되었기 때문에 선언 전인 첫 번째 줄의 결과가 undefined가 뜨는 것이다.
물론 let, const 선언도 호이스팅된다. 하지만 결과는 ReferenceError가 뜰 것이다.
console.log(hoist); // 결과: ReferenceError: Cannot access 'hoist' before initialization
const hoist = "호이스팅 됨";하지만 hoist is not defined가 아닌 before initializtion 에러가 발생한 것을 보면, 선언은 되었으나 초기화가 되지 않아 발생한 참조에러이다. var와 달리 let과 const는 선언과 초기화가 분리되어있는 선언방식이기 때문에 선언에 대한 호이스팅은 되었지만 초기화가 되지 않아 참조에러가 발생하는 것이다.
이와 같이 호이스팅이란 선언 자체가 메모리에 등록되었다는 것이지 초기화까지 되었다는 뜻은 아니다.
정리하자면 호이스팅이란 함수, 변수, 클래스, 임포트와 같은 "선언"이 코드 어디에 있든 코드 실행 전 메모리 공간에 등록하여 마치 선언이 위로 끌어올려진듯한 현상을 보이는 것을 일컫는 용어이다.
✏️ TDZ(Temporal Dead Zone - 임시 사각지대)
자바스크립트의 변수는 선언(Declaration) → 초기화(Initialization) → 할당(Assignment)의 3단계로 생성된다.
| 선언 방식 | 선언 시 호이스팅 | 초기화 시점 | 초기값 | 초기화 전 접근 시 |
|---|---|---|---|---|
var | ✅ 호이스팅 | 선언 시 바로 초기화됨 | undefined | ✅ undefined 출력 |
let | ✅ 호이스팅 | 선언문 도달 시 초기화됨 (TDZ) | 없음 | ❌ ReferenceError |
const | ✅ 호이스팅 | 선언문 도달 시 초기화됨 (TDZ) | 없음 (초기값 필요) | ❌ ReferenceError |
그리고 위 표에서 보다시피 변수 선언 방식 중 let과 const는 var와 달리 선언과 초기화의 동작이 분리되어있는 선언이다. 따라서 위에 호이스팅의 예제코드에서 살펴봤듯, 선언 코드 전에 호출을 하면 undefined가 아닌 ReferenceError가 뜬다.
console.log(hoist); // 결과: ReferenceError: Cannot access 'hoist' before initialization
const hoist = "호이스팅 됨";여기서 자바스크립트가 띄워주는 에러 메세지가 존재하지 않는다는 메세지가 아닌 초기화되기 전엔 해당 변수에 접근할 수 없다는 메세지임을 확인할 수 있다. 이는 첫째줄, 즉 변수 hoist가 초기화 되기 전에 선언 호이스팅만 된 상태일 때는 변수 hoist가 TDZ 범위에 속하기 때문이다.
TDZ(Temporal Dead Zone)는 자바스크립트의 변수 선언 방식인 let, const, 그리고 class가 선언되었지만 아직 초기화되지 않은 상태에서 발생하는 구간을 의미한다.
아래는 선언과 초기화가 분리되어 있으면서 할당하지 않고 초기화만 가능한 let 선언을 통한 예시 코드이다.
// let
let testLet;
console.log(testLet); // 출력: undefined (TDZ를 벗어났지만 할당되지 않음)
testLet = '할당됨';
console.log(testLet); // 출력: '할당됨'✏️ 결합도 vs 응집도
✏️ ES5 vs ES6 차이점
✏️ 단위 테스트 vs 기능 테스트
✏️ E2E
✏️ 엣지 케이스
✏️ 클래스의 동적 메서드 vs 정적 메서드
✏️ 클래스의 정적 메서드 vs 객체의 필드
✏️ Closer(클로저)
✏️ 어휘적 스코프
✏️ Strict Mode(스트릭트 모드)
