1. 배열 다루기 실습
*️⃣ 주의사항
― DB에서 가져온 데이터를 화면에 보여주는 경우 ―
1) 배열은 불변(immutable)하게 다루기
- DB에서 데이터를 다시 불러올 때 기존 배열을 직접 수정하면 안 됨
- 기존 배열이 변경되면 새 데이터와 비교가 불가능해짐
2) 불변이 중요한 이유
- 기존 배열(A)과 새로 가져온 배열(B)을 비교해서 데이터가 변경되었는지 판단해야 함
- 기존 배열을 mutate(변형)해버리면 A와 B가 같은 객체처럼 변해버려 변경 여부를 감지할 수 없음
3) 주의해야 할 변경 함수 (Mutable)
배열을 직접 바꾸는 메서드
push,pop,shift,unshift
splice,sort,reverse
copyWithin,fill, …
4) 안전한 불변 처리 방법 (Immutable)
배열을 바꾸지 않고 새 배열을 만드는 메서드
불변을 유지하는 깊은 복사 함수
map(),filter(),slice(),concat(),spread(...)
1️⃣ map 함수로 배열 요소 수정
1) map 함수란?
for문을 돌면서 새로운 리스트를 만들어주는 함수
2) 실습
let list = [1,2,3,4,5];
let r = list // 얕은 복사
// for문을 돌면서 새로운 리스트를 만들어주는 함수(깊은 복사)
let newList = list.map((i)=>1);
console.log(newList)
// 1. 수정
// for문을 돌면서 새로운 리스트를 만들어주는 함수(깊은 복사)
let newList = list.map((i)=>i*2);
console.log("list", list);
console.log("newList",newList);
console.log("-------------------------------");
➡️ 매개변수 하나만 받을 때는 괄호
( )도 생략 가능! 매개변수 2개 이상일 때는 괄호( ) 입력!2️⃣ 전개연산자(…)로 배열 요소 추가
1) 전개연산자(…)란?
자기의 타입을 버리고, 알맹이만 뿌리는 것
2) 실습
// 2. 추가 (전개연산자 -> 자기의 타입을 버리고, 알맹이만 뿌린다)
let addList = [...list,9];
console.log("list", list);
console.log("addList", addList);
console.log("-------------------------------");
let addList = [9,...list];
console.log("list", list);
console.log("addList", addList);
console.log("-------------------------------");
➡️ 양 끝으로만 넣을 수 있고, 가운데는 넣을 수 없음
가운데 넣으려면 슬라이싱을 해야 하는데, 그렇게 하는 경우 잘 없음
3️⃣ filter 함수로 배열 요소 검색
1) 실습
// 3. 검색
let searchList = list.filter((i) => i==3);
console.log("list", list);
console.log("searchList", searchList);
console.log("-------------------------------");
4️⃣ filter 함수로 배열 요소 삭제
1) 실습
// 4. 삭제
let delList = list.filter((i) => i!=3);
console.log("list", list);
console.log("delList", delList);
console.log("-------------------------------");
Share article