강의를 듣다가 모르는 문법정리(구조분해? 객체구조?)

구조분해할당?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

 

cat = { ...cat, ...body}
원래 데이터 구조분해, 새로운 데이터 구조분해 
cat 과 body를 구조분해 할당 후 기존의 키에서 중복된 키에 대한 value값을 바꾼다. 

 let obj = { name: "홍길동", age: 20 };
 let { ...arr } = obj;
 // arr이 객체 안에 있는 변수를 다 가지고 들어온다

 console.log(arr); // { name: '홍길동', age: 20 }

let arr = ["홍길동", "이순신", "홍길자", "김철수"];

// 원하는 값 꺼내기
let [n1, , , n2] = arr;

console.log(n1, n2); // 홍길동 김철수

// 전부다 반환받는다.
let [...x] = arr;

console.log(x); // ["홍길동", "이순신", "홍길자", "김철수"]

const array = [1, 2, 3];
const [first] = array;
console.log(first); // 1
first 에는 array의 element 중 맨 첫번째 1 만 담기게 됨

const array = [1, 2, 3];
const [first, second] = array;
console.log(first, second); // 1 2
배열의 첫 번째 요소와 두 번째 요소를 각각 변수에 담고 싶을 경우

 

  
객체 구조할당

객체 구조 분해 할당은 프로퍼티를 기준으로 하기 때문에, 배열 구조 분해 할당과 달리 그 순서가 뒤바뀌어도 전혀 문제없이 해당 프로퍼티의 값을 가져올 수 있다

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
// memo, name, age 순으로 작성해도 상관이 없다. 알아서 해당 프로퍼티명에 해당하는 값을 저장한다.
const { memo, name, age } = obj;

 

...문법

const obj = { name: "John", age: 18, memo: "Hello", };

const { name, ...rest } = obj;

console.log(name); // "John"
console.log(rest); // { age : 18, memo: 'Hello' }

obj 객체 중 name에 프로퍼티 값이 저장되고, 나머지 age와 memo는 ...rest가 받아서 rest 변수에 모아 객체로 저장

 

filter 문법

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

객체.filter((cat) -> cat.id !==params.id)
기존에 있었던 객체를 순회를 하면서 해당하는 아이디가 같지 않으면
return하는 것
해당하는 아이디 빼고 새로운 데이터 베이스 설계됨

참고

https://ko.javascript.info/destructuring-assignment

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://chanhuiseok.github.io/posts/js-10/