Dev Blog

희소 배열은 어떻게 저장될까?JS의 배열은 V8 엔진에 의해 Packed, Holey로 구분되어 메모리에 저장되게 된다. Packed는 근접한 메모리에 연속성으로 반영되기에 메모리의 순서대로 인덱스를 반영하면 되지만 Holey Array의 경우는 희소배열이기 때문에 떨어져 있는 인덱스 들을 Hash Table을 이용한 참조를 통해 메모리를 효율적으로 사용할 수 있다.실질적으론 Packed 처럼 사용할 수 있는 장점이 있다. 이를 좀 더 이해하기 위해 JS 배열에서 사용하는 Hash Table을 구현해보며 이해하기로 한다.Holey 해시테이블 구현해시테이블은 보통 버킷을 2의 제곱수 크기로 시작한다. 대부분의 라이브러리가 초기값으로 쓰는 8개 버킷을 사용하기에 나도 8로 구현하기로 한다. 각 버킷은 [K,V] 쌍을 담는 배열로, 충돌이 발생하면 동일 버킷 내부 배열에 추가하는 체이닝 방식을 따른다. 따라서 keyMap의 타입은 다음과 같다.private keyMap: Array<Arr

ArrayArray는 JavaScript를 넘어 대부분의 프로그래밍 언어에서 가장 기초적인 자료구조이다. 객체나 원시 값을 순서대로 저장하고, 반복 작업을 처리하거나 다른 자료구조를 만드는 기본적인 틀로 사용된다.보통 개발을 처음 배울 때는 Array를 단순히 "[]"로 묶여 있는 값들의 집합 정도로만 생각한다. 그리고 주로 map이나 forEach로 데이터를 뿌리는 용도로만 사용하지, 내부적으로 메모리가 어떻게 할당되고 관리되는지는 잘 모르는 경우가 많다.이번 포스팅에서는 JavaScript 엔진이 배열을 구성할 때 메모리를 어떻게 효율적으로 사용하는 지에 대해 정리해 보려고 한다.배열의 메모리 할당모든 프로그래밍 변수들은 메모리에 할당이 되어 진다. 원시인지, 객체 인지에 따라 스택, 힙으로 나뉘게 된다. 주로 리스트 형식으로 많이 사용하기 때문에 주로 객체 배열을 구성하게 된다.배열은 기본적으로 “Object” 이다. Array는 index라는 key를 가진 Object며 자연

Promise프로미스는 JS에서 비동기를 동기적으로 실행 할 수 있도록 해주는 중요 단위이자 개념이다.await와 asnyc를 떠나 Promise의 상태에 대한 체이닝과 try catch의 핸들링,그리고 Promise의 메소드 들에 대해 알아 보도록 한다.Promise 상태 ⭐⭐프로미스는 성공, 실패 그리고 대기 상태로 나뉘어 상태를 반환한다.초기 상태를 pending 결과 상태를 resolve()를 따른 fullfilled , reject()로 실패를 나타내는 rejected 로 반환한다.출처- MDC예시로 함수로 가정한다면 보통 asnyc 함수 내 await를 선언한 비동기 메소드를 실행 하게 될텐데이때 Async는 즉시 프로미스를 반환하게 되고 “Pending” 상태를 유지한다.await에서 rejected 상태를 반환 되었다면 이 상태를 throw로 에러를 전파한다.이때 함수는 더이상 실행되지 않고 Async 함수의 프로미스를 “Rejected”로 반환시키며,보통 try ca

Event Loop와 Await 동작방식근래 들어 다시 JS 기본 개념에 대해 다시 톺아 보고 있다.await, async를 사용하며 동작방식에 대해서는 이해 하고있지만, 원리적으로 이해는 하고 있지 않았다.나는 await를 붙이게 되면 await가 Call Stack 을 점유하고 있기 때문에 동기적으로 실행이 가능하다 라고 생각했는데,이는 큰 오해였고 바로 잡고자 초점을 "await"에 두고 다시 정리하고자 포스팅 한다.Event Loop자바스크립트는 싱글스레드 언어로 하나의 쓰레드를 효율적으로 실행하기 위해 비동기를 통해 로직을 실행한다.비동기 함수는 Task Queue, Micro Task Queue로 구분하여 등록되게 된다.등록된 비동기는 FIFO 형식으로 처리되며 프로미스는 Micro Task Queue, 일반 비동기 함수(SetTimeOut)는Task Queue에 등록되고 Queue의 콜백이 스택에 전달되어 실행되는 비동기의 동작 방식을 이벤트 루프라 말한다.기본 적인 처

js에서 호이스팅, 컨텍스트 생성 등의 개념을 공부하게 되면 빠지지 않고 등장하는 것이 바로 "메모리" 이다.JS엔진은 메모리를 따라 값을 저장하고 , 참조 하며 이를 통해 현 JS의 모든 기능을 표현하고 있다.사실, JS뿐만이 아닌 기본적으로 모든 컴퓨터의 프로그래밍 언어는 메모리를 기반으로 동작한다라는 점에서도 동일하다.예로 "let tes = 1" 같은 구문이 변수의 선언이 어느 시점에 메모리에 할당되며 JS 기본 참조 개념이 무엇 인 지를 인지한다면더 유용하고 실용적인 로직을 구현할 수 있을 것이다.오늘은 JS 엔진이 어떻게 메모리를 활용하고 값과 참조의 개념이 무엇인지를 글쓴이의 시선으로 정의 해 본다.: JS 변수의 선언변수는 JS에서 가장 기본이 되는 저장소이다.기본적으로 메모리를 할당하여 공간을 마련하게 되며 그 안에 값을 할당하는 것을 변수의 선언이라고 이야기 한다.맞는 이야기지만, 조금 세부적으로 풀이한다면 모든 변수는 JS의 컨텍스트 생성 단계에서 "호이스팅" 에

렉시컬 환경, 환경 레코드 그리고 클로저저번 호이스팅 글에 이어 "렉시컬 환경"에 대해 톺아보고 포스팅을 남긴다.렉시컬 환경은 실행 컨텍스트 생성 단계에서 생성되는 변수, 함수가 가지는 특정 환경을 이야기 하는데이에 대한 설명은 앞 전 "호이스팅" 포스팅에서 정리를 해두었다.이번 포스팅은 렉시컬 환경이 가진 "스코프, "클로저", "환경 레코드" , "외부 렉시컬 환경 참조"에 대해 정리한다.🔗 지난 호이스팅 글 보러 가기렉시컬 환경이란?렉시컬 환경이란, 실행 컨텍스트 생성 단계에서 '호이스팅'을 통해 환경 레코드에 변수와 함수의 식별자를 우선 저장하고,이를 기반으로 스코프 체인과 클로저가 동작할 수 있도록 하는 구조를 의미한다.이 렉시컬 환경이란 묶음은 크게 두가지의 개념을 가진다☑️ 환경 레코드 ( 상수, 선언 형 레코드 / 객체 환경 레코드 )☑️ 외부 렉시컬 환경 참조 ( 스코프 포인터 )환경 레코드 ( 선언 형 레코드 / 객체 환경 레코드 )선언적 레코드와, 객체 환경 레

JS 엔진은 컨텍스트를 생성 → 실행한다.호이스팅 전에 JS엔진은 컨텍스트에 대한 “생성”과 “실행” 단계가 있는 것을 이해하면 매우 좋다.해당 생성 단계를 이해한다면 왜 var는 함수선언식의 스코프는 지키는지,let과 const에 대한 TDZ의 시점에 대해 명확해 진다.JS엔진은 우선적으로 "실행 컨텍스트 생성 단계"를 거쳐인터프리터 언어로 JS 코드 실행을 한 줄씩 순차적으로 실행하는 "실행단계" 진행된다 라는 것 기억하자.Context Add?실행 컨텍스트 생성 단계는 엔진이 JS를 인터프리터 식으로 실행할 준비하는 단계이다.이 단계에서 JS의 변수, 함수 , 스코프 등 JS의 개념에 대한 논리적인 환경 설정이 이루어 진다.이 논리적 설정은 각 변수나 함수들의 "환경레코드" 기준으로 스코프를 기록하는 "렉시컬 환경"을 설정하는 단계이다.쉽게 이야기해서 변수와 함수가 어디에 선언이 되어있는 지 위치에 대한 정보가 먼저 파악이 되어야상위 참조를 하여 클로저를 유지하던 하지 않겠는가

[JS Event Loop] 프로미스와 Await 동작방식근래 들어 다시 JS 기본 개념에 대해 다시 톺아 보고 있다. await, async를 사용하며 동작방식에 대해서는 이해 하고있지만, 원리적으로 이해는 하고 있지 않았다.나는 await를 붙이게 되면 await가 Call Stack 을 점유하고 있기 때문에 동기적으로 실행이 가능하다 라고 생각했는데,이는 큰 오해였고 바로 잡고자 초점을 "await"에 두고 다시 정리하고자 포스팅 한다.Event Loop자바스크립트는 싱글스레드 언어로 하나의 쓰레드를 효율적으로 실행하기 위해 비동기를 통해 로직을 실행한다.비동기 함수는 Task Queue, Micro Task Queue로 구분하여 등록되게 된다.등록된 비동기는 FIFO 형식으로 처리되며 프로미스는 Micro Task Queue, 일반 Async 함수는 Task Queue에 등록되고Queue의 콜백이 스택에 전달되어 실행되는 비동기의 동작 방식을 이벤트 루프라 말한다.기본 적인

프로토타입이란?해당 프로퍼티나 메서드들은 개발자가 직접 구현하지 않아도,JavaScript 엔진이 자료형에 맞게 미리 정의해둔 빌트인 프로토타입 객체를 통해 사용할 수 있다.이는 객체가 자신의 프로퍼티를 가지고 있지 않은 경우,연결된 프로토타입 객체를 따라가며 순차적으로 탐색하는 구조 덕분이며,이러한 구조를 프로토타입 체인(Prototype Chain)이라고 한다.또한, 개발자가 생성자 함수나 클래스를 통해 중간에 메서드를 정의하면,해당 메서드는 인스턴스 간에 공유되어 재사용할 수 있게 된다.이처럼 메서드를 공유하고 상속하는 방식은 JavaScript가 지닌 중요한 객체지향적 특징 중 하나다.const arr = [1,2,3,4,5];//Array.prototype에 정의된 map 메소드 사용 arr.map(e => console.log(e)); //1,2,3,4,5자료형에 따른 프로토타입 메소드 확인하기조금 더 명확하게 확인하자면 Object 프로토타입의 "Array.prototy