하나씩 배워나가는 개발일지

클로저를 배우기 전에 스코프에 대한 개념부터 알아야 한다. Scope스코프는 사전적 의미로 ‘범위’를 뜻한다.JavaScript로 함수 작성 시, 중괄호 {}를 이용하여 함수의 범위를 작성한다.즉 여기서 말하는 스코프는 ‘코드가 영향을 미치는 범위’, ‘변수의 유효 범위’ 등으로 정의할 수 있다. 1. 스코프의 개념선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미한다. 만약, 변수가 해당 스코프에 존재하지 않다면 사용할 수 없다.계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만, 상위 스코프는 하위 스코프에 접근할 수 없다. 2. 스코프의 동작에 따른 구분스코프의 동작 별 구분은 스코프를 결정하는 방식에 따라서, 정적 스코프(혹은 렉시컬 스코프), 동적 스코프로 나뉜다..

이벤트 버블링(Event Bubbling)이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다.즉, 한 요소에 이벤트가 발생되면 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파방식 버블링 예제 코드를 보자. DIV1 DIV2 DIV3 const divs = document.querySelectorAll("div");const clickEvent = (e) => { console.log(e.currentTarget.className);};divs.forEach((div) => {..

var & letJavaScript는 es6 문법 도입 이전까지 var 키워드만을 이용하여 변수를 선언했다. 그렇기 때문에 코드 실행 중 예기치 못한 문제들이 자주 발생하게 되었다. 예를 들면 다음과 같은 문제들이다.var a = "a"console.log(a) // "a"var a = "b"console.log(a) // "b" 같은 변수에 다른 값을 두 번 할당하였는데도 에러가 나지 않고 멀쩡히 다른 값이 출력되는 것을 볼 수 있다.var는 변수의 재선언, 재할당 모두가 가능하기 때문에 유연한 변수 선언 면에서는 장점일 수 있으나, 코드양이 많아질수록 유지 관리가 힘들며 에러를 찾기도 힘들어진다.또한 var는 Hoisting과도 연관이 있다. 호이스팅이란?인터프리터가 변수와 함수의 메모리 공간을 선언..