2021년 11월 셋째 주 기록

1. 자바스크립트에서 객체 리터럴보다 JSON.parse로 객체를 선언하는 것이 더 빠르다. (약 1.7배)

자바스크립트 엔진이 해석하기에 객체 리터럴보다 JSON이 훨씬 더 간단하기 때문이라고 함.

 

객체 리터럴의 프로퍼티 값으로는 숫자, 문자열, 불리언, 객체, 배열 등 다양한 리터럴이 올 수 있다.

반면 JSON.parse는 그저 단일 문자열 인수를 갖는 함수일 뿐이므로 훨씬 경우의 수가 간단.

 

또한 자바스크립트 파서가 객체 리터럴에 사용되는 '{' 를 마주하면 생각해야 하는 경우의 수가 꽤 많다.

반면 JSON.parse의 문자열 안에서는 '객체의 시작'이냐, '유효하지 않은 JSON'이냐만 생각하면 된다.

즉, JSON보다 자바스크립트 문맥을 해석하는 게 훨씬 민감하고 까다롭다.

 

하지만 객체 리터럴이 가독성이 훨씬 뛰어나므로 수동으로 직접 최적화를 해주기보다는

Babel 플러그인을 사용하는 방식으로 적용해보면 좋을 듯.

왜 JSON.parse로 객체를 선언하는 방법이 더 빠를까? - 재그지그의 개발 블로그

 

2. async/await의 동작 방식

async/await = Generator + Promise.

async 함수는 Generator 함수, await 키워드는 yield 키워드로 변환된다.

await 키워드를 async 함수 내부에서만 사용할 수 있는 것도,

yield 키워드를 Generator 함수 내부에서만 사용할 수 있는 것과 동일한 맥락.

 

async/await을 Babel로 변환해보면 _asyncToGenerator라는 함수와, 그 내부의 step 함수가 생성된다.

step 함수는 우리가 만든 async/await을 generator/yield로 변환한 함수를 제어하는 제 3의 함수.

step 함수가 실행되면 yield에서 멈췄다가, Promise가 pending에서 fulfilled가 되면 다시 step 함수를 재귀 호출.

그러면 다음 yield(await)에서 또 멈추고, Promise가 fulfilled되면 또 step 재귀호출... 계속 반복.

이렇게 해서 비동기 동작이 완료될 때까지 멈췄다가 다음 비동기 동작을 수행하는 게 가능해지는 것.

async-await 원리

시각화 자료와 함께.

[ 번역 ] 자바스크립트 시각화 : 비동기 처리

 

3. 자바스크립트의 객체는 ES6부터 프로퍼티 순서를 보장할 수 있게 되었다.

ES6부터는 Object.keys, Object.getOwnPropertyNames, Reflect.ownKeys 등의 메서드들이

ownPropertyKeys라는 내부 메서드에 의존하도록 바뀌었다고 함.

그래서 ownPropertyKeys의 성격에 따라 Number(Integer) > String > Symbol 의 순서가 보장된다고 함.

Integer 내에서는 숫자 순서 그대로(0, 1, 2, 3...), String과 Symbol은 프로퍼티가 생성된 순서라고 함.

물론 ES6에 와서 변경된 것이므로, ES5로 transpile하면 순서 보장이 깨질 수도 있다고 한다.

Property order is predictable in JavaScript objects since ES2015

 

4. CSS transition, opacity 성능 > requestAnimationFrame 성능

= 컴포지터 쓰레드(Compositor Thread)와 GPU의 이점

Animation Performance 101: Browser Under the Hood | Viget

 

5. 우테코 크루인 도비가 다라쓰 다크모드 관련 피드백을 반영해줬다.

신속한 피드백 반영 감사합니당

빨리 Babble에도 반영해야지.