JavaScript 배열 변이 및 비변이 메서드 설명
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

배열의 변이 및 비변이 메서드 이해

카테고리

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

서브카테고리

웹 개발

대상자

  • 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() 등 최신 메서드로 변이/비변이 구분 명확화
  • 단위 테스트 시 비변이 메서드 사용으로 테스트 격리성 향상