Persistence

자바스크립트는 새로운 피처를 계속 도입하며 진화한다. 하지만 일반적으로 자바스크립트 엔진은 더 느리게 이를 반영한다. 구형 엔진에서 새로운 자바스크립트 피처를 사용하고 싶으면 어떻게 해야할까? transpiler polyfills transpiler 소스코드를 구현 엔진이 이해할 수 있는 소스코드로 변형한다. 예를 들어 es2020로 쓰인 코드를 es5로 변경하여 es5만 지원하는 구형 엔진에서도 돌아갈 수 있도록 한다. // 트랜스파일러를 돌리기 전 height = height ?? 100; // 트랜스파일러를 돌린 이후 height = (height !== undefined && height !== null) ? height : 100; 가장 유명한 트랜스파일러는 babel이다. webpack 같은 ..

commonJS commonJS는 Node.js의 디폴트 모듈 시스템이다. require(), module.exports 문법을 사용한다. commonJS 문법은 런타임에 파싱되므로 require 는 코드 어디에서나 사용할 수 있다. if 문 안에서도, loop 안에서도 사용할 수 있다. commonJS는 sync하게 하나씩 순차적으로 모듈을 로드하기 때문에 큰 어플리케이션에서는 퍼포먼스 이슈가 있을 수 있다. ES module (ESM) ES module은 자바스크립트 공식 모듈 시스템이고 거의 모든 모던 웹 브라우저가 ES module을 지원한다. 다만 Node.js에서는 commonJS가 디폴트였고, ESM은 실험적으로만 제공하다가 v13.2.0 에서부터 ESM을 stable로 제공하기 시작했다. ..

Browsing Context 브라우저가 Document를 표시하는 환경이다. 모던 브라우저에서 이는 보통 tab 단위이지만 window나 iframe, frame이 될 수도 있다. 각 브라우징 컨텍스트는 특정한 오리진, active document의 오리진, 여태까지 전시한 도큐먼트를 기억하는 히스토리를 차례대로 저장하고 있다. 브라우징 컨텍스트 간의 소통은 매우 제한적이지만, 같은 오리진을 가진 브라우징 컨텍스트 사이에서는 BroadcastChannel을 오픈해서 사용할 수 있다. BroadcastChannel 같은 오리진의 브라우징 컨텍스트끼리 소통할 수 있는 방법이다. 채널을 오픈한 다음 메세지를 보내면, 해당 채널을 구독하는 컨텍스트에서 메세지를 받아볼 수 있다. 아래처럼 채널을 생성할 수 있다..

스코프랑 클로저에 대해 전에도 정리했었지만, 이번엔 렉시컬 환경이라는 개념과 함께 정리하려고 한다. Lexical Environment의 개념 Lexical Environment는 코드 block, function, script를 실행하기 앞서 생성되는 특별한 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체다. 즉 우리가 소스 코드를 실행하면서 참조가 필요한 변수의 값을 이 Lexical Environment 라는 객체에서 식별자 이름을 키로 찾는다고 보면 된다. 실행 컨텍스트(execution context)와의 관계? 실행 컨텍스트는 실행하고 있는 함수를 트래킹하기 위한 특별한 자료 구조다. 현재 실행하고 있는 함수 내의 현재 변수 상태와 this의 값 등을 저장하고 있..

for of를 적용할 수 있는 객체를 이터러블(Iterable)이라고 부른다. for of 를 적용할 수 있으려면(= 이터러블이려면) 해당 객체는 Symbol.iterator 이라는 메서드를 갖고 있어야 한다. for of를 사용하려면 Symbol.iterator 메서드를 호출한다. 위 메서드는 iterator 를 리턴해야 한다. 이터레이터는 next 메서드를 갖고 있는 객체다. next 메서드를 호출하면 {done: Boolean, value: any} 이런 모양을 가진 객체를 리턴해야 한다. done 프로퍼티 값이 true면 이터레이션이 끝난 것이고, 아니라면 value가 다음 value가 된다. let range = { from: 1, to: 5 }; range[Symbol.iterator] = f..

자바스크립트에서 값을 어떻게 비교하는지 간단하게 짚고 넘어가자면 아래와 같다. 밑으로 갈수록 엄격하다. == 두 개를 비교할 때 타입 변환을 한다. 그리고 IEEE 754를 따르기 위해 NaN과 -0, +0에 대한 특별한 핸들링을 한다. (그래서 NaN != NaN, -0 == +0) === NaN, -0, +0에 관한 핸들링을 포함하여 == 와 동일한 비교를 하지만 타입 변환을 하지 않는다. 객체의 동일성을 비교할 때 reference가 같은지 체크한다. Object.is NaN, -0, +0에 대한 핸들링도 하지 않고 타입 변환도 하지 않는다. NaN, -0, +0에 대한 부분을 제하면 === 와 같다. (e.g. Object.is(NaN, Number.NaN) === true) Ref https:/..

자바스크립트 객체의 property name은 string이거나 Symbol이다. 그러므로 string이나 Symbol이 아닌 다른 value로 객체의 property에 접근한다면 string으로 강제형변환된다. let object = {}; object['1'] = 'value'; console.log(object[1]); // 'value' 위에서 bracket notation으로 object[1]로 접근할 때, 1은 number 타입이므로 string으로 강제형변환된다. 즉 object['1'] 을 호출한 것과 동일하게 되어 'value' 를 출력한다. (참고) bracket notation이 아닌 dot notation으로 접근할 때는 syntax error가 발생한다. (e.g. object.1..

자바스크립트로 알고리즘을 풀다가 tc 하나가 계속 시간 초과가 나와서, 정말 혹시나 하고 양수를 내림하는 부분에 parseInt 대신 Math.floor로 고쳤더니 바로 통과가 되었다. 자바스크립트로 positive decimal number를 내림할 때 Math.floor랑 parseInt 를 사용할 수 있는데, 둘 중에 하나를 택해야 한다면 Math.floor 를 사용하자. 왜냐면 얘가 훨씬 더 빠르다. 그리고 Math.floor 보다는 ~~ 라는 연산자를 사용하면 더 빠르다. 이 사이트 에서 퍼포먼스 테스트를 해볼 수 있는데, Math.floor가 parseInt보다 훨씬 빠르고, ~~ 연산자가 Math.floor 보다 조금 더 빠르다. 참고로 ~ tilde 연산자는 Bitwise NOT 이라는 자..

자바스크립트는 싱글 스레드 언어다. 즉 콜 스택이 한 개고, 한 번에 한 가지 일밖에 처리하지 못한다는 뜻이다. one thread == one call stack == one thing at a time 콜스택 function square(n) { return n * n; } function printSquare(n) { var squared = square(n); console.log(squared); } printSquare(4); 콜 스택은 프로그램의 어디가 실행되고 있는지 기록하는 자료 구조다. 만약 함수를 실행하게 되면 그 함수의 실행 컨텍스트를 기록하고(콜 스택에 푸시하고), 그 함수가 반환되면 콜 스택에서 팝한다. 이건 어디까지 했더라? 랑 비슷한 느낌이다. 위 예시처럼 함수 안에 함수가 ..

this를 이미 한 차례 정리하긴 했지만(https://developer-alle.tistory.com/327) 이번에는 this 바인딩 예시 위주의 포스팅을 해보려고 한다. this의 개념 객체지향 프로그래밍에서 객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)을 나타내는 메서드를 하나의 단위로 묶은 자료 구조다. 동작을 나타내는 메서드는 자기 자신이 속한 객체의 상태를 참조하고 변경할 수도 있어야 한다. 이 때, 자기 자신이 속한 객체를 참조하기 위한 식별자가 this다. 즉 this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 식별자다. this의 결정 방식 다른 언어들과는 다르게 자바스크립트에서 this는 함수가 호출되는 방식에 따라 동적으로 결정된다..

const obj = { log: ['a', 'b', 'c'], // 메서드 latest() { if (this.log.length === 0) { return undefined; } return this.log[this.log.length - 1]; } }; console.log(obj.latest()); // c const obj = { log: ['a', 'b', 'c'], // getter get latest() { if (this.log.length === 0) { return undefined; } return this.log[this.log.length - 1]; } }; console.log(obj.latest()); // Uncaught TypeError: obj.latest is not..

자바스크립트는 다른 언어와 다르게 정수 값과 실수 값을 구분하지 않는다. 모든 숫자를 64비트 실수로 표현한다. (double이라고 생각하면 될 듯하다) 하지만 배열 인덱싱이나 비트 연산과 같은 특정한 연산은 32비트 정수로 수행한다. 자바스크립트는 10진수 리터럴 외에도 16진수 값을 인식한다. (e.g. 0xff) 자바스크립트의 산술 연산 자바스크립트의 산술 연산은 오버플로(Overflow), 언더플로(Underflow), 0으로 나누는 에러를 발생시키지 않는다. 산술 연산의 결과가 표현할 수 있는 값보다 더 큰 경우 양수에서는 Infinity라는 무한대 값을 출력하고, 음수에서는 -Infinity를 출력한다. 언더플로는 표현할 수 있는 가장 작은 값보다 0에 더 가까운 값인 경우 발생하는데, 이 때..

자바스크립트 프로그램은 Unicode 문자 집합을 사용해 작성된다. 식별자(identifier)는 간단히 말해 이름이다. 변수나 함수에 이름을 붙이거나 루프에서 쓸 레이블을 붙이는 데 사용된다. 자바스크립트 식별자는 알파벳, 언더바(_), 달러($) 사인으로 시작하여야 한다. 자바스크립트에서의 세미콜론(;)은 문장과 문장을 구분하는 용도이다. 만약 프로그래머가 세미콜론을 작성하지 않고 줄바꿈을 한 경우에는, 자바스크립트 인터프리터는 이어서 해석할 수 있는 데까지 최대한 길게 끊어서 줄바꿈을 세미콜론으로 인식한다. var a var b = 3 a // undefined b // 3 예를 들어 첫 번째 예제에서는 var a = 3; a; 로 해석하여, a를 부르면 3을 돌려준다.단 이것에 예외가 2가지 있다..

ArrayBuffer 자바스크립트의 어레이 버퍼는 다른 언어에서의 '바이트 어레이'와 같은 개념이다. 바이너리 데이터를 저장하는, 바이트들로 구성된 배열이다. 어레이 버퍼는 직접적으로 조작할 수는 없지만 typed array object나 DataView 객체를 만들어서 버퍼 컨텐츠를 저장할 수 있다. 생성자 안에 길이를 인자로 주면 그 길이 만큼의 어레이 버퍼가 생성된다. 아니면 이미 존재하는 데이터로부터 어레이 버퍼를 생성할 수도 있다. 예를 들어 Base64 스트링으로부터 생성할 수 있다. (Base64란 이진 데이터를 텍스트(아스키 스트링)로 인코딩하는 방법을 말한다.) 아까 어레이 버퍼는 직접 조작할 수 없다고 했으므로 typed array를 생성해서 이를 다뤄볼 수 있는데, typed arra..

타입과 인터페이스는 대부분 기능이 비슷하지만, 가장 구분되는 점은 타입은 만들어지고 나면 새로운 프로퍼티를 추가할 수 없지만, 인터페이스는 항상 가능하다는 것이다. 인터페이스 확장 with extends interface Animal { name: string } interface Bear extends Animal { honey: boolean } const bear = getBear() bear.name bear.honey 타입 확장 with intersection type Animal = { name: string } type Bear = Animal & { honey: Boolean } const bear = getBear() bear.name bear.honey 이렇듯 확장해서 새로운 타입 또는..