이전에 호이스팅에 대해 두 번이나 정리한 적이 있지만, 호이스팅이 왜 발생하는지에 대해 다시 정리하고자 이 글을 통해 정리한다. 호이스팅JS에서의 호이스팅이란 변수 선언과 함수 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 특성을 의미한다.console.log(x); // undefinedconsole.log(y); // ReferenceError: Cannot access 'constance' before initializationconsole.log(z); // ReferenceError: Cannot access 'variable' before initializationvar x = 5;const y = 0;let z = 20;console.log(x); // 5console.log(y); ..
실행 컨텍스트
클로저는 함수와 그 함수가 선언된 렉시컬(정적)환경과의 조합이다. Javascript를 공부하며 이런 추상적인 말을 들어본 적이 있다. 오늘은 추상적으로 알고있던 클로저에 대해 정리하겠다. 1. 렉시컬 스코프자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위 스코프가 결정 되며, 이를 렉시컬(정적) 스코프라 한다. 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되고 변하지 않는다. 23장의 "실행 컨텍스트"에서 정리했듯이 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다. 이 렉시컬 환경은 자신의 "외부 렉시컬 환경에 대한 참조"를 통해 상위 렉시컬 환경과 연결된다. 이러한 연결이 스코프 체인이다. 함수의 상위 스코프를 결정하는 것은 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할..
실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 1 소스코드의 타입ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다.소스 코드의 타입설명전역 코드전역에 존재하는 소스 코드이며 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다.함수 코드함수 내부에 존재하는 소스 코드를 말하며 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다.eval 코드빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드를 말한다.모듈 코드모듈 내부에 존재하는 소스코드를 말하며 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다. 소스 코드를 4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨택스트를 생성하는 과정과 관리 내용이 다르기 ..
실행 컨택스트와 스코프, 콜 스택과 힙의 사전 지식이 필요하다. 메모리 누수 Javascript 메모리는 원시값을 저장하는 콜 스택 메모리와 참조 값을 저장하는 힙 메모리로 구분된다. 실행 컨텍스트(GEC, FEC)가 콜 스택에 쌓이게 되면 참조 값이 있다면 힙 메모리에 데이터가 쌓이게 됩니다. 실행 컨텍스트가 차례대로 제거 된다면, 그 순서에 맞게 힙 메모리에 쌓인 데이터는 더이상 참조되지 않으므로 필요가 없어집니다. 이때 계속해서 힙 메모리에 불필요한 데이터가 메모리를 차지하게되면 메모리 누수로 인해 성능이 떨어지게됩니다. 메모리 누수? 사용하지 않는 메모리를 해제하지 못하여 계속 메모리를 점유하는 것 종합하자면, 가비지 컬렉터가 더이상 참조되지 않는 객체를 인지하고, 불필요한 메모리를 해제한다. 가..
1. 정의 자바스크립트 엔진이 자바스크립트를 실행할 때 원시 타입 및 참조 타입을 저장하는 메모리 구조로 콜 스택과 힙을 갖는다. 1-1 콜스택 원시타입 값과 함수 호출의 실행 컨텍스트(Execution Context)를 저장하는 곳이다. 1-2 힙(메모리 힙) 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조타입 값을 저장하는 곳이다. 2. 동작 원리 let a = 10; let b = 35; let arr = []; function func() { const c = a + b; const obj = { d: c }; return obj; } let o = func(); 위 코드를 콜 스택과 힙의 동작으로 확인해 보자. 제일 처음으로 GEC(Global Execution Context, 글..
this 바인딩 EC(Execution Context) 가 생성될 때마다 this 바인딩이 발생하며, 우선순위 순으로 나열하면 아래와 같다. this 바인딩 되는 순서 1. new를 사용했을 때 해당 객체로 바인딩된다. var name = "global"; function Func() { this.name = "Func"; this.print = function f() { console.log(this.name); }; } var a = new Func(); a.print(); // Func 2. call, apply, bind 와 같이 명시적 바인딩을 사용한 경우 인자로 전달된 객체에 바인딩 된다. function func() { console.log(this.name); } var obj = { na..
