[자바스크립트] 6. 불변

김건우

Apr 02, 2025

💡

한 번 만들어진 객체나 배열 등을 수정할 수 없고, 수정하려면 새로운 객체나 배열을 생성해야 한다.

즉, 원본 데이터는 변경되지 않고, 새로운 데이터가 만들어져 반환된다

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. 배열에 항목 추가기

배열의 원본을 변경하지 않고 새로운 값을 추가할 수 있습니다. 전개 연산자(...)를 사용하여 새로운 배열을 만들 수 있습니다.

배열 끝에 추가하기


let appendList = [...list, 4]; // 배열
console.log("appendList", appendList); // [1, 2, 3, 4]

배열 앞에 추가하기


let preperdList = [0, ...list]; // 배열 앞에 0 추가
console.log("preperdList", preperdList); // [0, 1, 2, 3]

3. 배열에서 항목 찾기

: 배열에서 특정 항목을 찾는 방법은 filter() 함수를 사용하는 것


let searchList = list.filter((n) => n == 2);
console.log("searchList", searchList); // [2]

원본 배열을 변경하지 않고 조건에 맞는 항목을 새 배열로 반환합니다.

4. 배열에서 항목 삭제하기

배열에서 특정 항목을 삭제할 때는 filter()사용하여 조건에 맞지 않는 값만 남기도록 할 수 있음


let deleteList = list.filter((n) => n != 2);
console.log("deleteList", deleteList); // [1, 3]

삭제할 항목을 제외한 새로운 배열을 만들어 불변성을 유지합니다.

5. 배열 항목 수정하기

: 배열의 항목을 수정할 때는 map() 함수를 사용할 수 있습니다.


let updateList = list.map((n) => {
    if (n == 2) {
        return n * 10; // 2를 20으로 수정
    } else {
        return n; // 다른 값은 그대로
    }
});
console.log("updateList", updateList); // [1, 20, 3]

map()은 배열을 순회하면서 조건에 맞는 항목만을 수정하여 새로운 배열을 반환합니다.

간략화 (삼항 연산자 사용):


let updateList = list.map((n) => n == 2 ? n * 10 : n);
console.log("updateList", updateList); // [1, 20, 3]