TIL 230123 - 185번

스프레드 시트와 비구조화 할당

예시로만 살펴보자

const arr = ["one" , "two", "three"]
const [a,b,c] = arr

console.log(a,b,c) // "one" , "two", "three"

배열은 인덱스를 통해 변수를 할당해준다

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언

이때 객체는 배열처럼 인덱스가 아닌 키값으로 할당을 해주기 때문에 키 값이 다르다면 할당이 되지 않는다.undefined

그럼 이름을 다르게 저장하고 싶으면 어떻게 하면 되나?
:을 사용하자

const animal = {
  name: '멍멍이',
  type: '개'
};

const { name: nickname } = animal
console.log(nickname);// 멍멍이

name이란 키값을 찾아 그 value값을 nickname이란 변수이름으로 할당하겠다는 뜻이다.

그럼 비 구조화 할당일 때 무언가를 추가하거나 빈값이라면 기본 값을 넣을 수 있을까?
가능하다
=을 이용하자

const object = { a: 1 };

function print({ a, b = 2 }) {
  console.log(a);// 1
  console.log(b);// 2
}

a,b를 =을 통해 기본값 2를 할당한 뒤 비구조화 할당을 통해 a만 1로 바꿔준다(객체이기 때문에 키값으로 찾음)

그럼 깊숙하게 숨은 객체를 찾기 위해선 어떻게 해야 할까??

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted); // {name: "velopert", languages: Array[3], value: 5}

첫번째 방법으로 .표기법을 통해 객체 속성에 접근하여 할당해준다.마찬가지로 키값으로 넣으며
마지막에 있는 extracted는 변수에 이미 선언된 값이 있기 때문에 key값으로 name, languages, value만 집어넣어 바로 할당한 것이다.

다른 방법으로는

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const {
  state: {
    information: { name, languages }
  },
  value
} = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);

이 있다.

이는 그냥 똑같이 객체 구조를 만들어서 비구조화 할당을 하는 것

스프레드 문법

간단하게 가장 바깥쪽에 있는 껍질이 벗겨진다고 보면 편하다

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals);// ['개', '고양이', '참새']
console.log(anotherAnimals); // ['개', '고양이', '참새','비둘기' ]

이는 animals 란 배열의 가장 바깥쪽의 대괄호 []가 사라지면 '개','고양이','참새'만 남는데 그 뒤에 '비둘기'를 추가한 것 뿐이다

이는 객체에서도 똑같다.

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  ...slime,
  attribute: 'cute'
};

const purpleCuteSlime = {
  ...cuteSlime,
  color: 'purple'
};

console.log(slime); // {name:"슬라임"}
console.log(cuteSlime);//{name:"슬라임",attribute:"cute"}
console.log(purpleCuteSlime);//{name:"슬라임",attribute:"cute",color:"purple:}