[javascript] 객체, 객체 비구조화 할당

const 변수, 상수명 = {
  키 : 값,
  키 : '값',
  '키 키' : 값
  // 키는 공백이 없어야하며 있어야 할 경우 따옴표로 감싸 문자열로 넣어준다
}

객체를 선언할 때에는 { } 문자 안에 원하는 값을 넣어줌

하나의 이름에 여러 종류의 값을 넣을 수 있음

 

const dust = {
  name : 'dust',
  color : 'black',
  shape : 'circle',
};

console.log(dust.name);
// dust
console.log(dust.color);
// black

개발자도구 콘솔찍었을 때

 

function print(info){
  const text = '${info.name}는 ${info.color},${info.shape}'
  console.log(text);
}

 

 

객체 비구조화 할당 

위에서 객체의 값을 조회할 때 마다 info.를 입력했는데 객체 비구조화 할당 문법을 사용하면 더욱 짧고 가독성을 높일 수 있다

const dust = { name: 'dust', color : 'black', shape : 'circle'};
const { name, color, shape } = dust;

console.log(name);    // dust
console.log(color);   // black
console.log(shape);   // circle

// 또는

const dust = { name: 'dust', color : 'black', shape : 'circle'};
const { name : a, color : b, shape : c } = dust;
// 객체의 속성명과는 다른 이름의 변수에 할당 할 수 있다

console.log(a)       // dust
console.log(b)       // black
console.log(c)       // circle

const dust = {
  name : 'dust',
  color : 'black',
  shape : 'circle',
}

function print(info){
  const { name, color, shape } = info;
  // ✔객체에서 값을 추출하여 새로운 상수로 선언✔
  console.log(name + '는 ' + color, shape);
}
print(dust);
// dust는 black, circle

 

 

let { x = 5, y = 2 } = { 1 }; 
// 1이 x에 대입, y에는 들어갈 값이 없기 때문에 그대로 나옴
// x = 1, y = 2

let { x = 5, y = 2 } = { 10, 20 };
// x = 10, y = 20

 

let number = { x: 10, y: 20 };
let { x, y } = number;

function print({ x, y, z }){
  console.log(x); 
  console.log(y); 
  console.log(z); 
}

print(number);
// 10
// 20
// undefined

// ---------------------------------------
// z에 기본값을 주고 싶을 때

function print({ x, y, z = 30 }){
  console.log(x); 
  console.log(y); 
  console.log(z);
}
print(number);
// 10
// 20
// 30

 

 

 

객체안에 함수 넣기

const dust = {
  name : 'dust',
  active : '팔랑팔랑',
  move : function move(){
  // 함수가 객체 안에 들어가게 되면 this는 자신이 속한 객체를 가르킨다
  // 함수를 선언 할 때 함수명은 필수가 아님
  // ex) move : function() { ~
  
  // 객체 안에 화살표 함수는 x ==> this는 자신이 속한 객체를 가르키지만 화살표 함수는 그렇지 않기 때문
    console.log(this.name + "는 " + this.active);
  }
};

dust.move();
// dust는 팔랑팔랑

 

 

const

  const dust = {
    name: "dust",
    color: "black",
    shape: "circle",
    active: "팔랑팔랑",
    move: function move() {
      console.log(this.name + "는 " + this.active);
    },
  };
  
  
  dust.name = "dust2";
  console.log(dust.name);
  // dust2

우짜다 보니 콘솔에 dust.name 을 수정하고 봤는데 값이 변경되길래 const인데.. . 상수인데 왜 값이 바뀌지 .. .? 

해서 찾아봄

 

상수로 변수를 선언할 때 사용,

const는 할당된 값의 바인딩 변경을 못하게 막는 것이지 바인딩 된 값의 변경을 막는 것이 아니다

 

...? 뭔말일까..

const dust = {
  name: 'dust'
};

dust.name = 'test';
// dust --> test
// 이런식으로 변경은 가능

// ------------------------------------------------

const dust = {
  name : 'dust'
};

dust = {
  name : 'test'
};
// dust --> ! 오류 !

이런 속성이라고 한다

 

참고

https://velog.io/@hemtory/JSConstLetIIFE

JS - const, let, 즉시 실행 함수

 

 

 

 

배열 비구조화 할당 

 

기존

const animal = ["고양이", "강아지", "햄스터", "다람쥐"];

// 변수에 담기
const cat = animal[0];
const dog = animal[1];
const ham = animal[2];
const squirrel = animal[3];

값을 꺼내려면 귀찮고, 가독성이 좋지않음

 

 

비구조화 할당

const [cat, dog, ham] = ["고양이", "강아지", "햄스터"];

// 기본값 지정
const [cat, dog, ham, rabbit = "토끼" ] = ["고양이", "강아지", "햄스터"];

const animal = ["강아지", "고양이", "햄스터"];
const [dog, cat, ham, rabbit = "토끼"] = animal;
// 위에 예시는 되는데 왜 얘는 안될까
// 확인하기

// 배열에 변수와 값을 추가하고 싶을 때
animal[3] = "토끼";

const animal = ["고양이", "강아지", "햄스터", "다람쥐"];
const [ a, b, ...rest ] = animal;
// 여기서 rest 는 원하는 텍스트를 입력해주면 됨
// 객체 안에 있는 값을 추출하여 변수 or 상수로 바로 선언
// ... 지시자 사용 시 분해하고 남은 변수들을 따로 배열로 담을 수 있다

console.log(a);   // 고양이
console.log(b);   // 강아지
console.log(rest) // ['햄스터', '다람쥐'];

 

function Array(){
  return { 1, 2, 3, 4, 5 };
}

{ a, , , , e } = Array();

console.log(a); // 1
console.log(e); // 5

원하는 배열 요소만 가져올 수 있다