코드 땜장이

함수 선언식과 함수 표현식은 언제 호출할 수 있을까 빠른 답 함수 선언식은 실행 전 평가 단계에서 함수 객체까지 준비되어, 선언 위치보다 앞에서도 호출할 수 있습니다. 함수 표현식은 변수에 함수 값이 할당된 뒤에 호출할 수 있습니다. const 와 let 함수 표현식은 초기화 전 접근 시 TDZ 때문에 ReferenceError 가 발생합니다. 공통 유틸 함수는 선언식이 읽기 쉽고, 콜백·조건부 할당·함수 조합에는 표현식이 잘 맞는 경우가 많습니다. 목차 한눈에 비교 시간 흐름으로 이해하기 왜 헷갈리는가 호이스팅되지 않는다는 말의 함정 호출 가능 시점과 실제 출력 var, let, const의 오류 차이 Node.js에서 직접 확인하기 이름 있는 함수 표현식 블록 스코프에서의 주의점 코드 작성 기준 한눈에 비교 정의 방식 함수 선언식은 function name() {} 형태의 선언문이고, 함수 표현식은 함수 값을 변수나 상수에 담는 방식입니다. 호출 가능 시점 함수 선언식은 선언 위치보다 앞에서도 호출할 수 있지만, 함수 표현식은 할당문 실행 이후에 호출할 수 있습니다. 초기 상태 함수 선언식의 이름은 함수 객체로 초기화됩니다. let 과 const 로 선언한 함수 표현식의 이름은 초기화 전까지 TDZ에 있습니다. 오류 유형 const 나 let 함수 표현식을 초기화 전에 읽으면 ReferenceError 가 발생하고, var 함수 표현식을 할당 전에 호출하면 보통 TypeError 가 발생합니다. 코드 의도 선언식은 스코프 안에서 사용할 이름 있는 함수를 정의하는 느낌이 강하고, 표현식은 함수를 값처럼 전달하거나 조합한다는 의도가 더 잘 드러납니다. 이름 범위 함수 표현식도 이름을 가질 수 있지만, 그 이름은 보통 함수 내부에서만 사용할 수 있습니다. 시간 흐름으로 이해하기 코드 평가 시작 JavaScript 엔진은 실행 전에 현재 스코프의 선언을 먼저 처리합니다. → 함수 선언 초기화 함수 선언식은 이름과 함수 객체가 함께 준비됩니다....

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

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

 요즘에, var를 쓰지 말라는 사람들이 많아서, es6이후에 자바스크립트를 배운사람들은 처음보는 키워드일 수도 있고, 그냥 변수 선언 하는 키워드정도로 생각을 하는데, 왜 쓰지 말라는 지에 대해서 잘 모르는 분들이 있을 것이다.  아래의 코드들로 하여금 어느정도 해당 키워드의 나쁜점을 좀 드러 낼 수 있게 let과 비교를 하며 설명을 드리고자 한다.  몇가지 집고 아래 코드를 보도록 하자, 않그러면 코드 자체가 이해 안 될 수 있으니.  1. var, let은 스코프의 차이가 있다. var의 경우에는 function scope, let은 block scope를 가진다. ( function () { //... function scope { //... block scope var a = 1 console . log (a) } console . log (a) })() ( function () { //... function scope { //... block scope let b = 1 console . log (b) } console . log ( b ) // Uncaught ReferenceError: b is not defined })()  var의 경우에는 블록 스코프 내에서 선언이 되었지만, 해당 함수내에서는 참조 가능 한것을 볼 수 있다 var는 function scope를 갖는다.  let의 경우에는 블록 스코프 내에서 선언이 되었고, 블록에서 벗어 나자마자 참조 불가능 한것을 볼 수 있다 let은 block scope를 갖는다.  2. TDZ ( function () { console . log (a) // undefined var a = 1 })() ( function () { console . log (b) // Uncaught ReferenceError: Cannot access 'b' befor...