호이스팅 이전에 변수 호이스팅 관련하여 정리한 적이 있었는데, 자바스크립트 개념을 다시 공부하면서 이해도가 달라져 다시 정리해야할 필요성을 느꼈다. 이번에는 실행 컨텍스트의 관점에서 정리를 해보았다. 1. 실행 컨텍스트 먼저 자바스크립트의 동작을 알기 위해서는 실행 컨텍스트를 알아야한다. 실행 컨텍스트 관련해서는 따로 정리를 했다. 2. 실행 컨텍스트와 호이스팅 위의 코드는 호이스팅에 의해 에러가 아니라 라는 값이 출력된다. 2-1. 자바스크립트 엔진의 동작 순서 자바스크립트 엔진은 콜 스택을 통해 코드 실행을 한다. 콜 스택은 LIFO 방식으로 동작하기 때문에 가장 마지막에 푸시된 컨텍스트가 가장 먼저 실행된다. 엔진이 코드를 읽어 들이면서 전역 실행 컨텍스트를 생성하고 콜 스택에 올린다. 콜 스택이 전역 실행 컨텍스트를 실행하던 도중, 함수 호출문을 만나면 해당 함수의 지역 실행 컨텍스트를 생성하여 콜 스택에 푸시한다. 엔진은 전역 실행 컨텍스트 실행을 멈추고 지역 실행 컨텍스…

자바스크립트의 비동기 처리 과정 1. 자바스크립트 엔진 자바스크립트는 기본적으로 싱글 스레드에서 동작한다. 싱글 스레드라는 말은 하나의 call stack에서 한번에 하나의 task밖에 처리할 수 없다는 말과 같다. 그래서 비동기를 이용하여 효율적으로 task를 처리한다. 그렇다면 어떻게 동작하여 효율성을 높이는지 궁금증이 생긴다. 자바스크립트 엔진은 코드를 실행하는 일을 하고, 비동기적인 로직들은 모두 Web API에서 처리된다. 이미지 출처: (https://sculove.github.io/post/javascriptflow/) 2. Event Loop, Queue Event Loop는 자바스크립트 엔진과 브라우저의 Web API 사이에서 작동하여 task 순서를 제어한다. 콜 스택이 비어있을 때 큐에서 task를 꺼내 콜 스택에 넣는 역할을 한다. 자바스크립트는 이 Event Loop와 큐들을 이용하여 비동기 작업을 수행한다. 직접적인 작업은 Web API에서 처리하고 완료…

실행 컨텍스트 실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하고 관리한다. 식별자, 스코프, this 등은 렉시컬 환경을 통해 관리되고, 코드의 실행 순서는 콜 스택과 실행 컨텍스트를 통해 관리된다. 1. 실행 컨텍스트 구성 실행 컨텍스트는 크게 세가지로 구성되어 있다. 변수 환경(Variable Environment): 컨텍스트 내의 식별자들에 대한 정보, 함수 선언 등이 저장되는 공간 렉시컬 환경(Lexical Environment): 컨텍스트가 속한 렉시컬 스코프(스코프 체인) 정보를 담고 있는 공간, 초기화 과정에서는 변수 환경과 동일하지만, 이후엔 변경사항이 실시간으로 변경된다. This Binding: this가 바인딩되는 공간, 어떤 객체에 바인딩될 지 결정하는 공간 2. 실행 컨텍스트 생성과정 컨텍스트 생성 단계(Execution Context Creation Phase): 실행 컨텍스트가 생성되며, 실행 컨텍스트 구성 요소의 정보가 초기화된다. 코드 실행 단…

자바스크립트는 클래스 기반의 객체지향 언어와는 다르게 프로토타입 기반 객체지향 언어이다. 프로토타입 자바스크립트의 모든 객체는 부모 객체와 연결되어 있다. 그리고 부모 객체의 프로퍼티나 메소드를 상속받아 사용할 수 있는데, 부모 객체를 프로토타입 객체, 줄여서 프로토타입이라 부른다. 개발자 도구를 통해 Object를 열어보면 다음과 같다. 자바스크립트의 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가진다. [[Prototype]]은 상속을 구현하는데 사용되고 __proto__로 접근할 수 있다. __proto__프로퍼티에 접근하면 내부적으로 Object.getPrototypeOf가 호출되어 프로토타입 객체를 반환한다. 1. _proto_, [[Prototype]], prototype 프로퍼티 1-1. _proto_ 모든 객체가 가지고 있고, 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 참조 링크 역할을 한다. 그래서 객체는 상속을 받아 부모 객체의 프로퍼티와 …

자바스크립트에서의 비동기란 로직이 끝날 때 까지 기다리지 않고 다음 코드를 실행하는 것을 말한다. 비동기와 Promise 1. 비동기 비동기를 사용하는 이유는 일을 처리하는 속도가 향상되기 때문이다. 비동기를 사용하지 않는다면 시간이 오래 걸리는 일을 진행하는 동안 아무 동작도 하지 못하고 기다려야한다. 비동기를 사용하면 시간이 오래 걸리는 일을 진행하도록 두고 그 다음 일을 처리하기 때문에 일을 병렬적으로 처리하여 처리 속도가 향상시킬 수 있다. 1-1. 비동기의 문제점 비동기로 동작하는 ajax의 일이 언제 끝나는지 모르기 때문에 일의 처리 순서를 보장 받을 수 없고, 에러가 출력된다. 비동기의 문제점은 바로 일의 처리 순서를 보장 받을 수 없다는 것이다. 2. 콜백 함수 비동기 업무의 처리 순서를 보장 받기 위해 콜백 함수를 사용한다. 콜백 함수를 이용하면 일이 끝난 후에 함수를 실행 시키기 때문에 실행 순서를 보장 받을 수 있다. 따라서 위와 같이 콜백 함수를 활용하면 일이…

보통 자바스크립트 문법은 ES6 이전과 이후로 나뉜다. ES6를 기준으로 자바스크립트의 사용법이 크게 바뀌었고, 효율적인 문법들이 많이 등장했다. 화살표 함수는 그 중 하나이다. Arrow Function 1. 선언 화살표 함수는 function 키워드를 사용하지 않고 => 를 사용하여 간단하게 함수를 선언할 수 있다. 2. 호출 아래와 같이 콜백 함수로도 사용할 수 있다. 화살표 함수는 익명으로만 사용할 수 있기 때문에 함수를 호출할 때는 함수 표현식을 사용해야 한다. 3. this 일반 함수와 비교 했을 때, 화살표 함수와의 가장 큰 차이는 this에 바인딩할 객체의 할당 방식이 다르다는 것이다. 일반 함수는 this에 바인딩할 객체가 함수 호출 방식에 따라 동적으로 결정되고, 화살표 함수는 정적으로 결정된다. 화살표 함수의 this는 항상 상위 스코프의 this를 참조한다. 위와 같이 콜백 함수를 일반 함수로 선언하면 원하는 결과가 출력되지 않는다. 그 이유는 this글 에서…

this 자바스크립트의 this는 함수가 호출될 때 암묵적으로 전달 받는다. 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 1. 함수 호출 전역 객체는 모든 객체의 최상위 객체를 의미하고 this는 기본적으로 전역 객체 window에 바인딩된다. 따라서, 전역으로 선언한 함수는 전역 객체의 메소드이다. 글로벌 영역에 변수, 함수를 선언하고 호출하면 전역 객체에 접근 가능한 변수 window를 사용하여 호출한 것과 같다. 1-1. 내부함수 1-2. 메소드 내부의 함수 1-3. 콜백함수 내부함수, 메소드 내부의 함수, 콜백함수의 this도 기본적으로 전역 객체에 바인딩되기 때문에 window를 참조한다. 2. 메소드 호출 객체의 프로퍼티 값이 함수이면 메소드로 호출된다. 이 때 메소드 내부의 this는 메소드를 소유한 객체에 바인딩된다. 메소드를 호출하는 각각의 객체를 기준으로 name 프로퍼티로 출력된다. 3. 생성자 함수 호출 생성자 함수로 함수를 호출했을 때는, …

변수는 값을 저장하고 참조하기 위해 사용하고, 언어 관점에서 데이터를 관리하기 위한 핵심요소중의 하나이다. 자바스크립트 엔진의 값 할당 보통 변수를 선언할 때, 위와 같은 방식을 사용한다. 이것은 정확히 얘기하면 변수 선언과 값의 할당을 한번에 표현한 것이다. 변수 a는 사람을 위한 식별자이고 자바스크립트 엔진은 변수 a를 메모리 주소로 파악하고 메모리에 접근한다. 자바스크립트 엔진은 변수에 값을 할당할 때 선언 단계, 초기화 단계, 값 할당 단계로 3단계에 걸쳐서 수행한다. 선언 단계: 엔진이 변수 이름을 인식하는 단계 초기화 단계: 값을 저장할 공간을 확보하고 undefined를 할당하여 초기화 하는 단계 값 할당 단계: undefined로 선언된 변수에 실제값을 할당하는 단계 변수 선언은 코드를 읽어들이는 시점인 런타임 이전에 실행되고 값의 할당은 런타임에 실행된다. 각 단계가 나뉘어 있고 수행 시기가 다르기 때문에 위와 같은 결과가 출력된다. ❓ 굳이 undefined로 초…