FE/JS
자바스크립트 - 클로저
2025.05.19
클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)에 대한 참조를 함께 저장하는 구조이다.내부 함수가 실행될 때, 이 참조를 통해 자신이 선언될 당시 주변 스코프의 변수들에 접근할 수 있으며,외부 함수의 실행이 완료된 후에도 해당 변수들이 메모리에 남아있어 접근이 가능하다. 더보기렉시컬 환경"함수나 블록이 선언될 때, 그 위치에서 접근 가능한 변수들이 담긴 객체" ✅ 렉시컬 환경의 구성1️⃣ 환경 레코드 (Environment Record)현재 스코프(블록/함수 등)에서 선언된 변수(예: var, let, const)를 저장하는 객체.2️⃣ 외부 렉시컬 환경에 대한 참조 (Outer Lexical Environment Reference)상위(외부) 스코프의 렉시컬 ..
FE/JS
JavaScript - this
2025.05.19
this는 JavaScript에서 함수가 호출될 때 결정되는 특별한 키워드이다. JavaScript에서 this는 함수가 어떻게 호출되었는지에 따라 바인딩된다. 선언 위치가 아닌 호출 시점에 따라 결정되므로, 예상과 다른 동작이 발생하기 쉽다. 1. 호출 방식에 따라 달라지는 thisconst obj = { name: 'obj', logThis: function () { console.log(this.name); }};obj.logThis(); // 'obj'const extracted = obj.logThis;extracted(); // undefinedconst wrapper = { name: 'wrapper', call: obj.logThis };wrapper.call(); // 'wra..
FE/JS
자바스크립트 실행 컨텍스트
2025.05.19
실행 컨텍스트(Execution Context)는 자바스크립트 동작의 기반이다.this, 호이스팅처럼 JS에서 특이하게 느껴지는 대부분의 개념과 밀접하게 연결되어 있다.1. 실행 컨텍스트란?실행 컨텍스트는 ECMAScript 엔진이 코드의 실행 상태를 추적하기 위해 사용하는 내부 구조이다. 실행 컨텍스트는 항상 스택으로 관리되며, 새로운 코드(함수, 모듈 등)로 제어가 넘어가면 새로운 컨텍스트가 생성되고 스택에 쌓인다. 2. 실행 컨텍스트의 생성과 구조자바스크립트 엔진은 코드를 실행하기 전에 평가(creation) 단계를 거쳐 실행 컨텍스트를 생성하고, 이후 실행(execution) 단계에서 코드를 실제로 수행한다. ✅ 평가 단계 (Creation Phase)실행 컨텍스트 객체가 생성된다.LexicalE..
FE/JS
자바스크립트 호이스팅 정리
2025.05.18
🔍 호이스팅이란?호이스팅(hoisting)은 자바스크립트에서 변수나 함수의 선언이 실행 전에 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 메커니즘이다.정확히는, 자바스크립트 엔진이 실행 컨텍스트를 생성할 때 변수 및 함수의 선언을 먼저 메모리에 등록한 후, 코드가 실행된다. 🔄 어떤 코드가 호이스팅 되는가?console.log(message); // undefinedvar message = "Hello, world!";위 코드는 undefined를 출력한다. 이는 var message; 선언이 먼저 끌어올려졌기 때문이다. 자바스크립트는 다음과 같이 처리한 것처럼 동작한다:var message;console.log(message); // undefinedmessage = "Hello, world!"..
FE/JS
null, undefined, undeclared, NaN
2025.05.17
null, undefined, undeclared, NaN을 헷갈리면 어떤 일이 생길까?없는 값을 체크한다고 생각했는데, 그 값이 NaN이라 의도치 않게 연산이 꼬인다.undefined라고 생각한 값을 null만 체크해서 조건문이 통과되지 않는다.선언된 줄 알았던 변수가 실제로는 undeclared 상태라 런타임 에러가 난다.이러한 실수를 줄이기 위해, 네 가지 개념을 한 번에 정리해보자.1. null – 의도적으로 비어있음을 표현정의: 명시적으로 "값이 없음"을 나타내기 위해 사용하는 값타입: object (설계 오류로 인해 typeof null은 "object" 반환)특징:의도적으로 비어 있음을 명시주로 객체 초기화에 사용null == undefined → true (느슨한 비교: 형 변환 발생)nu..