배열의 변이 및 비변이 메서드 이해
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- JavaScript 초보자 및 중급 개발자
- 배열 조작 로직 설계 시 메서드 선택 고민이 필요한 개발자
- 불변성(Immutability) 원칙을 적용하는 프론트엔드 개발자
- ES2022 이후 버전의 최신 메서드 활용 필요성 있는 개발자
핵심 요약
- 변이 메서드(
push()
,pop()
,splice()
)는 원본 배열을 직접 수정하여 메모리 참조 변경 - 비변이 메서드(
concat()
,slice()
,map()
)는 새로운 배열 생성하여 불변성 유지 - ES2023/2024부터
toReversed()
,toSorted()
,Object.groupBy()
등 신규 비변이 메서드 도입
섹션별 세부 요약
1. 변이 메서드 (Mutating Methods)
push()
: 배열 끝에 요소 추가 (원본 배열 변경)splice()
: 배열 내 요소 삭제/삽입 (인덱스 기반)sort()
: 배열 내 요소 재정렬 (기본적으로 문자열 기준)reverse()
: 배열 순서 반전 (원본 변경)fill()
: 특정 범위에 값 채우기 (변이 생성)
2. 비변이 메서드 (Non-Mutating Methods)
concat()
: 배열 병합 (새로운 배열 반환)slice()
: 배열의 일부 추출 (불변성 유지)map()
: 요소 변환 후 새로운 배열 생성filter()
: 조건에 부합하는 요소 필터링 (새로운 배열 반환)toSorted()
(ES2023) : 기존 배열 보존 상태에서 정렬 (불변성 강화)
3. ES2023/2024 신규 메서드
toReversed()
(ES2023) :reverse()
의 비변이 버전toSpliced()
(ES2023) :splice()
의 비변이 버전Object.groupBy()
(ES2024) : 객체 배열을 키로 그룹화 (비변이)
결론
- 불변성 유지를 위해
concat()
,slice()
,toSorted()
등 비변이 메서드 사용 권장 - 성능 고려 시
push()
/pop()
등 변이 메서드 사용 (메모리 효율성) - ES2023 이후 버전에서는
toReversed()
/toSpliced()
등 최신 메서드로 변이/비변이 구분 명확화 - 단위 테스트 시 비변이 메서드 사용으로 테스트 격리성 향상