놀라운 JavaScript 기능 발견

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- JavaScript 개발자

- 중급 이상의 프론트엔드/백엔드 개발자

- 라이브러리(예: lodash) 대체를 원하는 개발자

핵심 요약

• JavaScript의 Set 메서드(intersection, difference, union)로 배열 연산 간소화
• 불변 연산(toSorted, with)을 통해 원본 데이터 보존
• Object.groupBy로 배열 그룹핑을 단일 라인으로 구현
• Intl.Segmenter로 다국어 텍스트 분할 기능 제공
• 논리 할당 연산자(??=, &&=, ||=)로 조건적 할당 구현
• 모듈 내부에서 top-level await을 사용한 비동기 처리 가능

섹션별 세부 요약

1. Set 메서드 활용

• Set 객체의 intersection, difference, union 메서드로 배열 연산 구현
• isSubsetOf, isSupersetOf 등 세트 비교 메서드 제공
• Map 객체도 size, has(), keys() 인터페이스를 통해 Set 메서드 사용 가능

2. 불변 연산 메서드

• toSorted(), toReversed() 등으로 원본 배열 변경 없이 정렬/변경
• with(index, value)로 배열 요소 교체 시 원본 보존
• 연쇄적 조작(toSorted().with()) 가능

3. `Object.groupBy` 사용

• Object.groupBy(array, callback)로 배열 그룹핑
• 키값은 동적 계산 가능(예: 가격 범위 분류)
• 기존 reduce 함수 대체 가능

4. `Intl.Segmenter` 기능

• 공백 없는 언어(한국어, 일본어 등)의 텍스트 분할 지원
• granularity 옵션으로 글자, 단어, 문장 단위 분할 가능
• 브라우저 내부 처리로 서버 측 라이브러리 필요 없음

5. 논리 할당 연산자

• ??=: nullish 값일 경우만 할당
• &&=: truthy 값일 경우만 할당
• ||=: falsy 값일 경우만 할당
• x ??= y로 x = x || y 패턴 대체

6. `top-level await` 활용

• 모듈 파일에서 await 사용 가능
• fetch, initDatabase 등 비동기 초기화 코드 직접 작성
• 기존 즉시 실행(async function) 패턴 대체

결론

• Set, toSorted, Object.groupBy, Intl.Segmenter 등으로 라이브러리 의존성 감소
• 불변 연산과 논리 할당 연산자를 통해 코드 가독성 향상
• top-level await으로 모듈 초기화 로직 간결화
• 현대 JavaScript는 기존 인프라(예: lodash, i18n 라이브러리) 대체 가능
• "vanilla JavaScript"로도 기능 구현 가능"이라는 인식 전환 필요