보통의 오브젝트에 접근해서 수정하는 방식

const user = {
  username: "ssar",
  password: "1234",
  phone: "12345",
  email: "1111",
  bio: "1234",
  website: "11111",
};

user.password = "1111";
user.phone = "010-111";
user.email = "111@111";

전개연산자

const user = {
  username: "ssar",
  password: "1234",
  phone: "12345",
  email: "1111",
  bio: "1234",
  website: "11111",
};

// 통신시 업데이트할 정보를 통으로 받아옴
let updateUser = {
  passwor: "1111",
  phone: "010-111",
  email: "111@111",
};

// 이런식으로 수정할 수 있겠지만..동적으로 들어와서 이렇게 짤 수가 없다
user.password = updateUser.password;

// 전개 연산자
console.log({ ...updateUser });

let list = [1, 2, 3, 4];
console.log(...list); // 결과가 [1, 2, 3, 4] 이게 아닌 1 2 3 4 이렇게 흩뿌려져서 나옴

// user의 정보와 일치하는 updateUser 의 값을 덮어씌워버림 (key 값이 같으면)
// 이렇게 넣으면 뒤에 붙어버리고
console.log({ user, ...updateUser });

// 이렇게 하면 업데이트가 가능
console.log({ ...user, ...updateUser });

// 만약 겹치지 않는 key 라면 새로이 추가됨

예제

const user = {
  id: 1,
  username: "ssar",
  password: "1234",
  phone: "010-2222-3333",
  email: "[email protected]",
  website: "www.ssar.com",
};

console.log({ ...user });

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/38d14e4a-531e-405d-9a7d-e675bf98a518/Untitled.png

삽입

// insert
let newUser = { ...user, birth: "1995-01-01" };
console.log(newUser);

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9a180d74-bd38-4ae0-814d-eefbd9995870/Untitled.png

삭제

// delete
// 3을 지우고 싶을 때
let deleteOne = list.filter((i) => i !== 3);
console.log(deleteOne);

// object 에서는 안먹히나? -> foods 도 오브젝튼데..?
//let deleteId = user.filter((i) => i.id === 1);
// -> filter 가 유효하지 않은 함수라는 에러가 뜸
//console.log(typeof user);

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/490354e5-642f-41c9-b8a1-ef8c3324cedd/Untitled.png

수정

// update
let updateOne = {
  username: "bori",
};
// 일치하는 key 값 있으면 덮어씌움
let updateObject = { ...user, ...updateOne };
console.log(updateObject);

// 바로접근
let updateObject2 = { ...user, id: 3 };
	console.log(updateObject2);

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/07f1fafe-92e4-41f4-af30-85eb8d2a78f1/Untitled.png

검색