객체와 배열

es2016부터 객체와 배열을 다루는 방법,
객체와 배열 안에서 변수의 영역을 제한하는 방법을 다양하게 제공하기 시작했다.

대입

객체 안의 필드값 ⇒ 변수

객체가 가지고 있는 필드 중에서 일부만 필요할 때 사용된다.

const sandwich = {
    bread: "더치 크런치",
    meat: "참치",
    cheese: "스위스",
    toppings: ["상추", "토마토", "머스타드"],
  };

  let { bread, meat } = sandwich;

  bread = "잡곡";
  meat = "칠면조";

  console.log(`빵 : ${bread}, 고기: ${meat}`); //빵 : 잡곡, 고기: 칠면조
  console.log(`빵 : ${sandwich.bread}, 고기: ${sandwich.meat}`); //변수를 let으로 해도 const로 선언된 sandwich의 값이 바뀌지 않는다

특징

let으로 변수에 대입해도 const로 선언된 원본 객체 안의 필드는 변경되지 않는다.

let { bread, meat } = sandwich;

  bread = "잡곡";
  meat = "칠면조";

  console.log(`빵 : ${bread}, 고기: ${meat}`); //빵 : 잡곡, 고기: 칠면조
  console.log(`빵 : ${sandwich.bread}, 고기: ${sandwich.meat}`); //변수를 let으로 해도 const로 선언된 sandwich의 값이 바뀌지 않는다

함수의 인자에 대입

객체의 필드에 접근하기 위해 점 . 과 필드이름을 사용하는 대신
{ } 를 이용해서바로 가져올 수 있다.

type regularPersonProps = {
    firstname: string;
    lastname: string;
  };

  const regularPerson = {
    firstname: "유호",
    lastname: "윤",
  };

  const lordify = (regularPerson: regularPersonProps) => {
    console.log(`캔터베리의 ${regularPerson.firstname}`);
  };

  lordify(regularPerson); //점과 필드이름을 사용해야 하니 귀찮다

  const lordify2 = ({ firstname }: regularPersonProps) => {
    console.log(`캔터베리의 ${firstname}`); //
  };

  lordify2(regularPerson); //{ }를 사용해서 필드값을 바로 가져올수 있고, TS의 경우 타입을 확인할 수 있다

객체 안의 객체를 함수의 인자에 넣기

배열 분해

배열을 구조 분해해서 값을 뽑아낸다.

리스트 매칭

불필요한 값을 콤마를 사용해 생략한다.

그러나 대입하고 싶지 않은 원소의 위치에 아무것도 넣지 않는것이 낫다.

객체 리터럴 개선

구조 분해의 반대. 구조를 다시 만들어 내는 과정 또는 내용을 한데 묶는 과정이다.

변수 ⇒ 객체의 필드

객체 메서드

function 키워드를 더 사용하지 않아도 되지만 this를 사용하는 것에 유의하자.

스프레드 연산자

특징

1. 배열의 내용을 조합한다.
   (ex: 두 배열이 있다면, 그 두 배열의 모든 원소가 들어간 세번째 배열을 만든다)
2. 원본 배열을 유지하는 불변성이다.
   변경하지 않고, 복사한다.
3. 함수의 인자를 배열로 모을 수 있다.
4. 객체에도 사용이 가능하다.