개발/JavaScript

[JavaScript] 커링(Currying)

아래 코드를 보자. function something(arg1: any, arg2: any) { // do something } function somethingWithIndex(index: number, arg1: any, arg2: any) { // do something with index } 두 함수가 하는 역할이 같다고 가정해보자. something 함수는 "어떤 것"을 하는 함수이며 somethingWithIndex 함수는 "특정 인덱스에 있는 요소에 대해 어떤 것"을 하는 함수라고 보면 된다. 위의 상황에서 something과 somethingWithIndex의 차이는 단순히 index를 받는지에 관한 차이점만 있을 것이다. 이러한 경우 기존의 something 함수를 재사용 하기 위해서는 ..

[JavaScript] 클로저

JavaScript에는 클로저라는 개념이 있다. 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있으며 이러한 중첩 함수를 클로저라 부른다. 아래 예시를 보자. const x = 10; function fn1() { const x = 20; const fn2 = function () { console.log(x); }; return fn2; } const closure = fn1(); closure(); // 20 fn1 함수가 호출되며 fn2를 반환하고 생명주기가 마감된다. 생명주기가 마감되면서 fn1 함수의 실행 컨텍스트가 제거되었고 변수 또한 생명주기가 마감된다. 변수에 접근할 수 없는 상태인데 실행 결과가 20인 이유는 무엇일까..

[JavaScript] querySelectorAll VS getElementsByClassName

위와 같은 코드가 있다. 두 방식 중 어떤 것을 사용해도 div 태그 다섯 개를 찾아올 수 있다. 두 방식의 차이점은 무엇일까? 1. querySelectorAll querySelectorAll은 선택자에 일치하는 모든 요소를 반환한다. 이 때 반환하는 타입은 NodeList다. NodeList는 노드의 컬렉션이라 한다. NodeList는 Array는 아니지만 forEach 등의 문법을 사용할 수 있다. 또한, Array.from을 사용하여 Array로 변환할 수 있다. 하지만, NodeList는 정적 콜렉션이다. 이는 DOM을 변경해도 콜렉션 내용에는 영향을 주지 않는다는 뜻이다. 따라서, 항목을 순회하거나 리스트의 길이를 캐시할 때 도움이 된다. 2. getElementsByClassName getE..

[JavaScript] 이벤트 버블링과 캡처링

click 위와 같은 코드의 실행 결과는 어떻게 될까? 버튼을 클릭했을 때 버튼 클릭에 대한 콜백함수가 실행되고 button clicked만 출력되어야 할 것 같다. 하지만, 결과는 아래와 같이 div의 클릭 이벤트도 함꼐 실행된다. 1. 버블링과 캡처링 버블링은 이름에서 알 수 있듯이 이벤트가 버블(거품)처럼 위로 올라가는 성질이다. 위의 예시에서 button을 클릭하면 클릭 이벤트가 발생하여 button clicked가 출력된다. 이후, 클릭 이벤트는 버블링을 통해 상위 요소로 이동하며 div의 클릭 이벤트도 실행되어 div clicked가 실행된다. 캡처링은 이와 반대로 상위 요소의 이벤트가 하위 요소로 전달되는 것을 의미한다. addEventListener의 세번째 인자로 true를 설정한 경우 ..