자바스크립트 클로저, 호이스팅, 버블링

🚀

들어가기 전에 🔗

이번 시간에는 자바스크립트의 깊은 곳으로 함께 여행을 떠나보려 합니다.

자바스크립트는 배우기 쉬운 언어처럼 보이지만, 그 내부에는 독특하고 강력한 동작 원리들이 숨어있습니다.

오늘은 그중에서도 개발자의 이해도를 가늠하는 척도로 자주 사용되는 세 가지 핵심 개념,

클로저(Closure), 호이스팅(Hoisting), 그리고 이벤트 버블링(Event Bubbling)

에 대해 알아보겠습니다.

🚀

1. 클로저 (Closure): 기억하는 함수 🔗

클로저는 많은 신입 개발자들이 가장 어려워하는 개념 중 하나입니다.

하지만 그 본질은 생각보다 간단합니다.

클로저

란,

함수가 자신이 생성될 때의 환경(스코프)을 기억하여, 그 환경 밖에서 호출될 때에도 기억해 둔 환경의 변수들에 접근할 수 있는 현상

을 말합니다.

코드 예시

function createCounter() {
  let count = 0; // 외부 함수의 지역 변수 (가방 속 물건)
 
  // 내부 함수는 count 변수를 기억하는 클로저가 됩니다.
  return function() {
    count++;
    console.log(count);
  };
}
 
const counter = createCounter(); // counter 변수는 이제 클로저를 가리킵니다.
counter(); // 1
counter(); // 2

createCounter 함수는 실행이 끝났지만, 그 안의 count 변수는 counter가 참조하는 내부 함수(클로저) 덕분에 사라지지 않고 계속 살아남아 값을 기억하고 있습니다.

이것이 바로 클로저를 통해

데이터를 은닉

하고,

상태를 유지

하는 핵심 원리입니다.

🚀

2. 호이스팅 (Hoisting): 선언을 끌어올리다 🔗

자바스크립트 엔진은 코드를 실행하기 전에, 코드에 있는 모든 변수와 함수의

선언

을 각 스코프의 최상단으로 끌어올리는 것처럼 동작합니다.

이것을

호이스팅

이라고 부릅니다.

var와 let, const의 차이
var로 선언된 변수는 호이스팅되면서 undefined로 초기화됩니다.
따라서 선언 전에 호출해도 오류가 나지 않고 undefined가 출력됩니다.
```
console.log(myVar); // undefined (오류가 나지 않음)
var myVar = 10;
```
하지만 let과 const로 선언된 변수는 호이스팅되지만 초기화되지는 않습니다.
이 때문에 선언문이 나오기 전까지 '일시적 사각지대(TDZ, Temporal Dead Zone)'에 빠져, 접근하려고 하면 참조 에러(ReferenceError)가 발생합니다.
이것이 var보다 let, const의 사용이 권장되는 중요한 이유 중 하나입니다.
```
console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 10;
```

🚀

3. 이벤트 버블링 (Event Bubbling): 거품처럼 올라오는 이벤트 🔗

이벤트 버블링은 HTML 요소에서 이벤트가 발생했을 때, 그 이벤트가

해당 요소부터 시작하여 부모 요소를 따라 DOM 트리 최상단까지 차례대로 전파되는 현상

을 말합니다.

동작 방식
예를 들어, 안쪽 div를 클릭하면, 먼저 안쪽 div의 클릭 이벤트 핸들러가 동작하고, 그 다음 바깥쪽 div의 핸들러, 그리고 body, html, document 순서로 이벤트가 전파됩니다.
```
<div id="outer">
  바깥쪽
  <div id="inner">안쪽</div>
</div>
```
이벤트 위임 (Event Delegation)
이 버블링 특성을 이용하면 매우 효율적인 코드를 작성할 수 있습니다.
수많은 <li> 각각에 이벤트 리스너를 다는 대신, 그들의 부모인 <ul>에 단 하나의 리스너만 달아두고, 이벤트가 버블링되어 올라왔을 때 실제 이벤트가 발생한 대상(event.target)을 확인하여 처리하는 방식입니다.
이를
이벤트 위임
이라고 하며, 메모리 사용을 줄이고 동적으로 추가되는 요소에도 이벤트를 쉽게 적용할 수 있게 해줍니다.
전파 막기
만약 이벤트가 더 이상 전파되는 것을 원하지 않는다면, 이벤트 핸들러 안에서 event.stopPropagation() 메서드를 호출하여 버블링을 중단시킬 수 있습니다.

Closure, Hoisting, Event Bubbling

🚀

주요 면접 예상 질문 🔗

이 세 가지는 자바스크립트 개발자의 기본기를 확인하는 최고의 질문 소재입니다.

✅

1. 클로저란 무엇이며, 어떤 경우에 사용될 수 있나요? 🔗

개념과 함께 실용적인 활용 사례를 설명하는 것이 중요합니다.

클로저는 함수가 자신의 렉시컬 스코프를 기억하여, 외부에서 호출될 때도 내부 변수에 접근할 수 있는 함수입니다.
이를 통해
전역 변수의 사용을 줄이고 데이터를 은닉
하여, 외부로부터의 의도치 않은 변경을 막는
private
변수처럼 활용할 수 있습니다.
또한, 함수가 호출될 때마다 독립적인 상태를 유지하는
상태 저장 카운터나 모듈 패턴
등을 구현하는 데 사용될 수 있습니다.

✅

2. 호이스팅이란 무엇이며, `var`와 `let`의 호이스팅 동작 차이를 설명해주세요. 🔗

단순히 '끌어올린다'를 넘어, 초기화 과정의 차이를 설명해야 합니다.

호이스팅은 자바스크립트 엔진이 변수와 함수의 선언을 스코프 최상단으로 옮기는 것처럼 처리하는 동작을 말합니다.
var로 선언된 변수는 호이스팅되면서 undefined로 초기화되기 때문에, 선언문 이전에 접근해도 오류 없이 undefined를 반환합니다.
반면, let과 const는 선언만 호이스팅될 뿐 초기화되지 않아, 선언문 이전에 접근하면
일시적 사각지대(TDZ)
에 의해 참조 에러가 발생합니다.

🚀

결론 🔗

오늘은 자바스크립트의 깊은 곳에 숨어있는 세 가지 핵심 원리에 대해 알아보았습니다.

클로저
는 함수가
스코프를 기억
하는 능력으로, 상태 유지와 정보 은닉을 가능하게 합니다.
호이스팅
은
선언이 먼저 처리
되는 자바스크립트의 독특한 동작 방식으로, var와 let/const의 차이를 만듭니다.
이벤트 버블링
은 이벤트가
상위 요소로 전파
되는 현상으로, 효율적인 이벤트 위임 패턴의 기반이 됩니다.

✅

자바스크립트 클로저, 호이스팅, 버블링
A Complete Guide to JS Closures, Hoisting, and Bubbling

들어가기 전에 🔗

1. 클로저 (Closure): 기억하는 함수 🔗

2. 호이스팅 (Hoisting): 선언을 끌어올리다 🔗

3. 이벤트 버블링 (Event Bubbling): 거품처럼 올라오는 이벤트 🔗

주요 면접 예상 질문 🔗

1. 클로저란 무엇이며, 어떤 경우에 사용될 수 있나요? 🔗

2. 호이스팅이란 무엇이며, `var`와 `let`의 호이스팅 동작 차이를 설명해주세요. 🔗

결론 🔗

참고 🔗

추천 포스트

자바스크립트 클로저, 호이스팅, 버블링A Complete Guide to JS Closures, Hoisting, and Bubbling

들어가기 전에 🔗

1. 클로저 (Closure): 기억하는 함수 🔗

2. 호이스팅 (Hoisting): 선언을 끌어올리다 🔗

3. 이벤트 버블링 (Event Bubbling): 거품처럼 올라오는 이벤트 🔗

주요 면접 예상 질문 🔗

1. 클로저란 무엇이며, 어떤 경우에 사용될 수 있나요? 🔗

2. 호이스팅이란 무엇이며, var와 let의 호이스팅 동작 차이를 설명해주세요. 🔗

결론 🔗

참고 🔗

자바스크립트 클로저, 호이스팅, 버블링
A Complete Guide to JS Closures, Hoisting, and Bubbling

2. 호이스팅이란 무엇이며, `var`와 `let`의 호이스팅 동작 차이를 설명해주세요. 🔗