코드 땜장이

자바스크립트 호이스팅, 왜 가능할까: 생성 단계와 TDZ까지 한 번에 이해하기 빠른 답 호이스팅은 코드가 이동하는 현상이 아니라 실행 전에 식별자 바인딩이 준비되는 동작입니다. var는 선언 시 undefined로 초기화되지만 let과 const는 초기화 전 구간인 TDZ에 들어갑니다. 함수 선언문은 호출 가능한 상태로 먼저 준비되지만 함수 표현식은 변수 규칙을 따릅니다. 실무에서는 호이스팅에 기대기보다 선언을 먼저 쓰고 const와 블록 스코프를 기본으로 두는 편이 안전합니다. 원문 초안을 현재 기준의 자바스크립트 의미론에 맞게 다듬고 있습니다. 우선 스펙과 런타임 문서를 기준으로 오래된 설명과 현재 설명의 차이를 확인한 뒤, 그 흐름에 맞춰 발행형 Markdown으로 재구성하겠습니다.# 자바스크립트 호이스팅, 왜 가능할까: 실행 컨텍스트 생성과 TDZ로 이해하기 목차 시간 흐름으로 이해하기 흐름으로 보기 호이스팅은 코드가 위로 이동하는 현상일까 현재 기준으로 다시 보는 호이스팅 설명 실행 환경에서 먼저 확인하기 var, let, const, 함수 선언문은 어떻게 준비될까 실행 결과로 보는 값, 상태, 오류의 차이 TDZ에서 자주 헷갈리는 typeof 오래된 설명과 현재 설명이 엇갈리는 지점 시간 흐름으로 이해하기 소스 파싱 선언의 형태와 스코프 구조를 먼저 읽습니다. → 실행 컨텍스트 생성 현재 스코프를 위한 실행 환경이 만들어집니다. → 선언 바인딩 식별자 이름이 환경 레코드에 등록됩니다. → 초기화 구간 선언 종류에 따라 undefined , 함수 객체, 미초기화 상태가 갈립니다. → 코드 실행 실제 할당과 호출이 위에서 아래로 진행됩니다. 흐름으로 보기 흐름 다이어그램 이 순서를 먼저 잡아두면, 왜 어떤 줄은 undefined 를 내보내고 어떤 줄은 ReferenceError 를 던지는지 같은 문맥에서 읽을 수 있습니다. 호이스팅은 “선언이 위로 끌어올려진다”는 비유로 시작해도 되지만, 실제로는 “실행 전에 무엇이 어떤 상태로 ...

자바스크립트 함수, 선언부터 클로저와 this까지 한 번에 이해하기 빠른 답 자바스크립트에서 함수는 값처럼 다룰 수 있는 일급 객체라서 전달, 반환, 저장이 모두 가능합니다. 함수 선언식과 함수 표현식은 호이스팅 방식이 다르므로 호출 가능 시점이 달라집니다. 클로저는 함수가 자신이 만들어질 때의 스코프를 기억하는 동작이며, 상태 캡슐화의 핵심 도구입니다. 화살표 함수는 문법만 짧은 것이 아니라 this와 arguments를 자체적으로 만들지 않는다는 점이 중요합니다. 목차 한눈에 비교 실행 환경을 먼저 맞추기 함수는 값이면서 호출 가능한 객체다 선언식, 표현식, 화살표 함수의 차이 호이스팅과 TDZ를 오류 이름으로 읽기 클로저는 값을 복사하지 않고 환경을 붙잡는다 this와 arguments는 호출 방식과 선언 방식이 가른다 출력으로 읽는 디버깅 포인트 실무에서 어떤 형태를 고를까 한눈에 비교 Point 1 함수 선언식: 평가 단계에서 함수 객체까지 준비되므로 선언 전 호출이 가능하다. Point 2 함수 표현식: 변수 바인딩과 함수 값 할당이 분리된다. const 는 TDZ 때문에 ReferenceError , var 는 undefined 상태라 TypeError 가 난다. Point 3 화살표 함수: 함수 값이긴 하지만 자체 this , arguments , prototype 이 없고 생성자로 쓸 수 없다. Point 4 클로저: 외부 값을 “복사”해 두는 게 아니라, 선언 시점의 스코프 체인에 계속 연결된다. Point 5 undefined , ReferenceError , TypeError 는 모두 다른 신호다. 값이 없는지, 접근이 금지됐는지, 타입이 맞지 않는지 구분해서 읽어야 한다. 함수를 이해할 때는 문법 이름보다 먼저 네 가지를 보면 된다. 값처럼 전달되는가, 언제 호출 가능한가, 어떤 스코프를 기억하는가, this 를 스스로 가지는가. 이 기준이 잡히면 선언식, 표현식, 클로저, 화살표 함수가 따로 놀지 않는다. 실행 환경...

자바스크립트 배열 제대로 이해하기: 인덱스, length, 빈 슬롯, 메서드 선택까지 빠른 답 배열은 0부터 시작하는 인덱스로 접근하는 순서 있는 값 목록이다. length는 단순한 요소 개수처럼 보이지만 마지막 인덱스의 영향도 함께 받는다. 중간 인덱스를 건너뛰어 값을 넣으면 undefined가 아니라 빈 슬롯이 생길 수 있다. 실무에서는 직접 인덱스를 조작하기보다 push, splice, map, filter 같은 메서드 사용이 더 안전하다. 목차 배열을 단순한 목록으로만 보면 놓치는 핵심 흐름으로 보기 인덱스와 length는 어떻게 함께 동작할까 배열 생성과 초기값을 만드는 안전한 방법 요소 추가와 삭제는 왜 메서드로 하는 편이 안전할까 순회, 검색, 변환 메서드는 어떻게 고를까 빈 슬롯과 undefined는 왜 다르게 봐야 할까 실무에서 자주 하는 실수와 선택 기준 배열을 단순한 목록으로만 보면 놓치는 핵심 자바스크립트 배열은 값을 순서대로 담는 자료구조처럼 보이지만, 실제로는 숫자 인덱스와 length 규칙을 가진 특수한 객체입니다. 그래서 배열을 제대로 다루려면 “값이 몇 개 있나”만 보는 것이 아니라 “어떤 인덱스가 실제로 존재하나”까지 함께 봐야 합니다. 이 차이를 가장 쉽게 드러내는 것이 빈 슬롯입니다. 예를 들어 arr[5] = 'x' 처럼 중간을 건너뛰고 값을 넣으면, 0부터 4까지가 모두 채워지는 것이 아닙니다. 읽을 때는 undefined 처럼 보일 수 있어도, 실제로는 값이 없는 인덱스가 생길 수 있습니다. 이 상태는 순회, 검색, 직렬화에서 미묘하게 다른 결과를 만듭니다. 원문에 있던 “배열은 해시 테이블처럼 구현된다”는 식의 설명은 현재 기준으로는 너무 단정적입니다. 자바스크립트 엔진은 배열을 내부적으로 다양하게 최적화할 수 있고, 개발자가 실전에서 알아야 할 핵심은 엔진 내부 구조보다 언어 규칙입니다. 정확한 기준은 “배열이 무엇처럼 구현되는가”보다 “인덱스, length , 빈 슬롯, 메서드가...

자바스크립트 호이스팅, undefined와 ReferenceError는 왜 다를까 빠른 답 호이스팅은 코드 이동이 아니라 실행 전 선언이 먼저 등록되는 과정으로 이해하는 편이 정확하다. var는 선언 시 undefined로 초기화되므로 값 할당 전 접근하면 undefined가 나온다. let과 const는 TDZ 구간이 있어 선언문 이전 접근 시 ReferenceError가 발생한다. 함수 선언문은 먼저 준비되지만 함수 표현식은 변수 규칙을 따라 다른 오류를 만들 수 있다. 목차 호이스팅은 코드가 올라가는 현상이 아니라 선언이 먼저 준비되는 과정이다 흐름으로 보기 실행 전에 일어나는 일: 생성 단계와 실행 단계 실험 환경 준비 한 파일로 비교하는 var, let, const, 함수 선언문, 함수 표현식 콘솔 출력으로 읽는 undefined, ReferenceError, TypeError의 차이 블록 스코프와 TDZ에서 자주 생기는 실수 실무에서 기억할 판단 기준 호이스팅은 코드가 올라가는 현상이 아니라 선언이 먼저 준비되는 과정이다 호이스팅을 "변수와 함수가 위로 끌어올려진다"라고만 외우면 실제 실행 결과를 설명하기 어려워집니다. 자바스크립트 엔진은 코드를 물리적으로 위로 옮기지 않습니다. 대신 현재 스코프에서 어떤 이름이 선언됐는지 먼저 파악하고, 그 이름들을 사용할 준비를 해 둡니다. 그래서 핵심은 "코드가 어디 있나"보다 "이 시점에 그 이름이 어떤 상태인가"입니다. 용어도 하나 바로잡아 두면 좋습니다. function hello() {} 를 흔히 함수 선언식이라고 부르지만, 함수 표현식과 구분하려면 함수 선언문이라고 부르는 편이 더 정확합니다. 이 글에서는 함수 선언문과 함수 표현식을 분리해서 설명합니다. 흐름으로 보기 자바스크립트 엔진은 먼저 소스 코드를 읽고 선언을 수집합니다. 그다음 var , let , const , 함수 선언문을 서로 다른 규칙으로 준비한 뒤, 실제 실...