튜이의 블로그 튜이의 블로그

지난 글 [JavaScript] 동작 원리 ② – 이벤트 루프와 Queue 이해하기에 이어지는 이벤트 루프에 의해 비동기 콜백들이 큐에 쌓이고 콜 스택이 비면 실행된다는 개념을 정리했다.그럼 실제로 DOM 이벤트, AJAX 같은 비동기 함수들은 대체 어디로 실행되는 걸까?이건 자바스크립트가 직접 처리하는 걸까?👉 아니다 이것은 WebAPI에 의해 처리된다.이번 글에서는 바로 이 WebAPI와 비동기 처리 흐름에 대해 정리해보려고 한다. # Web APIWeb API는 자바스크립트가 비동기 작업을 위임하는 브라우저나 Node.js의 실행 영역 JavaScript자체에는 Dom 이벤트 처리, setTimeout, AJAX기능이 없다.따라서 브라우저(또는 Node.js)가 제공하는 기능을 JS가 빌려 쓰는 ..

프론트엔드 개발을 하다 보면 자연스럽게 듣게 되는 말들이 있다."호이스팅", "콜 스택", "TDZ", 그리고 "실행 컨텍스트".처음 들으면 뭔가 복잡하고 어려워 보이지만, 이건 결국 자바스크립트가 코드를 어떻게 읽고 실행하는지에 대한 이야기다.오늘은 그중에서도 가장 기초가 되는 실행 컨텍스트와 콜 스택에 대해 정리해본다.# 실행 컨텍스트란?실행할 코드와 관련된 정보를 담고 있는 실행 환경이다.자바스크립트는 코드를 실행하기 전, 먼저 해당 코드를 위한 실행 컨텍스트(Context)를 만든다.이 안에는 아래와 같은 정보들이 담긴다어떤 변수들이 있는지어떤 함수가 정의되어 있는지현재 this는 뭔지어떤 스코프에 있는지이런 정보들이 있어야 자바스크립트가 코드를 실행할 수 있다. 예를들어function sayH..

1. var, let, const 차이🔸 var: variable(변동이 심한, 가변적인)의 약자, ES6 이전에 사용되던 변수 선언 방식이고 요즘은 잘 안 쓴다. 특별한 경우가 아니면 안 쓰는걸 추천.function scope나 global scope에서 변수 선언이 이루어진다.함수 내부에서 var로 선언된 변수는 해당 함수 내에서만 유효하며, 함수 외부에서는 전역 변수로 간주된다.var x = 1;if (x === 1) { var x = 2; console.log(x); // Expected output: 2}console.log(x);// Expected output: 2결과: x는 if문 안에서 재할당되며, 블록 밖에서 x가 변경된 모습을 볼 수 있음. 이는 var가 블록 스코프를 무시하고..