[JS] 3. 불변성

1. 불변성을 지켜야 하는 이유

1. 형상 비교

2. 불변 함수

0. 불변

• 깊은 복사를 통해 기존 데이터를 건드리지 않도록 한다.

• c.f. 얕은 복사
• list와 data는 같은 배열을 참조한다.
• data를 수정하면 list도 같이 변경된다.

// 불변

let list = [1, 2, 3];

// c.f. 얕은 복사
let data = list;

1. 깊은 복사

1. 전개 연산자를 통해 기존의 list 데이터를 가져와서 새로운 객체를 만든다.

// 1. 깊은 복사
let deepCopy = [...list]; // ... (전개 연산자) -> type으로 감싸줘야 된다.
deepCopy.push(4); // 비교 확인을 위해서 잠깐 사용한 것. push 쓰지X

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

2. 추가

1. 기존의 list를 건들지 않고 전개 연산자를 통해 list를 가져오면서 데이터를 추가하고 싶은 위치에 바로 추가할 수 있다.

// 2. 추가
// 기존 list를 건들지 않았기 때문에 사용 가능하다!
let appendList = [...list, 4];
let prependList = [0, ...list];

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

3. 찾기

1. filter메서드
1. 내부에 람다식을 prediecate(true or false only)로 받는다.
2. filter 이외의 방법을 사용하면 기존의 list를 건드리게 되므로 사용하지 않는다.
3. filter로 일치하는 값만 수집하면 찾기가 되고 일치하지 않는 값만 수집하면 삭제가 된다.

// 3. 찾기
// filter는 내부에 람다식을 predicate(true or false only)로 받는다
// filter 이외의 문법을 사용하면 기존의 list를 건들게 되므로 사용x
// filter로 일치하는 값만 수집 (찾기)
// filter로 일치하지 않는 값만 수집 (삭제)
let searchList = list.filter((n) => n==2);
console.log("searchList",searchList);

4. 삭제

1. filter로 일치하지 않는 값만 수집한다.

// 4. 삭제
// filter로 일치하지 않는 값만 수집 (삭제)
let deleteList = list.filter((n) => n!=2);
console.log("deleteList",deleteList);

5. 수정

1. 수정은 수정할 값을 인수로 받아야 하고 수정된 값을 return도 해야하므로 function으로 처리한다.

2. map 함수는 배열의 각 요소를 전개 후 처음부터 끝까지 순회하면서 람다식에 의해 변환된 새로운 배열을 반환한다.

3. 삼항 연산자를 사용할 경우 간단하게 표현 가능하다.

// 5. 수정 n == 2이면 n * 10
// 수정은 function이다. 인수도 받아야되고 return도 해야됨
// 전개 후 처음부터 끝까지 순회 (= iterator)
// statement도 필요함? / return이지만 한줄이 아님 -> 중괄호 사용 
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);

6. 전체코드

// 불변

let list = [1, 2, 3];

// c.f. 얕은 복사
let data = list;

// 1. 깊은 복사
let deepCopy = [...list]; // ... (전개 연산자) -> type으로 감싸줘야 된다.
deepCopy.push(4); // 비교 확인을 위해서 잠깐 사용한 것. push 쓰지X

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

// 2. 추가
// 기존 list를 건들지 않았기 때문에 사용 가능하다!
let appendList = [...list, 4];
let prependList = [0, ...list];

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

// 3. 찾기
// filter는 내부에 람다식을 predicate(true or false only)로 받는다
// filter 이외의 문법을 사용하면 기존의 list를 건들게 되므로 사용x
// filter로 일치하는 값만 수집 (찾기)
// filter로 일치하지 않는 값만 수집 (삭제)
let searchList = list.filter((n) => n==2);
console.log("searchList",searchList);

// 4. 삭제
// filter로 일치하지 않는 값만 수집 (삭제)
let deleteList = list.filter((n) => n!=2);
console.log("deleteList",deleteList);

// 5. 수정 n == 2이면 n * 10
// 수정은 function이다. 인수도 받아야되고 return도 해야됨
// 전개 후 처음부터 끝까지 순회 (= iterator)
// statement도 필요함? / return이지만 한줄이 아님 -> 중괄호 사용 
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);