[자바스크립트 JavaScript] 구조분해할당, 단축속성명, 전개구문

• 구조분해할당
• 단축속성명
• 전개구문

 

구조분해할당 

• 배열이나 객체의 속성을 분해하여 할당한다

 

배열

• 배열 형태로 변수를 선언, 배열을 할당하면 변수에 배열 요소가 하나씩 할당된다
• 할당되는 배열보다 변수 길이가 짧은 경우 undefined으로 출력된다

let [value1, value2] = [1, "new"];
console.log("1", value1);
console.log("2", value2);

let arr = [value1, value2, value3];
let [a, b, c, d] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);

 

• 변수에 d에 기본값이 있어도 할당된 값으로 변경된다.(초기값이기 때문에 할당된 값으로 변경됨)

let [value1, value2] = [1, "new"];
console.log("1", value1);
console.log("2", value2);

let arr = [value1, value2, value3, value4];
let [a, b, c, d = 4] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);

 

 

---

객체

• 객체형태의 변수를 선언, 객체를 할당하면 변수명이 키(key)가 되어 객체의 값(value)을 할당받게 된다.

let user = {
  name: "abc",
  age: 30,
}

let{name,age}={
  name: "abc",
  age: 30,
};

console.log(name);
console.log(age);

 

 

• 객체의 key:value 형태의 변수 선언, 객체를 할당하면 새로운 이름(key)으로 값(value)이 할당된다.

let user = {
  name: "abc",
  age: 30,
}
let {
  name : newName,
  age : newAge,
}={user};

console.log( newName );
console.log( newAge );

 

 

• 변수보다 할당되는 객체의 길이가 짧은 경우 undefined으로 출력된다
• 초기값이 설정되어 있을 경우 초기값으로 출력, 값을 할당받으면 해당 값으로 출력된다.

let user = {
  name: "abc",
  age: 30,
}

let { name, age, birthdat="today"} = { user }
console.log(name);
console.log(age);
console.log(birthdat);

 

 

---

단축 속성명 (property shorthand)

• 객체의  key와 value가 동일한 경우, value를 생략하여 작성할 수 있다

const name = "nab";
const age = "30";

// 1.
const obj = {
  name: name,
  age: age
};

//  2. 
const obj = {name, age};

 

 

---

전개구문

• [] , {} 등 구조의 형태가 사라진다. 구조의 형태를 바꿀 때 사용됨.
• arr에 4를 추가하려 새로운 배열 형태로 만든 것

let arr=[1,2,3];
console.log(arr);
console.log(...arr);

let newArr=[...arr,4];
console.log(newArr);

 

• 객체의 전개구문 사용법

let user = {
  name:'nbc',
  age:30
};
let user2={...user};
console.log(user);
console.log(user2);

 

 

• 나머지 매개변수
• 매개변수의 길이를 정확하게 모를 때... arge를 사용한다
• a, b, c에 각 값이 들어가고 나머지값은 ... arge에 들어가게 된다
• 만약 ... 을 생략할 경우 나머지 매개변수는 배열 형태로 들어가게 된다.

function exampleFunc() {
  console.log(a, b, c, ...args);

};
exampleFunc(1, 2, 3); //...args 사용 전, 후 비교하기