코드노트

js 데이터 알아보기 / 구조 분해 할당 본문

Code note/자바스크립트

js 데이터 알아보기 / 구조 분해 할당

코드노트 2022. 5. 31. 23:50

구조 분해 할당 Destructuring assignment

const user = {
  // key: value
  name: 'codenote',
  age: 20,
  email: 'kjun_all@naver.com',
  address: 'USA'
};
const {name, age, email, address = 'Korea'} = user;
// 필요한 것들을 정리해서 꺼내서 사용할수 있다.
// 기본값을 지정할 수 있다.
// 데이터가 있으면 기본값은 무시된다.
// 변수이름을 따로 지정할 수도 있다. ex/ name: codenote

console.log(`사용자의 이름은 ${name} 입니다.`); // 사용자의 이름은 codenote 입니다.
console.log(`${name}의 나이는 ${age}세 입니다.`); // codenote의 나이는 20세 입니다.
console.log(`${name} 이메일 주소는 ${email} 입니다.`); // codenote 이메일 주소는 kjun_all@naver.com 입니다.
console.log(address); // USA

- 필요한 데이터들을 정리해서 꺼내서 사용할 수 있다.

- 데이터가 없다면 기본값 을 따로 지정할 수 있다.

- 데이터가 있으면 기본값은 무시되고 데이터로 출력된다.

- 변수이름을 따로 지정할 수 있다. ex) name: codenote

 

const fruits = ['Apple', 'Banana', 'Cherry'];
const [a, b, c, d] = fruits;
console.log(a, b, c, d); // Apple Banana Cherry undefined
const fruits = ['Apple', 'Banana', 'Cherry'];
const [ , , c] = fruits;
console.log(c); // cherry

- 배열데이터도 구조 분해 할당이 가능하다.

- 세번째 데이터만 호출하고 싶다면, [, , c] 이렇게 쉼표를 사용해서 빈 공간을 만들어서 호출한다.