브라우저에서 검색창에 키워드를 입력하면 어떤 일이 일어날까? 검색 결과를 가져오기 위해 서버에 요청을 보내고, 응답을 받아 화면에 표시하는 동안에도 우리는 다른 탭을 열거나 스크롤을 내릴 수 있다. 하지만 자바스크립트는 싱글 스레드 언어다. 그렇다면 한 번에 하나의 작업만 처리할 수 있지 않을까? 이런 동작이 어떻게 가능한 걸까? 동기$_{synchronous}$ 처리는 은행 창구에서 한 명의 고객이 업무를 마쳐야 다음 고객의 업무를 처리하는 것처럼 한 작업이 끝나야만 다음 작업을 시작하는 방식이다. 반면 비동기$_{asynchronous}$ 처리는 카페에서 주문을 받은 후 에스프레소 샷이 내려오는 동안 다음 손님의 주문을 받을 수 있는 것처럼 이전 작업이 끝나기를 기다리지 않고 다음 작업을 실행할 수 ..

자바스크립트의 스코프는 변수의 유효한 범위를 의미한다. var로 선언한 변수는 오직 함수의 중괄호 내부만을 유효 범위로 인정하는데, 이를 함수 레벨 스코프$_{function \space level \space scope}$라 한다. 반면 C나 자바 등 대부분의 프로그래밍 언어는 모든 중괄호(함수, if문, for문, while문 등) 내부를 유효 범위로 인정한다. 이러한 특성을 블록 레벨 스코프$_{block \space level \space scope}$라 한다. var x = 1;if (true) { var x = 10; console.log("if문 안쪽:", x);}console.log("if문 바깥쪽:", x);위 예제를 보면 if문 내부와 외부에서 선언된 x가 같은 변수를 가리킨다. v..

들어가며자바스크립트에서 스코프 체인은 변수와 함수의 유효 범위를 결정한다. 이 글에서는 스코프 체인이 무엇이고 어떻게 동작하는지를 이해해보려 한다. 스코프 체인에서 변수를 찾는 과정은 단방향으로 이루어진다. 자바스크립트 엔진은 현재 스코프에서 시작해 상위로 올라가면서 변수를 찾아간다. 결과적으로 스코프가 변수와 함수의 접근성을 단순하고 일관된 규칙으로 관리하는 것을 이해할 수 있을 것이다.  스코프 체인함수는 전역이나 다른 함수 내부에서 정의할 수 있다. 함수 내부에 다른 함수를 정의하는 것을 함수의 중첩이라 하며, 이때 내부에 정의된 함수를 중첩 함수$_{nested \space function}$, 이를 감싸는 함수를 외부 함수$_{outer \space function}$라 한다. 함수가 중첩되면 ..

개요최근 자바스크립트의 실행 컨텍스트와 클로저를 공부하면서 더 기본이 되는 개념을 먼저 정리해야 할 필요성을 느꼈다. 실행 컨텍스트와 클로저는 자바스크립트의 동작 원리를 이해하는 데 중요한 개념이지만, 이 것들을 제대로 이해하기 위해서는 그 토대가 되는 스코프에 대한 이해가 선행되어야 함을 느꼈다. 이번 글에서는 스코프의 기본 개념을 정리하고, 이를 바탕으로 다음 글에서 실행 컨텍스트와 클로저로 확장해나갈 예정이다.  스코프란스코프는 모든 프로그래밍 언어의 기본 개념 중 하나다. 특히 자바스크립트는 다른 언어와 구별되는 스코프 특징이 있어 이해가 더욱 중요하다. 아래에서 자세히 설명하겠지만, var와 let/const 키워드로 선언한 변수의 스코프가 서로 다르게 동작한다. 스코프는 식별자(변수명, 함수명..

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됨 Apple Banana Orange ul 요소의 두 번째 자식 요소인 li 요소를 클릭하면 클릭 이벤트생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파됨  클릭하세요   과정이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3단계로 구분됨캡처링 단계이벤트가 DOM 트리 최상위 요소에서 시작해 타겟 요소를 향해 내려감window -> document -> html -> body -> grandparent -> parent -> child캡처링 단계의 이벤트를 캐치하려면 addEventList..

이벤트 핸들러$_{event \space handler, \space event \space listener}$는 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수이벤트가 발생하면 브라우저에 의해 호출될 함수가 이벤트 핸들러이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 함 인라인 이벤트 핸들러HTML 요소에 직접 onclick등의 속성으로 지정간단하지만 HTML과 Javascript 코드가 섞여 유지보수가 어려울 수 있음관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋음 function handleClick() {console.log('인라인 이벤트; 버튼 클릭됨');}모던 자바스크립트에서는 이 방식을 사용하는 경우가 있음CBD 방식의 Angular /..

const 키워드는 상수$_{constant}$를 선언하기 위해 사용한다. 그러나 반드시 상수만을 위해 사용되지는 않는다. const 키워드의 특징은 let 키워드와 대부분 동일하지만, 몇 가지 중요한 차이점이 있다.  const선언과 초기화const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다. 그렇지 않으면 다음과 같이 문법 에러가 발생한다.const foo; // SyntaxError: Missing initializer in const declarationconst bar = 10;console.log(bar); // 10위 예제에서 foo 변수는 초기화 없이 선언되었기 때문에 문법 에러가 발생한다. 반면 bar 변수는 선언과 동시에 초기화되었으므로 정상적으로 동작한다.  블록 레..