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

• HTML 내부에서 변화된 값을 넣을 수 있는 방법
1. 다 지우고 다시 그리기
• 간편함 : 내용을 지우고 다시 렌더링하면 됨
• Resource 사용이 많음 : Performance 저하
2. 변경된 부분만 그리기
• 알고리즘 사용 : 복잡할 수 있음
• 새로 갱신된 부분만 그림 : Resource 사용이 적어 Performance 상향

• 변경된 부분만 그리기 위해서는 기존 값을 건드려서는 안됨 : 기존 값이 가져야 할 불변성
• 기존 값을 그대로 둔 후 복사하여 새 객체를 만들어야 함
• 새 객체와 기존 값을 담은 객체를 비교하여 다른 곳만 새롭게 생성

얕은 복사 vs 깊은 복사

• 기존 값을 건드리지 않기 위해서는 값만을 복사해야 함

• 객체 자체를 새 객체에 넣는 복사 : shallow copy (얕은 복사)
• 값을 복사하는 게 아닌, 값이 저장되어 있는 주소를 복사하여 같은 객체를 보는 형태
• newList.push() 등으로 값을 건드리면, 기존 값(list)도 같이 변화함

• 객체의 값만을 복사하여 새 객체에 새로 담는 복사 : deep copy (깊은 복사)
• 기존 객체에 담긴 값을 새 컬렉션 내에 뿌려서 담는 형태 (… : 전개연산자)

깊은 복사를 활용한 컬렉션 CRUD

1. 추가 (Create)

• 컬렉션 내에 콤마(,)를 추가하여 요소의 앞, 뒤에 content 추가 가능

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

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

1. 탐색 (Read)

• 람다 표현식을 활용하여 리스트 내에 해당 요소가 있는지 검사하고, 검사 조건에 맞는 값만 찾음
• 컬렉션.filter((num)⇒조건);
• 해당하는 값을 찾아야하므로 조건에 ‘==’ 사용

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

1. 수정 (Update)

• 조건에 맞는 값을 수정하여 return
• 컬렉션.filter((num) ⇒ { if(조건) return result; else return result2; });
• 삼항 연산자를 사용 : 컬렉션.filter((num)⇒조건?result1:result2);

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

let updateList2 = list.map((n) => n == 2 ? n * 10 : n);
console.log("updateList", updateList);
console.log("updateList2", updateList2);

1. 삭제 (Delete)

• 조건에 맞는 값을 찾는 것은 탐색과 동일
• 찾는 값을 삭제 = 찾지 않는 값만 출력해야 하므로 조건에 ‘≠’ 사용

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