[자바스크립트(Java Script)]3.자바스크립트 불변성: 배열 다루기

Apr 14, 2025

Contents

1. 깊은 복사(Deep Copy)2. 배열에 요소 추가하기 3. 배열에서 요소 찾기 (filter 활용)4. 배열에서 요소 삭제하기 5. 배열 요소 수정하기 (map 활용)

자바스크립트 배열은 기본적으로 가변적(mutable)입니다. 즉, 생성 후에도 변경이 가능합니다. 하지만 예상치 못한 부작용을 방지하기 위해 불변성(immutability)을 유지하고 싶은 상황이 많습니다. 이 글에서는 원본 데이터를 변경하지 않고 배열을 다루는 일반적인 방법들을 살펴보겠습니다.


//불변

let list = [1,2,3];

//1.깊은 복사
let deepcopy = [...list]; //...전개연산자
deepcopy.push(4);

console.log("list",list);
console.log("deepcopy",deepcopy);

//2. 추가
let appendList = [...list,4];
let preperList = [0,...list];

console.log("appendList",appendList);
console.log("preperList",preperList);

//3.찾기
let searchList = list.filter((n)=>n==2);
console.log("searchList",searchList);

//4.삭제
let deleteList = list.filter((n)=>n!=2);
console.log("deleteList",deleteList);

//5.수정
let updateList = list.map((n)=>{
    if(n==2){
        return n*10;
    }else{
        return n;
    }
});

// let updateList = list.map((n)=> n==2 ? n*10  : n);

console.log("updateList",updateList);

1. 깊은 복사(Deep Copy)

배열을 직접 수정하지 않기 위해 가장 먼저 해야 할 일은 배열의 복사본을 만드는 것입니다.

자바스크립트에서 깊은 복사를 쉽게 수행하는 방법은 /전개 연산자(…)를 사용하는 것입니다.


let list = [1, 2, 3];

// 전개 연산자를 사용한 깊은 복사
let deepcopy = [...list];
deepcopy.push(4);

console.log("list", list);        // [1, 2, 3] - 원본은 변경되지 않음
console.log("deepcopy", deepcopy); // [1, 2, 3, 4]

전개 연산자(...)는 원본 배열의 모든 요소를 포함하는 새로운 배열을 생성하여 참조 연결을 끊어줍니다.

2. 배열에 요소 추가하기

배열에 새로운 요소를 추가할 때 push()를 사용하면 원본 배열이 변경됩니다.

대신, 새 배열을 반환하는 전개 연산자(...)를 활용하는 것이 좋습니다.


let list = [1, 2, 3];

// 끝에 요소 추가
let appendList = [...list, 4];

// 처음에 요소 추가
let prependList = [0, ...list];

console.log("appendList", appendList);   // [1, 2, 3, 4]
console.log("prependList", prependList); // [0, 1, 2, 3]

3. 배열에서 요소 찾기 (`filter` 활용)

배열에서 특정 요소를 찾을 때 filter()를 활용하면 불변성을 유지하면서 새로운 배열을 생성할 수 있습니다.


let list = [1, 2, 3];

// 2와 동일한 모든 요소 찾기
let searchList = list.filter((n) => n === 2);
console.log("searchList", searchList); // [2]

4. 배열에서 요소 삭제하기

filter()를 사용하여 특정 요소가 없는 새 배열을 만들 수 있습니다:



let list = [1, 2, 3];

// 요소 2가 없는 새 배열 생성
let deleteList = list.filter((n) => n !== 2);
console.log("deleteList", deleteList); // [1, 3]

5. 배열 요소 수정하기 (`map` 활용)

map() 메서드는 제공된 함수를 모든 요소에 호출한 결과로 새 배열을 생성합니다:



let list = [1, 2, 3];

// 값이 2인 요소 업데이트 (10을 곱함)
let updateList = list.map((n) => {
    if (n === 2) {
        return n * 10;
    } else {
        return n;
    }
});

console.log("updateList", updateList); // [1, 20, 3]

이는 조건부(삼항) 연산자를 사용하여 더 간결하게 작성할 수도 있습니다:



// 동일한 결과, 더 간결한 구문
let updateList = list.map((n) => n === 2 ? n * 10 : n);

See more posts

[자바스크립트(Java Script)]3.자바스크립트 불변성: 배열 다루기

1. 깊은 복사(Deep Copy)

2. 배열에 요소 추가하기

3. 배열에서 요소 찾기 (filter 활용)

4. 배열에서 요소 삭제하기

5. 배열 요소 수정하기 (map 활용)

More articles

[자바스크립트(Java Script)]5.JavaScript 이벤트 핸들링의 기초와 활용

[자바스크립트(Java Script)]4.자바스크립트 DOM 다루기: 요소 선택과 조작

[자바스크립트(Java Script)]2. 자바스크립트 문법

[자바스크립트(Java Script)]1. Javascript 역사

3. 배열에서 요소 찾기 (`filter` 활용)

5. 배열 요소 수정하기 (`map` 활용)