올해 확정된 ECMA 2023은 총 4가지 제안이 수락되어 적용되었고, 배열에 대한 제안 2가지, 해시뱅, WeakMap 으로 프론트엔드 개발자가 알아두면 좋은 제안은 총 3가지 입니다. 전체 내용을 정리하면서 어떤 기능들이 추가됐는지 확인해봅시다.

마지막 기준 배열 찾기

배열과 형식화 배열(Typed Array)에 새로운 찾기 메서드가 추가되었습니다. Array.prototype.findLast, Array.prototype.findLastIndex 두가지로, 배열의 마지막부터 시작해 찾게되는 메서드입니다. 기존에 있던 find, findIndex 메서드는 모두 함수를 받고 있어 이 스펙을 직접 구현하는건 가능했지만, 함수의 명확한 명명 및 사용을 위해 이같은 제안이 생겼다고 합니다.

const arr = ['a', 'b', 'a', 'b'];
arr.findIndex((it) => it === 'a') // 0
arr.findLastIndex((it) => it === 'a') // 2

Array.prototype.findLastIndex 예제

const arr = [{ age: 10, name: '홍길동' }, { age: 10, name: '김철수' }];
arr.find((it) => it.age === 10) // { age: 10, name: '홍길동' }
arr.findLast((it) => it.age === 10) // { age: 10, name: '김철수' }

Array.prototype.findLast 예제

복사하여 배열 변경

기존 JS에는 배열에 대한 다양한 메서드가 존재합니다. sort, map, concat, splice 등 사용되는 메서드가 많은데 이들에겐 문제점이 존재합니다. 각 메서드는 리턴되는 값이 다르고, 원본 배열을 수정하는 메서드도 존재합니다. 이는 불규칙적이며, 혼란을 야기하기도 합니다. 원본 배열을 수정하는 메서드들을 수정하지 않고, 새로운 배열을 이용해 메서드를 사용할 수 있도록 새로운 매서드가 추가되었습니다.

Array.prototype.toReversed

이 메서드는 기존에 있던 Array.prototype.reverse 라는 메서드의 복사 메서드입니다. 사용 방법을 기존과 동일합니다.

const arr = [1, 2, 3, 4];
arr.toReversed() // [4, 3, 2, 1]
arr // [1, 2, 3, 4]

Array.prototype.toReversed 예제

Array.prototype.toSorted

이 메서드는 기존에 있던 Array.prototype.sort 라는 메서드의 복사 메서드입니다. 이 또한 사용방법은 기존과 동일합니다.

const arr = [1, 2, 3, 4];
arr.toSorted((a, b) => a - b) // [4, 3, 2, 1]
arr // [1, 2, 3, 4]

Array.prototype.toSorted 예제

Array.prototype.toSpliced

이 메서드 또한 리턴을 제외한 기존 Array.prototype.splice 와 기능이 동일합니다.

const arr = [1, 2, 3, 4];
arr.toSpliced(1, 2, 99) // [1, 99, 4]
arr // [1, 2, 3, 4]

Array.prototype.toSpliced 예제

Array.prototype.with

새롭게 생긴 메서드입니다. 복사한 새로운 배열을 주어진 배열의 요소를 주어진 다른 요소로 바꾸는 메서드입니다. 예제를 보시는게 이해하기 편하실 겁니다.

const arr = ['a', 'b', 'c', 'd'];
arr.with(0, 'ZZ') // ['ZZ', 'b', 'c', 'd']
arr.with(4, 'ZZ') // RangeError: Invalid index : 4
arr // ['a', 'b', 'c', 'd']

Array.prototype.with 예제

WeakMap의 키를 심볼로 사용

WeakMap은 지원 범위 때문에 실제로 잘 쓰이지 않지만, Map의 구조상 고질적인 메모리 누수로부터 벗어날 수 있는 대체제입니다. Map은 내부적으로 배열을 키 배열, 값 배열 두가지를 가지고 있습니다. 이 배열에 넣다보니 Map의 키와 값은 언제나 GC의 대상에서 벗어나게 되며, 이는 메모리 누수로 이어지게 됩니다. 이를 해결하기 위해 WeakMap의 키는 언제나 GC에 대상이 될 수 있도록 설계 되었으며, 키는 언제나 Object가 됩니다. 하지만 고유한 값을 갖는 것이 목표인 WeakMap는 Object가 키가되는 것이 오히려 문제가 되어 이번 제안이 생겼습니다.

심볼은 GC에 대상이 될 수 있는 원시 타입입니다. 또한 언제나 새로운 값으로 나올 수 있는 특성을 가진 심볼이기 때문에 이는 WeakMap의 한계를 해결 할 수 있는 대상이 되었습니다. 그러나 등록된 심볼(Symbol.for('description') 을 통해 생성된 심볼)은 GlobalSymbolRegistry에 등록되어 GC에 정리되지 않아 영구히 살아있는 값이 되므로, WeakMap의 설계와 반대되는 특성 때문에 제외됩니다.

그럼 등록된 심볼과 유사한 알려진 심볼 (Well-Known Symbol)은 어떻게 되는지 궁금하실 겁니다. 이 심볼은 허용됩니다. 현재로서는 알려진 심볼을 구분하는 방법이 존재하지 않기 때문이라고 합니다.

const weak = new WeakMap();

const key = Symbol('test');
weak.set(key, 'abcd');
weak.get(key) // 'abcd'

// 등록된 심볼
const invalidKey = Symbol.for('invalid');
weak.set(invalidKey, '1234') // TypeError: Invalid value used as weak map key

// 알려진 심볼
weak.set(Symbol.iterator, '1234') // Allowed!!

WeakMap의 키를 심볼로 사용하는 예제

Hashbang 지원

해시뱅은 유닉스 시스템에서 스크립트 파일을 실행 파일처럼 사용 할 수 있도록 도와주는 지시어입니다. 해시뱅 뒤에 어떤 프로그램을 사용하여 실행 할 건지 작성해줄 수 있는데, 이 스펙이 JavaScript의 스펙 문서상으로는 없었고 암묵적으로 유닉스 시스템에서 종종 사용되어 왔습니다. 이를 정확한 표준으로 잡기위한 제안입니다.

#!/usr/bin/env node
console.log('This is Hashbang example');

Hashbang 예제

마무리

그 동안 배열의 불변성을 지키기 위해 배열을 복사하는 과정을 거쳐 사용해왔던 메서드들이 복사 과정이 포함된 메서드로 새롭게 들어오게 되면서 코드 작성이 한결 간결해졌습니다. 이 내용들은 앞으로 사용되는 일이 많을 것으로 예상되고, 현재 제 개인 프로젝트도 리팩토링을 진행할만큼 중요한 변경사항이었습니다.

추가로 ECMA Script 제안 기록은 공식 깃허브에 저장되어있습니다. 해당 리포지토리를 기준으로 작성되는 살펴보기 글입니다. 직접 보고 싶으시다면, 다음 깃허브 링크를 통해 확인하시고, Expected Published Year 항목에 원하는 ECMA 버전을 확인하시면 됩니다.