Dachae's DevLogs

Hash 자바스크립트로 알고리즘 문제를 풀다 보면 Object, Map, Set과 같은 해시 기반 자료구조를 자주 만나게 됩니다. 이들은 모두 내부적으로 해시 테이블(Hash Table) 구조를 기반으로 하며, 빠른 탐색, 삽입, 삭제(O(1)) 성능 덕분에 다양한 문제 해결에 활용됩니다.이 글에서는 자바스크립트에서 자주 쓰이는 세 가지 해시 구조(해시오브젝트(Object), 해시맵(Map), 해시셋(Set))의 개념과 차이점, 사용법, 그리고 알고리즘 문제 적용 예제를 함께 정리해보겠습니다. 1. 해시 구조란? 해시 테이블(Hash Table)은 데이터를 키(key)를 해시 함수로 변환하여 특정 위치에 저장하는 자료구조입니다. 이 방식 덕분에 특정 데이터를 매우 빠르게 찾을 수 있습니다.자바스크립트에..

TDZ(Temporal Dead Zone) 자바스크립트에서 let이나 const로 변수를 선언했는데, 예상치 못한 ReferenceError가 발생한 경험, 있으신가요? “분명 선언했는데 왜 안 되지?”라는 의문을 불러일으키는 이 상황의 핵심엔 바로 TDZ(Temporal Dead Zone)라는 개념이 숨어 있습니다.이 글에서는 TDZ가 무엇인지, 어떻게 생기는지, 그리고 왜 var에는 없고 let/const에만 생기는지를 간단한 예제와 함께 정리해봅니다. 1. TDZ(Temporal Dead Zone)란?TDZ(Temporal Dead Zone)는 자바스크립트에서 변수가 선언되었지만 초기화되지 않은 시점부터, 초기화가 완료되기 전까지의 영역을 의미합니다. 즉, let이나 const로 선언된 변수는 ..

일반 함수와 화살표 함수 ES6(ECMAScript 2015)부터 도입된 화살표 함수(Arrow Function)는 기존의 일반 함수(Function Declaration/Expression)보다 짧은 문법과 특정 컨텍스트 처리의 단순화를 위해 고안되었습니다. 하지만, 문법이 간결하다고 해서 항상 화살표 함수를 쓰는 것이 최선은 아닙니다.이 글에서는 화살표 함수와 일반 함수의 동작 방식 차이, 사용 시 주의할 점, 예제 코드 비교를 통해 언제 어떤 함수를 써야 하는지 설명합니다. 1. 문법 차이항목일반 함수화살표 함수기본 형태function add(a, b) { return a + b; }const add = (a, b) => a + b;return 생략 가능 여부불가능가능 (단일 표현식인 경우)fun..

스코프(Scope) JavaScript에서 스코프(Scope)란 변수에 접근할 수 있는 범위를 말합니다. 코드를 짤 때 어떤 변수가 어디서 유효한지를 알아야 오류 없이 원하는 동작을 구현할 수 있죠. 이번 글에서는 함수, 블록, 전역 스코프 등 다양한 스코프의 개념과 var, let, const의 스코프 차이까지 예제 중심으로 정리합니다. 1. 스코프란? 스코프(Scope)는 변수에 접근할 수 있는 유효 범위를 의미합니다. 즉, "이 변수는 어디서부터 어디까지 쓸 수 있을까?"를 결정하는 규칙입니다. 2. 스코프의 종류a. 전역 스코프(Global Scope)코드 어디서든 접근 가능한 변수입니다.전역 객체(window, global)에 속합니다.var globalVar = "hello";functi..

실행 컨텍스트(Execution Context) JavaScript는 인터프리터 언어임에도 코드 실행 전 많은 준비 과정을 거칩니다. 그 핵심에는 실행 컨텍스트(Execution Context)가 있습니다. 이 글에서는 실행 컨텍스트가 무엇이고, 어떤 순서로 코드가 실행되는지, 그리고 호이스팅, 스코프, 클로저와 어떤 관계가 있는지를 명확하게 정리합니다. 1. 실행 컨텍스트란?실행 컨텍스트는 코드가 실행되는 환경(Context)을 정의하는 추상적인 개념입니다. JavaScript는 코드를 실행하기 전에 다음과 같은 준비를 합니다.어떤 변수들이 존재하는가?어떤 함수들이 선언되어 있는가?현재 어떤 객체(this)를 참조해야 하는가?이 모든 것을 관리하는 단위가 실행 컨텍스트입니다. 2. 실행 컨텍스트의 ..

호이스팅(Hoisting) JavaScript에서 var, let, const로 선언한 변수를 실행 전에 사용할 수 있을까? 결론부터 말하면,어느 정도는 가능하지만 조건이 있습니다. 이 글에서는 JavaScript의 호이스팅(Hoisting) 개념을 정리하고, 키워드별 차이점과 흔한 오류까지 실제 예제를 중심으로 설명합니다. 1. 호이스팅이란? 호이스팅(Hoisting)이란, JavaScript에서 변수, 함수 선언이 코드 실행 전에 메모리에 끌어올려지는 현상을 말합니다. 즉, 코드 순서상 나중에 등장하는 선언도, 실행 컨텍스트 생성 시점에서 이미 등록되어 있음을 의미합니다.예제console.log(x); // undefinedvar x = 5;실행되기 전에 var x; 선언이 끌어올려집니다.x = 5..

var, let, const - JavaScript 변수 선언 JavaScript에서 변수를 선언할 때 var, let, const 중 무엇을 써야 할지 헷갈리시나요? 이 세 가지는 비슷해 보이지만 스코프, 재할당, 호이스팅 등에서 중요한 차이를 가지고 있습니다. 1. var, let, const 비교표구분varletconst스코프함수 스코프블록 스코프블록 스코프재선언✅ 가능❌ 오류❌ 오류재할당✅ 가능✅ 가능❌ 불가능호이스팅✅ 됨 (초기화 안 됨)✅ 됨 (초기화 안 됨, TDZ 존재)✅ 됨 (초기화 안 됨, TDZ 존재)주 사용 시기과거 코드 유지보수용일반 변수 선언상수나 객체 참조 고정a. var (과거의 변수 선언 방식)function test() { if (true) { var x = 1..

이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing) 웹 페이지에서 클릭 이벤트를 처리할 때, 이벤트가 의도한 대로 작동하지 않아서 당황한 적 있으신가요? 이벤트 버블링과 캡처링은 DOM 트리 구조를 따라 이벤트가 전파되는 방식입니다. 이를 제대로 이해하면 이벤트 위임, 중첩 요소 처리, 성능 최적화 등 다양한 상황에서 스마트하게 코드를 작성할 수 있습니다. 1. 이벤트 흐름이란?브라우저는 DOM 요소에 이벤트가 발생하면 세 가지 단계로 이벤트를 처리합니다.캡처링 단계 (Capturing Phase)이벤트가 최상위 요소(document)에서 시작하여 이벤트가 발생한 실제 요소(target)까지 내려옵니다.타깃 단계 (Target Phase)이벤트가 실제로 발생한 요소..

클로저(Closure) 클로저(Closure)는 자바스크립트에서 자주 등장하지만, 처음 접하면 다소 추상적으로 느껴지는 개념입니다. 하지만 클로저를 이해하면 상태를 은닉하거나, 콜백 함수 내 변수 유지, 팩토리 함수 생성 등 다양한 실무 패턴을 더 깊이 있게 이해할 수 있습니다. 1. 클로저란?클로저란, 함수가 선언될 당시의 렉시컬 환경을 기억하는 함수입니다. 즉, 외부 함수의 변수에 접근할 수 있는 내부 함수를 말합니다. 함수가 이미 실행을 끝냈더라도, 그 내부 함수는 여전히 외부 변수에 접근할 수 있습니다.function outer() { const name = 'JavaScript'; function inner() { console.log(`Hello, ${name}`); } retu..

이벤트 리스너(Event Listener) 사용자의 클릭, 키보드 입력, 마우스 움직임 등 다양한 행동은 어떻게 코드와 연결될까요? 이때 등장하는 개념이 바로 이벤트 리스너(Event Listener)입니다. 이벤트 리스너는 말 그대로 어떤 이벤트가 발생했을 때 그에 반응하는 청취자 역할을 합니다. 이 글에서는 이벤트 리스너의 기본 개념부터 사용법, 실전 예제까지 차근히 살펴보며, 사용자와 코드 사이를 잇는 연결고리로서의 역할을 이해해봅시다. 1. 이벤트 리스너란?이벤트 리스너는 특정 이벤트가 발생했을 때 실행할 동작을 정의하는 함수를 등록하는 방법입니다. 쉽게 말해, 이벤트 리스너는 웹 페이지의 특정 요소에 귀를 기울이고 있다가, 사용자가 무언가를 하면 미리 정해진 동작을 수행하게 합니다.핵심 개념 ..

콜백 함수 (Callback Function) JavaScript를 배우다 보면 가장 많이 듣게 되는 단어 중 하나가 바로 콜백 함수(Callback Function)입니다. 처음에는 다소 헷갈릴 수 있지만, 콜백을 이해하면 비동기 처리, 고차 함수, 이벤트 핸들링 등 다양한 개념이 더 쉽게 이해됩니다. 1. 콜백 함수란?콜백 함수란 다른 함수에 인자로 전달되어, 나중에 실행되는 함수를 의미합니다.“A 함수 안에서 B 함수를 실행할 거야. 근데 언제 실행할지는 A가 결정해!”즉, 실행을 위임한 함수라고 생각하시면 됩니다.콜백 함수 예제function greet(name, callback) { console.log(`Hello, ${name}`); callback();}function sayBye()..

async와 await JavaScript에서 서버 요청이나 파일 읽기처럼 시간이 걸리는 작업은 비동기(async)로 처리됩니다. 과거에는 콜백(callback)을, 그 이후엔 Promise를 사용했지만, 지금은 async/await이 비동기 처리의 표준 문법입니다. 1. async/await란?async/await는 Promise를 더 간결하고 가독성 좋게 사용하는 문법입니다. 마치 동기(synchronous) 코드처럼 작성할 수 있어서 복잡한 .then() 체인을 피할 수 있습니다. 2. 기본 문법a. async 키워드어떤 함수 앞에 async를 붙이면, 그 함수는 항상 Promise를 반환합니다.async function greet() { return 'Hello!';}greet().then..

Promise 웹 개발에서 사용자 경험(UX)을 향상시키기 위해 필수적으로 사용되는 기법 중 하나가 비동기 프로그래밍입니다. 웹 애플리케이션은 종종 서버에 데이터를 요청하거나, 외부 API와 통신하거나, 일정 시간이 걸리는 작업을 수행해야 합니다. 이런 작업을 처리할 때 전체 애플리케이션의 흐름이 멈추지 않도록 하기 위해 비동기 처리 방식을 사용하게 되며, 그 핵심에 바로 Promise 객체가 존재합니다.Promise는 자바스크립트에서 비동기 작업의 완료 여부와 결과를 나타내는 객체로, 콜백 함수의 단점을 보완하며 코드의 가독성과 유지 보수성을 크게 향상시켜줍니다. 비동기 처리의 흐름을 더 명확하게 만들기 때문에, then, catch, finally 같은 메서드를 통해 체계적으로 결과를 처리할 수 있습..

이벤트 루프(Event Loop) JavaScript는 싱글 스레드 언어입니다. 즉, 한 번에 한 작업만 처리할 수 있는 구조인데, 왜 우리는 setTimeout, fetch, Promise 같은 비동기 작업을 동시에 처리할 수 있을까요? 그 비밀은 바로 이벤트 루프(Event Loop)입니다. 1. 싱글 스레드란?JavaScript는 하나의 Call Stack(호출 스택)에서 코드가 실행됩니다. 이 말은 곧, 모든 작업이 순서대로 하나씩 실행된다는 뜻이죠.console.log('A');console.log('B');console.log('C');ABC그런데 왜 setTimeout은 뒤늦게 실행될까?console.log('Start');setTimeout(() => { console.log('Timeo..