기본 콘텐츠로 건너뛰기

라벨이 스코프인 게시물 표시

함수 선언식과 함수 표현식은 언제 호출할 수 있을까

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

ES6는 무엇을 바꿨을까: 최신 문법보다 중요한 자바스크립트 실행 의미 이해하기

ES6는 무엇을 바꿨을까: 최신 문법보다 중요한 자바스크립트 실행 의미 이해하기 빠른 답 ES6는 현재의 최신 버전이 아니라 2015년에 표준화된 ECMAScript 2015를 가리키는 중요한 전환점입니다. let 과 const 는 단순한 var 대체 문법이 아니라 블록 스코프와 TDZ 때문에 값 대신 오류가 관찰될 수 있습니다. 화살표 함수는 짧은 함수 문법보다 자신만의 this 를 만들지 않는다는 차이가 더 중요합니다. ES6 이전 문법은 레거시 코드, 트랜스파일 결과, 오래된 예제 해석을 위해 여전히 알아둘 필요가 있습니다. 목차 한눈에 비교 ES6는 최신 버전이 아니라 ECMAScript 2015라는 기준점이다 스코프와 선언 방식이 바꾸는 관찰 가능한 결과 this, 클래스, 모듈은 문법보다 실행 의미가 중요하다 구조 분해와 스프레드에서 값과 참조 구분하기 Promise는 값과 오류의 흐름을 함께 다룬다 Babel과 호환성 설정에서 나누어 봐야 할 것 흔한 오해와 현재 기준의 해석 ES6 이전 문법을 여전히 알아야 하는 이유 한눈에 비교 버전 기준 ES6는 ECMAScript 2015이며, 2026년 4월 기준 공식 연간 스냅샷은 ECMAScript 2025, 최신 편집본은 ECMAScript 2026 초안 흐름을 따릅니다. 선언 의미 var 는 함수 스코프와 undefined 초기화처럼 관찰되는 동작이 중심이고, let 과 const 는 블록 스코프와 TDZ로 접근 시점 오류를 드러냅니다. 값과 상태 const 는 값의 불변성을 보장하지 않고, 이름이 다른 값을 가리키도록 재할당하는 일을 막습니다. 함수 호출 일반 함수의 this 는 호출 방식에 따라 정해지고, 화살표 함수는 바깥 스코프의 this 를 그대로 사용합니다. 객체 모델 class 는 프로토타입 기반 객체 모델을 더 읽기 쉬운 형태로 쓰는 문법이지, 자바스크립트를 클래스 기반 언어로 바꾸지는 않습니다. 비동기 흐름 콜백 중심 코드에서 Promise 의 상태 전환과 오류 전...

자바스크립트 호이스팅, 왜 가능할까: 생성 단계와 TDZ까지 한 번에 이해하기

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