📌 목차
-
변수 호이스팅 (Variable Hoisting)
1.1 호이스팅이란?
1.2var의 호이스팅
1.3let·const의 호이스팅 차이
1.4 호이스팅에 따른 문제와 해결 방법 -
이벤트 전파 방식 (Event Propagation)
2.1 버블링 (Bubbling)
2.2 캡처링 (Capturing)
2.3 문제 상황: 원치 않는 중복 처리
2.4 해결 방법
1. 변수 호이스팅 (Variable Hoisting)
1.1 호이스팅이란?
JavaScript 엔진이 실행 컨텍스트를 생성할 때, 변수 선언(var, let, const)과 함수 선언을 코드 실행 전에 끌어올리는 동작을 말합니다.
- 선언 단계(creation phase) 에 변수와 함수 이름이 스코프에 등록
- 실행 단계(execution phase) 에 실제 코드가 한 줄씩 실행
1.2 var의 호이스팅
console.log(x); // undefined
var x = 10;
console.log(x); // 10- 선언(Declaration)만 끌어올려지고, 할당(Initialization)은 원래 위치에서 실행
- 따라서 선언 이전에 접근하면
undefined반환
1.3 let·const의 호이스팅 차이
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 5;
console.log(b); // ReferenceError: Cannot access 'b' before initialization
const b = 7;- Temporal Dead Zone(TDZ): 선언 이전에 접근 시
ReferenceError - 스코프에 이름은 등록되지만, 실제 초기화 전까지 접근 금지
| 구분 | 호이스팅 시점 | 초기값 | TDZ 발생 여부 |
|---|---|---|---|
var | 선언 단계 끌어올림 | undefined | ❌ |
let | 선언 단계 끌어올림 | 없음 | ✅ |
const | 선언 단계 끌어올림 | 없음 | ✅ |
1.4 호이스팅에 따른 문제와 해결 방법
-
문제: 변수 선언 위치를 예측하기 어려워 가독성·버그 발생
-
해결
-
항상 선언부를 최상단 또는 사용 직전에 배치
-
let·const사용: TDZ로 인해 선언 순서 준수 강제 -
ESLint 규칙
// .eslintrc.json { "rules": { "no-var": "error", "prefer-const": "warn", "no-use-before-define": ["error", { "functions": false, "classes": true }] } }
-
2. 이벤트 전파 방식 (Event Propagation)
2.1 버블링 (Bubbling)
- 하위 → 상위로 이벤트가 전파
- 예:
<button>클릭 →<div>→<body>→<html>
<div id="parent">
<button id="child">Click me</button>
</div>
<script>
document.getElementById('parent')
.addEventListener('click', () => console.log('parent 버블링'));
document.getElementById('child')
.addEventListener('click', () => console.log('child 클릭'));
</script>2.2 캡처링 (Capturing)
- 상위 → 하위로 이벤트가 전파
addEventListener의 세 번째 인수에true전달
document.getElementById('parent')
.addEventListener('click', () => console.log('parent 캡처링'), true);2.3 문제 상황: 원치 않는 중복 처리
- 부모와 자식 모두 클릭 리스너가 등록된 경우 의도치 않게 두 번 실행
- 외부 라이브러리나 컴포넌트 트리 구조에서 흔히 발생
2.4 해결 방법
-
stopPropagation()- 현재 이벤트의 더 이상의 전파 차단
child.addEventListener('click', e => { console.log('child 처리'); e.stopPropagation(); }); -
이벤트 위임에서 조건 분기
event.target또는event.currentTarget비교하여 필요한 요소만 처리
parent.addEventListener('click', e => { if (e.target.matches('button')) { console.log('button 전용 처리'); } }); -
once옵션 사용- 한 번만 실행되는 리스너 등록
element.addEventListener('click', handler, { once: true }); -
캡처링/버블링 단계 분리
- 의도에 따라 캡처링 단계(
true)와 버블링 단계(false) 선택 등록
- 의도에 따라 캡처링 단계(
주니어 개발자