자바스크립트/모던 자바스크립트

모던 자바스크립트, 프록시 (Proxy)

프록시 (Proxy) 객체란? 프로그래밍적 정의 타겟 오브젝트를 정하고 타겟 오브젝트를 감싸는 객체이다. 타겟 객체의 기본 작업 (fundamental operation)을 가로채 재정의하는 기능이 있다. 프록시에 의해 해당 객체의 기본 작업 수행 시 트랩 (trap) 이라 불리는 핸들러 함수가 호출된다. 현실 세계와의 비유 프록시는 대리라는 뜻으로 현실에 비유하자면 연예인의 매니저 같은 것이다. 학교 축제에 블랙핑크의 제니를 섭외하고 싶다고 해서 제니의 연락처를 직접 알 수는 없다. 소속사를 통해 제니의 매니저와 통화를 먼저 거치고 가격, 시간 등에 대한 협의가 되어야 비로소 학교 축제에서 제니를 볼 수 있을 것이다. 기본 작업 (fundamental operation) 이란? 기본 작업을 가로챈다고 ..

모던 자바스크립트, 모듈 3 - 트리 셰이킹과 번들링

트리 셰이킹이란? 모듈에서 사용되지 않는 데드 코드 제거(dead code elimination) 의 한 형태이다. 나무를 세게 흔들면 죽은 가지만 바닥으로 떨어지는 이미지에서 용어를 차용해왔다. 정적 분석을 통해서 모듈에서 불러온 어떤 요소들이 현재 사용되지 않는지 알 수 있다. 이 사용되지 않는 코드는 추후 번들링에 의해서 사라지게 될 것이다. 동적 임포트와 트리 셰이킹 동적 임포트인 import() 를 한번만 사용하더라도 번들러는 트리 셰이킹을 수행하기 어려워진다. 정적 분석이 불가능하기 때문에 런타임에서야 어떤 코드를 지워도 되는지 알 수 있기 때문이다. 번들링 번들링은 예전엔 구형 브라우저에도 신형 코드가 호환될 수 있도록 하는 목적으로 많이 사용했다. 번들링을 통해 트리 셰이킹도 가능하다. 번..

모던 자바스크립트, 모듈 2 - 모듈의 동작 방식

모듈 소개 모듈이 있기 전까진 와 같은 태그를 통해 모든 스크립트를 불러왔다. 이러한 방식은 이름 충돌, 복잡한 종속성, 파일 크기 문제 등의 이슈를 불러오게 되었다. 모듈이 있기 전의 해법 모듈이 있기 전에도 글로벌 영역을 더럽히지 않기 위해 네임스페이스를 나누고자 하는 여러 노력이 있었다. 네임스페이스 객체 이용하기 이런 객체를 선언하거나 이런 객체를 반환함으로써 스코프를 나눴다. var MyNamespace = { someVariable: "value", someFunction: function () { // function code here }, }; IIFE 이용하기 덩치가 큰 함수 하나를 즉시 실행시켜 이용하는 방식이다. (function () { var privateVariable = "se..

모던 자바스크립트, 모듈 1 - import 와 export 방식

명명된 이름으로 모듈화하기 (named export, named import) 이름을 지어 export 하고 그 이름을 받아 import 하는 방식이다. 모듈을 만들었을 때 변화에 가장 유연하기에 가장 선호되어야 하는 방식이다. 모듈 배포 후 여기저기서 의존한 이후에도 업데이트하는 것이 상대적으로 자유롭다. 네임드 익스포트 혹은 명명된 익스포트 (named export) 변수, 함수, 클래스 등을 내보낼 수 있다. as 를 이용해 별칭으로 내보내는 것도 가능하다. 이를 이용해 {... as default} 로 기본 익스포트를 만들 수는 있지만 추천되는 방법이 아니다. export { a, b } 혹은 import {a, b} from "/abc.js" 는 디스트럭처링 처럼 생겼지만 전혀 아니다. // 내..

모던 자바스크립트, 위크 맵(WeakMap) 과 위크 셋(WeakSet)

위크맵 (WeakMap) 키를 메모리에 유지하지 않고 키와 관련된 값을 저장할 수 있다. 만일 키를 참조하는 것이 사라지면, 가비지 컬렉트 때 해당 키가 사라진다. 위크맵은 Iterable 이 아니다. Map 은 이터러블이었지만, WeakMap 은 아니다. 이러한 특성 때문에 키를 알아야만 값을 가져올 수 있다. Iterator 를 제공하면 제공된 Iterator 에 의해 키가 계속 참조되고, 영원히 가비지 컬렉트 될 수 없기 때문이다. 위크맵이 제공하는 메서드 has(): 키의 존재 여부 반환 get(): 키에 대한 값 반환, 없다면 undefined delete(): 키 삭제 성공하면 true 실패하면 false WeakMap 은 약한 참조를 이용하는 만큼, 키를 모르면 참조할 수 없기 때문에 키에 ..

모던 자바스크립트, 셋 혹은 세트 (Set)

셋(Set) 이란? 고유한 값의 모음이다. 맵과 동일하게 동등성 비교에 SameValueZero 알고리즘이 적용된다. Iterable 이다. 값을 넣은 순서대로 순회한다. 기본 메서드 add(): 값을 추가할 때 사용한다. clear(): 맵의 모든 엔트리를 삭제할 때 사용한다. delete(): 하나의 엔트리를 삭제할 때 사용한다. has(): 해당 키가 있는지 확인할 때 사용한다. get(): 해당 키에 대응하는 value 를 얻을 때 사용한다. keys(): 모든 키를 MapIterator 형태로 얻는다. entries(): 키 밸류를 엔트리 형태로 얻는다. forEach(): forEach 형태로 순회한다. size: 내부에 몇개의 값이 있는지 알려준다. 동등성 비교 확인하기 맵과 동일하게 동등성..

모던 자바스크립트, 맵 (Map)

맵이란? 키/밸류 쌍을 저장한다. 이 쌍을 합쳐서 엔트리라고도 한다. 그래서 엔트리들을 저장한다고도 할 수 있다. 가끔 Map 자료구조가 적합한 곳에 오브젝트를 대신 사용하는데, 이는 좋지 않은 선택이다. 참고자료: Object 와 Map 의 차이 Map 의 탄생 ES2015+ 에서 맵(Map), 셋(Set), 위크맵(WeakMap), 위크셋(WeakSet) 이 생겼다. Set 은 중복되지 않은 값의 집합을 저장한다. 위크맵은 키가 객체이고 객체의 참조(strong reference)가 사라지면 가비지콜렉트된다. 위크셋은 위크맵의 Set 버전이다. Map 의 기본 메서드 set(): 값을 설정할 때 사용한다. clear(): 맵의 모든 엔트리를 삭제할 때 사용한다. delete(): 하나의 엔트리를 삭제..

모던 자바스크립트, 4가지 동등성 비교 알고리즘

동등성 비교 ES5 이전 JS 에서는 보통 동등성 비교에 2개의 부호만 사용했다. == 와 === 이다. ES6 에서 Object.is() 가 나왔다. 이 메서드는 자바스크립트 언어 스펙을 정하는 위원회의 앞으로의 방향을 나타내기 때문에 중요하다. 동등성 알고리즘 정리 그렇다면 동등성 알고리즘은 어떤 것들이 존재할까? IsLooselyEqual: == IsStrictlyEqual: === SameValue: Object.is(), Object.prototype.defineProperty() 에서의 빌트인 동등성 비교 연산 SameValueZero: Array.prototype.includes() 혹은 Map 에서의 빌트인 동등성 비교 연산 프리미티브에 대한 처리 때문에 이렇게 나뉘게 되었다. == 의 특..

모던 자바스크립트, Reflect (리플렉트) 객체란?

리플렉트 (Reflect) 란? 자바스크립트의 built-in object 이다. 일반적으로 프록시 객체의 핸들러에서 기본 동작을 제공하기 위해서 사용된다. Object 가 가지는 메서드들을 비슷하게 가진다. defineProperty() getOwnPropertyDescriptor() getPrototypeOf() setPrototypeOf() preventExtensions() 생성자로 생성할 수 없는 객체이다. (it's not constructible) Reflect.xxx() 와 같은 정적 메서드를 이용하기 위한 객체이다. new Reflect() 는 아무런 의미가 없다. 가로챌 수 있는 (interceptable) 자바스크립트 연산에 대한 메서드를 제공한다. interceptable 의..

모던 자바스크립트, TypedArray (타입이 있는 배열)

자바스크립트 기본 배열의 문제점 자바스크립트의 배열은 컴퓨터 과학에서 정의하는 일반적 배열이 아니다. 자바스크립트의 배열은 특수처리가 된 객체이다. 배열 인덱스, length, Array.prototype 에서 상속한 메서드들을 가진 객체이다. 타입이 있는 배열 (TypedArray) ES2015 에 생겨났다. 파일 읽기/쓰기, 그래픽 작업, 수학 API 등에 쓰인다. TypedArray 와 기존 배열과의 차이 값이 항상 프리미티브 숫자 값이다. 8비트 정수 혹은 32비트 부동 소수점 등이다. 배열 내부의 모든 원소는 동일한 타입이다. 배열을 한번 만들면 길이를 변경할 수 없다. 지정된 바이너리 양식으로 연속 메모리 버퍼에 저장된다. 중간에 공백이 있을 수 없다. 성긴 배열 (sparse array) 이..

모던 자바스크립트, ES2019 의 stable 내장 정렬 (Array.prototype.sort)

Array.prototype.sort() 의 변화 배열을 정렬할 때 많이 사용되는 메서드이다. ES2019 이후에 큰 변화가 있었다. ES2019 이전의 Array.prototype.sort() ES2019 이전의 스펙에서는 stable 한 정렬이 요구사항이 아니었다. 정렬 조건이 동일한 엘리먼트가 정렬 이전의 순서를 지키지 않아도 됐다는 뜻이다. 이러한 스펙은 몇몇 경우에 예상치 못한 결과를 초래했다. ES2019 과 그 이후의 Array.prototype.sort() 정렬 조건이 동일한 엘리먼트가 정렬 이전의 순서를 지켜야만 하는 것이 요구사항이 됐다. 이를 위해 Tim Sort 라는 정렬 알고리즘이 도입되었다. 병합 정렬과 삽입 정렬이 혼합된 것이다. 작은 배열이나 큰 배열 둘 다 성능이 좋다. 이..

모던 자바스크립트, 편의 유틸 배열 메서드

새로운 배열 함수 추가 ES2015+ 이후에 배열에서 새로운 메서드가 많이 추가되었다. Array.of() 이산 인수로 전달한 값을 배열로 만들어 반환해준다. const arr = Array.of("a", "b", "c"); console.log(arr); // ['a', 'b', 'c'] 기능은 알겠는데, 언제 유용할까? 사실 배열 리터럴([]) 이 더 간략하다. 서브 클래스로의 활용 class MyArray extends Array { print() { console.log(`[${this.join(", ")}]`); } sum() { return this.reduce((ac, cur) => ac + cur, 0); } } const myArray = MyA..