falsy value Javascript에서 Boolean 문맥(if 문)에서 boolean이 아닌 다른 타입의 값을 false로 사용할 수 있는 값이다! 아래 표에 나온 값들 이외에는 모두 truty value이다! [](빈 array), {}(빈 object), "false"(문자열 false), "0"(문자열 0)등은 truty value! 헷갈리지말자 이 값들은 동등 비교 연산자를 사용할 때 falsy value false boolean false 0 숫자 0 -0 negative zero 0n bingint zero "". '', `` empty string null undefined NaN Not A Number 아래 코드를 보면 쉽게 이해된다! !! 모르는 사람은 없겠지? console.lo..

debounce? debounce란 연속되는 함수의 호출(이벤트 리스너) 흐름 속에서 마지막 함수 호출(or 처음)만 일어나게 하는 것이다! throttle? throttle이란 일정한 주기마다 함수(이벤트 리스너)를 한번만 실행시키는 것이다 debounce와 throttle이 없을 때 debouce와 throttle 없이 평소처럼 input, resize, scroll 같이 이벤트 핸들러가 굉장히 짧은 주기로 실행되는 이벤트를 사용하면 저하를 불러올 수 있다! 예를 들어, 어떠한 요소의 input/scroll/resize 이벤트의 이벤트 핸들러를 통해 가장 마지막 시점의 정보만 필요하다면 그 이전의 정보는 모두 필요 없게 되고 이러한 경우 debounce를 사용하면 쉽게 맨 마지막 시점의 정보만 얻을 ..

이벤트 버블링 (Event Bubbling) 어떠한 특정 요소에서 이벤트가 발생하면 이 요소에 할당된 이벤트가 실행되고 가장 먼 조상까지 해당 이벤트가 전파되는 특성이다. 예를 HTML 마크업이 a > div > span와 같고 a, div, span을 모두 클릭 시 alert가 나타나는 이벤트를 가지고 있다하면 span 태그를 클릭하면 span < div < a 순으로 이벤트가 전파된다. 아래 예시를 통해 좀 더 살펴보자! a b c 제일 하위 태그의 이벤트를 발생시키면 가장 먼 조상까지 이벤트가 전파된다. 이벤트 캡쳐 - Event Capture 이벤트 버블링과 반대로 어떠한 특정 요소에서 이벤트 발생하면 이 요소에 할당된 이벤트가 실행되고 가장 먼 자손 까지 해당 이벤트가 전파되는 특성이다. 예를 ..

렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는 지가 아니라 함수를 어디에 정의 했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. 클로져에 대해 알려면 렉시컬 스코프에 대해 꼭 알아야 한다! 아래 코드를 보면 foo()를 실행하면 bar()가 실행되어서 10이 나올 것 같지만 실제 bar가 선언되었을 당시의 x인 1을 가리키게 되어 1을 출력합니다! 이런 예시처럼 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디서 선언하였는지 결정됩니다!! var x = 1; function foo() { var x = 10; bar(); } function bar() { console.log(x); } foo(); // 1 bar(); // 1 클로져 자바스크립트 고유 개..