2025년에 자바스크립트 개발자라면 꼭 알아야 할 기능들
(waspdev.com)- 자바스크립트는 2025년에도 계속 진화 중이며, 일부 기능은 잘 알려지지 않았지만 매우 유용함
- 새로운 Iterator 헬퍼 메서드들은 대규모 데이터 변환 시 훨씬 더 메모리 효율적으로 동작
- 배열 끝에서 접근 가능한
at(), 간단한Promise.withResolvers()사용, 깊은 복사용structuredClone()등 - Set에 대한 집합 연산과 템플릿 문자열 태깅 함수, WeakMap/WeakSet 사용법은 여전히 많은 개발자가 간과하고 있음
Iterator Helper 메서드
- 기존의
arr.filter().map()처럼 체이닝하면 각 단계마다 새로운 배열이 생성되어 비효율적 -
arr.values().drop(10).take(10).map(...).toArray()처럼 이터레이터 기반 체이닝으로 개선 가능 - 주요 메서드:
-
drop(): 처음 n개 생략 -
take(): 처음 n개만 취함 -
filter(),map(),flatMap(): 배열 메서드와 유사하게 동작 -
reduce(),some(),every(),find(): 조건 테스트 및 누적 계산 지원 -
toArray(): 최종 배열로 변환
-
- Safari는 2025년 3월 31일부터 지원 시작, 아직은 모든 브라우저가 지원하지 않음
Array at()
-
arr.at(n)은arr[n]과 유사하나, 음수 인덱싱으로 뒤에서부터 접근 가능 - 예:
[10, 20, 30].at(-1)→30 -
arr[arr.length - 1]과 같은 불편한 방식 없이 마지막 요소 접근 가능
Promise.withResolvers()
- 기존 방식:
new Promise((resolve, reject) => { ... })에서 바깥에서resolve/reject저장 - 이제는:
const { promise, resolve, reject } = Promise.withResolvers()로 간결하고 직관적으로 사용 가능
String.replace() 콜백 활용
-
replace()와replaceAll()의 두 번째 인자는 문자열뿐만 아니라 콜백 함수도 허용 - 예:
"X, X, X".replaceAll("X", (match, i) => match + i)→"X0, X3, X6" - 한 번에 다양한 치환 가능 → 퍼포먼스 및 메모리 측면에서 효율적
변수 교환 (Swap)
- 기존 방식:
temp변수 사용 - 간결한 방식:
[a, b] = [b, a]로 배열 디스트럭처링으로 변수 교환
structuredClone()
-
JSON.stringify()+JSON.parse()대신 보다 정확하고 효율적인 깊은 복사 지원 - 장점:
-
NaN,undefined,bigint등도 지원 - 순환 참조도 안전하게 복사
- 큰 객체에 대해 메모리와 속도 효율성 높음
-
Tagged Template Literals
- 템플릿 문자열을 특정 함수로 파싱 가능
- HTML 이스케이프 처리 등의 동적 문자열 후처리에 유용
- 예:
escapeHtml태그 함수로<br> ${'<br>'}→<br> <br>
WeakMap / WeakSet
- 일반
Map,Set과 유사하지만:- 키는 객체만 허용 (원시 값 X)
- GC 대상이 되면 자동으로 제거됨
- 순환 참조 가능성이 있거나 부작용 없이 객체 메타데이터 저장할 때 적합
Set 집합 연산 지원
자바스크립트에서 Set 객체에 대해 다양한 논리 연산이 새로 추가됨:
-
difference(): 차집합 (A - B) -
intersection(): 교집합 (A ∩ B) -
union(): 합집합 (A ∪ B) -
symmetricDifference(): 대칭차집합 (A △ B) -
isDisjointFrom(): 겹치는 요소 없음 여부 -
isSubsetOf(): 부분집합 여부 -
isSupersetOf(): 전체집합 여부
values가 java stream api같은 느낌이어서 비교해보니 array 사이즈가 작으면 values 없이 filter 하는게 더 빠르네요. 이터레이터 기반이다보니 체이닝이 더 많아질 수록 values 한번 거치는 방식이 빨라지는 효과도 있겠네요. 벤치마크는 https://jsperf.app/dixutu 참조해주시면 됩니다.
예: "X, X, X".replaceAll("X", (match, i) => match + i) → "X0, X1, X2"
예제가 잘못되었습니다. i는 히트된 위치를 가지고 있습니다.
따라서 결과 값은 "X0, X3, X6" 입니다.