썸네일 이터레이션 프로토콜: 자바스크립트의 순회 규칙 이터레이션 프로토콜: 자바스크립트의 순회 규칙자바스크립트의 for...of 루프, 스프레드 문법, 구조 분해 할당 등은 모두 이터레이션 프로토콜이라는 규칙을 따릅니다.이 규칙을 이해하면 자바스크립트의 많은 것이 명확해집니다. 🔍 이터레이션 프로토콜이란?이터레이션 프로토콜은 순회 가능한 객체를 정의하는 규칙입니다.자바스크립트는 이 규칙을 따르는 객체들을 특별하게 다룹니다:for...of 루프로 순회 가능스프레드 문법(...) 사용 가능구조 분해 할당 가능이터레이션 프로토콜은 두 가지로 나뉩니다:이터러블 프로토콜 (Iterable Protocol)이터레이터 프로토콜 (Iterator Protocol) 📚 1단계: 이터러블 프로토콜이터러블 프로토콜이란?Symbol.iterator 메서드를 가진 객체가 ..
썸네일 배열 변환 메서드 완벽 가이드: slice, Array.from, 스프레드 문법 배열 변환 메서드 완벽 가이드: slice, Array.from, 스프레드 문법📌 먼저 알아야 할 것: 이터러블과 유사배열객체이터러블(Iterable)이란?Symbol.iterator 메서드를 가진 객체입니다. 이 메서드는 순회 가능한 이터레이터를 반환합니다.이터러블인 객체들// ✅ 배열const arr = [1, 2, 3];// ✅ 문자열const str = "hello";// ✅ Mapconst map = new Map([['a', 1], ['b', 2]]);// ✅ Setconst set = new Set([1, 2, 3]);// ✅ Symbol.iterator가 있으면 이터러블const customIterable = { [Symbol.iterator]() { return { ne..
썸네일 JavaScript의 Sort 알고리즘 변화: QuickSort → TimSort JavaScript의 Sort 알고리즘 변화: QuickSort → TimSort📌 간단히 말하면JavaScript의 `Array.sort()`가 사용하는 **정렬 알고리즘이 변경**되었습니다.- **ES10 이전**: QuickSort (빠르지만 불안정할 수 있음)- **ES10 이후**: TimSort (안정적이고 현실적으로 더 빠름)---🔄 QuickSort vs TimSortQuickSort (과거)장점: 평균적으로 매우 빠름 O(n log n)단점: - 최악의 경우 O(n²) 성능 저하 - 같은 값의 순서가 바뀔 수 있음 (불안정)**예시**: [3, 1, 3, 2] 정렬 후 첫 번째 3과 두 번째 3의 순서가 뒤바뀔 수 있음 TimSort (현재)장점: - 최악의 경우에도 O(n l..
썸네일 클로저(Closure) 완벽 이해하기 클로저(Closure) 완벽 이해하기외부환경참조는 어떻게 설정될까?함수가 중첩되어 있을 때, 내부함수가 외부함수의 스코프를 참조하는 과정을 단계별로 살펴보자.function outer() { const x = 10; function inner() { console.log(x); } return inner;}const fn = outer();fn(); // 101단계: 외부함수 실행 → 내부함수 평가(정의) (호이스팅 or 런타임에)외부함수가 실행되면서 내부함수를 만나면, 내부함수 객체가 생성된다.이때 내부함수의 [[Environment]] 내부 슬롯에 현재 실행 중인 외부함수의 렉시컬 환경이 저장된다.inner.[[Environment]] = outer의 LexicalEnvironme..
썸네일 TypeScript: as const 객체 vs enum 비교 TypeScript: as const 객체 vs enum 비교기본 문법enumenum Status { ALL = 'ALL', SHOW = 'SHOW', HIDE = 'HIDE',}as const 객체const Status = { ALL: 'ALL', SHOW: 'SHOW', HIDE: 'HIDE',} as const;type Status = (typeof Status)[keyof typeof Status];// → 'ALL' | 'SHOW' | 'HIDE' enum의 장점1. 문법이 간결함// enum - 한 번에 끝enum Status { ALL = 'ALL', SHOW = 'SHOW', HIDE = 'HIDE',}// as const - 타입 따로 정의 필요const Status =..
썸네일 encodeURI와 encodeURIComponent의 차이 encodeURI와 encodeURIComponent의 차이핵심 차이두 함수의 차이는 인수로 전달된 문자열을 완전한 URI로 보느냐, URI의 구성요소로 보느냐에 있다. 함수 용도URL 구분자 인코딩encodeURI완전한 URI 전체하지 않음encodeURIComponentURI 구성요소 (쿼리스트링 등)함encodeURIURL 전체를 인코딩할 때 사용한다. URL의 구조를 유지해야 하므로 ://, /, ?, &, = 같은 구분자는 인코딩하지 않는다.const uri = 'https://example.com/books?title=자바스크립트&author=홍길동';encodeURI(uri);// 'https://example.com/books?title=%EC%9E%90%EB%B0%94%EC%8A%A4%E..
썸네일 문자 인코딩과 URL 인코딩 문자 인코딩과 URL 인코딩인코딩이란인코딩(Encoding)은 문자를 컴퓨터가 이해할 수 있는 바이트 형태로 변환하는 것이다.같은 문자라도 어떤 인코딩 방식을 사용하느냐에 따라 바이트 표현이 달라진다. UTF-16과 UTF-8JavaScript 엔진은 내부적으로 문자열을 UTF-16으로 처리한다. 반면 네트워크 전송이나 파일 저장 시에는 주로 UTF-8을 사용한다.'A'.length // 1 (2바이트)'가'.length // 1 (2바이트)'😀'.length // 2 (4바이트, 서로게이트 페어) 상황인코딩영어한글JS 엔진 내부 (메모리)UTF-162바이트2바이트HTTP 전송, 파일 저장UTF-81바이트3바이트URL 인코딩URL은 ASCII 문자셋만 사용할 수 있다.한글이나 특수..
썸네일 URI, URL, URN의 차이 URI, URL, URN의 차이URI (Uniform Resource Identifier)URI는 인터넷에서 리소스를 식별하는 통합된 방식이다. URL과 URN은 모두 URI의 하위 개념이다.URI = URL + URN URL (Uniform Resource Locator)URL은 리소스의 위치로 식별한다. "어디에 있는지"를 나타낸다.https://example.com:443/books/123?sort=date&order=desc#chapter1└─┬──┘ └─────┬─────┘└┬┘ └───┬───┘ └─────────┬────────┘ └───┬───┘프로토콜 도메인 포트 경로 쿼리 프래그먼트프로토콜, 호스트, 경로 등으로 구성되며, 리소스가 다른 곳..
썸네일 Iterable vs Enumerable: 헷갈리는 두 개념 완벽 정리 Iterable vs Enumerable: 헷갈리는 두 개념 완벽 정리들어가며JavaScript를 공부하다 보면 "순회 가능하다"는 표현을 자주 만나게 된다.그런데 for...in으로 순회하는 것과 for...of로 순회하는 것은 완전히 다른 개념이다.이 글에서는 **Enumerable(열거 가능)**과 **Iterable(반복 가능)**의 차이를 명확히 정리한다. 한눈에 보는 차이구분Enumerable (열거 가능)Iterable (반복 가능)의미프로퍼티가 열거 대상인지Symbol.iterator 메서드 보유 여부반복문for...infor...of순회 대상객체의 키(key)컬렉션의 값(value)확인 방법propertyIsEnumerable()Symbol.iterator in obj주요 타입 정리타입I..
썸네일 내부 슬롯(Internal Slot)과 내부 메서드(Internal Method) 내부 슬롯(Internal Slot)과 내부 메서드(Internal Method)한 줄 요약자바스크립트 엔진의 동작을 설명하기 위한 의사(pseudo) 프로퍼티/메서드. 실제 JS 코드로 직접 접근할 수 없다."명세서가 엔진 동작을 설명하기 위해 사용하는 가상의 프로퍼티" 1. 의사(pseudo)란?"pseudo" = 가짜, 유사한const obj = { a: 1 };// 직접 접근 불가능obj.[[Prototype]] // ❌ SyntaxErrorobj.[[Get]]('a') // ❌ 이런 메서드 없음ECMAScript 명세서에서 **"엔진이 이렇게 동작해야 한다"**를 설명하기 위한 개념이지, 실제 자바스크립트 문법이 아니다. 2. 명세서 vs 실제 구현┌──────────────────────..
썸네일 prototype, __proto__, [[Prototype]] 완벽 정리 prototype, __proto__, [[Prototype]] 완벽 정리한 줄 요약구분누가 가짐의미[[Prototype]]모든 객체내부 슬롯. 나의 부모 객체를 참조__proto__모든 객체[[Prototype]]에 접근하는 접근자 프로퍼티prototype함수만내가 만들 인스턴스의 부모가 될 객체1. [[Prototype]] - 모든 객체가 가진 내부 슬롯자바스크립트의 모든 객체는 자신의 부모(상위 프로토타입)를 참조하는 내부 슬롯 [[Prototype]]을 가진다.const obj = { a: 1 };// obj의 [[Prototype]]은 Object.prototype을 가리킴// 하지만 직접 접근은 불가능obj.[[Prototype]] // ❌ SyntaxError내부 슬롯이란?ECMAScrip..
썸네일 전역 객체 (Global Object) 전역 객체 (Global Object)1. 전역 객체란?자바스크립트 엔진이 코드 실행 전에 가장 먼저 생성하는 특수한 객체다.자바스크립트 엔진 시작 ↓전역 객체 생성 ← 가장 먼저, 딱 한 번 ↓전역 실행 컨텍스트 생성 ↓코드 실행 ↓프로그램 종료 시 전역 객체 소멸자세히전역 객체 (window / global)├── 생성 시점: 엔진 초기화 시 (전역 실행 컨텍스트 생성 전)│├── 포함하는 것들│ ├── 빌트인 생성자: Object, Array, Function...│ ├── 빌트인 객체: Math, JSON, Reflect...│ └── 환경별 API: Web API(브라우저) / Node API│└── 역할: 전역 코드에서 이것들에 접근..