이벤트 버블링(Event Bubbling), 이벤트 캡쳐(Event Capture), 이벤트 위임(Event Delegation) JavaScript 이벤트 버블링(Event Bubbling)이란 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성 HTML의 트리 구조를 이해하고 이벤트 버블링의 예시를 보는 것이 좋다. //HTML의 트리 구조 var divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener('click', logEvent); }); function logEvent(event) { console.log(event.curr..
호이스팅(Hoisting) 호이스팅이란? > 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 쉽게 설명하자면 자바스크립트 엔진이 함수가 실행되기 전에 코드 안에 있는 변수들을 범위의 최상단으로 끌어올려지는 것 같은 현상 왜 이런 현상이 발생하는가? > var의 문제점으로 인해 발생한다. 더보기 var의 문제점 같은 이름의 변수 중복 선언이 가능 지역변수와 전역변수의 개념이 확실하지 않음 함수만 제외하고 다 전역변수로 사용함 var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 예제 1과 같이 JavaScript는 함수의 코드를 실행하기 전에 함수 선언에 대한 ..
스코프(Scope) (Feat. var의 문제점) 스코프란? 스코프는 변수 선언 시 그 변수가 어디까지 유효한지의 범위에 대한 개념이다. 크게 두 종류의 스코프로 나눠지고 지역 변수는 두 가지로 나눠진다. 전역 변수(Global Scope) 지역 변수(Local Scope) - 블록스코프(Block Scope), 함수 스코프(Function Scope) 지역변수 let,const로 변수 지정 시에는 그 블록이나 펑션 밖에서는 호출이 불가하다. var의 문제점(블록스코프 안에서 선언된 함수가 밖에서도 20으로 표시된다) let으로 해결가능하고 지역변수로서 사용되는 모습 function scope 블록이나 함수에서는 전역변수를 사용 가능하지만 지역변수는 전역 변수에서 호출할 수 없다.