script.js - Destructuring(1)

 

Destructuring이란? 구조를 분해하는 것, 객체를 분해해서 값을 가져온다.

반대로 name,age라는 값을 변수로 뽑아내고 싶다.

let person = {
    name: "kim",
    age: 23
}

let name = person.name
let age = person['age']

console.log(name, age)

위 코드에서 마지막 문장의 name에 취소 밑줄 표시가 되어있다.

아래는 이 에러를 수정해서 최종적으로 완성한 코드이다.

let person = {
    name: "kim",
    age: 23
}

let name1 = person.name
let age = person['age']

console.log(name1, age)

 

let person = {
  name:"kim",
  age:23
}

// let name = person.name
// let age = person['age']

let {name,age}=person

console.log(name,age)

가운데 두 문장을 바로 아래 문장처럼 한문장으로 정리할 수 있다.

가지고 있는 키값을 { } 안에 넣는다.

 

person이라는 객체에서 name이라는 키 값을 분해하고 age라는 키값을 분해한다. 그래서 두 개를 let으로 선언한 변수로 만들겠다.

 

결과는 다음과 같다.

kim 23

 

let person = {
  name:"kim",
  age:23
}

// let name = person.name
// let age = person['age']

let {name}=person

console.log(name,age)

이렇게 name만 추출하려고 하면

ReferenceError: age is not defined

이렇게 오류가 난다. 

 

해결책은 다음과 같다.

let person = {
  name:"kim",
  age:23
}

// let name = person.name
// let age = person['age']

let {name}=person

console.log(name)

 

<결과>

kim

 

age만 읽어오고 싶다면...

 

let person = {
  name:"kim",
  age:23
}

// let name = person.name
// let age = person['age']

let {age}=person

console.log(age)

 

<결과>

23

 

[정리]

가지고 오고 싶은 객체의 키값을 {}안에 넣으면 변수가 만들어지고 그 변수안에는 키의 값이 들어가게 된다.

배열에서도 적용가능... 바로 다음에 설명