구조분해 할당(Destructuring assignment)

비구조화 할당

객체데이터 구조분해 할당

const user = {
  name : 'Sim',
  age : 85,
  email: '0doogadooga@gmail.com'
}

const {name,age,email,address} = user

console.log(`사용자의 이름은 ${name}입니다.`)
console.log(`${name}의 나이는 ${age}세 입니다`)
console.log(`${name}의 이메일 주소는 ${email}입니다.`)
console.log(address) // undefined

보이는거와 같이 user라는 변수에 객체 데이터가 할당이 되어있다(name,age,email 각각의 속성을 갖고있다).
그러고 밑에 보면 const 라는 변수를 생성하는 키워드 뒤에 중괄호를 열고 닫아 중괄호에다가 user라는 객체 데이터를 할당연산자로 할당하고 있다. 이말을 풀어 말하자면 user 라는 객체데이터에서 내용을 구조분해해서 내가 원하는 속성들만 꺼내서 사용할 수 있다는 의미이다. 앞에 const,let 이라는 키워드를 사용해서 구조분해된 내용을 변수로 만들어서 사용할 수 있다.
address 같은 경우에는 정의되지 않았기 때문에 구조분해해서 꺼내온다 해도 값이 당연히 없다.

user라는 객체에서 꺼내오는 방식은 user.address점표기법을 이용해서 속성의 이름을 명시하는 것과 동일한 것이고, user['age'] : user라는 객체데이터 뒤에다가 []를 열고 문자데이터로 속성의 이름을 찾는 인덱싱방법도 있다.

구조분해의 좋은점은 속성이 많을때 그 속성들을 전부다 꺼내올 필요가 없으니깐 우리가 필요한 것만 꺼내쓸 수 있다. 만일 구조분해해서 변수를 안만들어 놓았으면 점표기법을 사용해도 된다.

const {name,age} = user

console.log(`사용자의 이름은 ${name}입니다.`)
console.log(`${name}의 나이는 ${age}세 입니다`)
console.log(`${name}의 이메일 주소는 ${user.email}입니다.`)

그럼 만약 address에 값을 추가 하고 싶다면?

const {name,age,email,address = 'korea'} = user
console.log(address) // korea

변수부분에다 할당연사자를 통해 기본값을 지정해 주면 된다.
근데 또 만약 객체 데이터 내부에 이미 할당이 되어있으면

const user = {
  name : 'Sim',
  age : 85,
  email: '0doogadooga@gmail.com',
  address : 'Japan'
}
const {name,age,email,address = 'korea'} = user
console.log(address) // Japan

객체데이터 안의 address에 실제데이터값이 Japan이라는 문자데이터가 있기 때문에 구조분해에서 할당한 기본값은 무시된다. 즉 객체데이터에서 어떠한 데이터를 꺼내오는데 그 데이터가 undefined라면 위에 코드에 작성한 것처럼 할당연사자를 통해 기본값(구조분해에서 기본값을 지정해주는 방법)을 지정해주면 된다.
구조분해를 한 변수명이 마음에 들지 않거나, 변경을 해야할 때는 꺼내오는 것은 그 속성의 이름으로 꺼내오지만 밑에서 변수로 활용할 때는 다른이름으로 활용하게 :(콜론) 기호를 붙여 뒤에다 원하는 변수명을 명시해주면 된다.

const {name : nickname,age,email,address = 'korea'} = user
console.log(`사용자의 이름은 ${nickname}입니다.`)
console.log(`${nickname}의 나이는 ${age}세 입니다`)
console.log(`${name}의 이메일 주소는 ${email}입니다.`) //Error
console.log(address) 

에러가 나는 이유는 여기서의 name은 꺼내오는 용도고 꺼내온 내용을 nickname이라는 변수에 할당했기 때문이다.

배열데이터 구조분해할당

구조분해할당은 객체데이터 뿐만 아니라 배열 데이터에서도 사용이 가능하다

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

즉 배열데이터는 구조분해할때 위의 처럼 {}가 아닌 []로 기호를 작성해줘야한다. 즉 구조분해하는 그데이터의 타입에 맞게 기호를 사용해야한다.
배열데이터는 객체데이터와 다르게 key:value 형태가 아니고 순서대로 인덱싱되어서 들어가져 있으므로 구조분해할때 순서대로 꺼내오면 된다. 배열데이터는 객체데이터와 다르게 이름으로 구조분해해서 추출하는 것이 아니고 순서대로 추출하는 것이 중요하다
만약 'Cherry'만 필요하다면

const fruits = ['Apple','Banana', 'Cherry']
const [, ,c] = fruits // 쉼표는 남겨놔야한다 이유는 배열데이터는 순서가 중요한데 그 순서를 지켜주기 위해서
console.log(c)