ORANGEE

## 자바스크립트의 이벤트 루프란?자바스크립트는 싱글 스레드(single-thread) 언어다. 즉, 한 번에 하나의 작업만 처리할 수 있다. 하지만 setTimeout, Promise, fetch 같은 비동기 작업도 잘 처리하는데, 그 비밀은 바로 이벤트 루프(Event Loop)에 있다.1️⃣ 콜 스택(Call Stack)자바스크립트는 모든 실행 코드를 콜 스택이라는 자료구조에 쌓아 실행한다.function hello() { console.log("Hello");}function greeting() { hello();}greeting();이 코드는 다음 순서로 콜 스택에 쌓였다가 빠진다:greeting() 호출 → 스택에 추가hello() 호출 → 스택에 추가console.log() 실행 → 출력..

## 자바스크립트의 호이스팅이란?JavaScript에서 호이스팅(Hoisting)은 변수나 함수 선언이 코드 실행 전에 해당 범위의 최상단으로 끌어올려지는 동작을 의미한다. 하지만 모든 선언이 동일하게 동작하는 것은 아니다.🔍 호이스팅 기본 개념JavaScript는 실행 전에 변수 선언(var, let, const)과 함수 선언을 메모리에 등록함이로 인해 선언 전에 참조해도 에러가 발생하지 않거나, 의외의 결과가 나올 수 있음console.log(a); // undefinedvar a = 10;위 코드는 다음과 같이 동작함:var a; // 선언이 먼저 끌어올려짐console.log(a); // undefineda = 10;📌 var, let, const의 차이점✅ var는 선언만 ..

## var, let, const의 차이를 알아보자JavaScript에서 변수를 선언할 수 있는 방법은 var, let, const 세 가지가 있다. 각각의 키워드는 스코프(Scope), 재할당 여부, 호이스팅(Hoisting) 등에서 차이를 보인다. 이 글에서는 각 키워드의 특징과 실제 예제를 통해 언제 어떤 키워드를 사용하는 것이 좋은지 정리해본다.1️⃣ varES5까지 사용되던 방식함수 스코프(function scope)를 가짐중복 선언 가능재할당 가능var a = 10;var a = 20; // 가능console.log(a); // 20var는 현재는 되도록 사용하지 않는 것이 좋다. 이유는 스코프가 함수 단위로 제한되어 있어 의도치 않은 변수 오염이나 중복 선언으로 인해 예기치 못한 버그가 발생..

## undefined vs null - 무엇이 다르냐?📌 객념 정리`undefined`는 변수는 선언되었지만 아직 값이 할당되지 않은 상황을 의미함. `null`은 변수에 명시적으로 '없음' 또는 '비어 있음'을 의미할 때 사용함.🔍 차이점 정리 구분 undefined null 정의 값이 할당되지 않음 값이 비어 있음(null) 타입 undefined object 사용 목적 처리하지 않은 변수 명시적으로 비길 값 할당 🧪 예제 코드let a;console.log(a); // undefinedlet b = null;console.log(b); // nulltypeof undefined // "undefine..

자바스크립트의 심장, 이벤트 루프🔄 이벤트 루프란?자바스크립트는 싱글 스레드 언어입니다. 동시에 여러 작업을 처리하는 게 아닌, **한 번에 하나의 작업만 수행**합니다. 하지만 비동기 처리(예: setTimeout, fetch)는 어떻게 가능한 걸까요? 바로 **이벤트 루프(Event Loop)** 덕분입니다.📦 콜 스택과 태스크 큐// 동기 작업: 콜 스택(Stack)에서 실행// 비동기 작업: Web API → 태스크 큐(Queue)로 대기- **콜 스택(Call Stack)**: 실행 중인 함수들이 쌓이는 구조. - **Web API**: 브라우저가 제공하는 비동기 처리 영역 (setTimeout, DOM 이벤트 등) - **태스크 큐(Task Queue)**: 비동기 콜백들이 대기하는 곳..

이벤트는 어떻게 흐를까?🧭 이벤트 흐름의 세 단계자바스크립트에서 이벤트는 아래와 같은 순서로 흐릅니다:캡처링 단계: 최상위 요소(document)부터 이벤트 대상 요소까지 내려감타깃 단계: 실제 이벤트가 발생한 요소버블링 단계: 이벤트가 상위 요소로 다시 올라감🔍 addEventListener의 세 번째 인자기본적으로 이벤트는 버블링 단계에서만 처리되지만, `addEventListener`의 세 번째 인자에 `true`를 주면 **캡처링 단계**에서 이벤트를 처리할 수 있습니다.// 캡처링 단계에서 이벤트 등록parent.addEventListener("click", handler, true);// 버블링 단계에서 이벤트 등록 (기본값)child.addEventListener("click", hand..

const, let, var... 도대체 뭐가 다른 걸까?🧩 한눈에 보는 차이표 키워드 재할당 가능? 재선언 가능? 스코프 호이스팅 const ❌ 불가능 ❌ 불가능 블록 스코프 호이스팅은 되지만 초기화 전 사용 불가 let ✅ 가능 ❌ 불가능 블록 스코프 호이스팅은 되지만 초기화 전 사용 불가 var ✅ 가능 ✅ 가능 함수 스코프 호이스팅되며, 초기화 전에도 undefined로 접근 가능 📌 간단 예제// constconst a = 10;a = 20; // ❌ TypeError: Assignment to constant variable// letlet b = 10;b ..