개발

    [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를 설정한 경우 ..

    [JavaScript] addEventListener과 onclick의 차이

    JavaScript를 이용해 HTML 요소에 click 이벤트를 등록하는 경우를 생각해보자. HTML 요소를 찾은 뒤 addEventListener를 이용하는 방법이 있고 HTML 요소에 직접 onclick을 이용하는 방법이 있다. 두 방법 다 특정 이벤트가 발생하면 정해진 함수를 실행하도록 할 수 있다. 겉보기에 같은 기능을 하는 두 방법이 왜 별도로 존재하는 것일까? 1. 표현 방식 비교 click click (위의 두 코드의 실행 결과는 같다) 2. 차이점 위애서 handleClick 함수는 콜백함수이다. 이벤트가 발생되었을 때 실행되는 함수라고 생각하면 된다. 2-1. 여러개의 콜백 onclick에서는 여러개의 콜백함수를 지정할 수 없다. 가장 마지막에 등록된 콜백함수만 실행될 것이다. 반대로, ..