구조 분해 할당(Destructuring assignment)
- 객체데이터
- 다른 말로 비구조화 할당이라고도 부름
- 구조 분해 할당이라는 것은 객체데이터에서 내용을 구조 분해해서 내가 원하는 속성들만 꺼내서 사용하는 것을 의미함
- 이러한 방식으로 객체데이터를 const나 let 키워드를 통해 구조 분해 해서 각각의 변수로 만들어 활용
- 객체에서 구조 분해를 통해 꺼내오는 방식은 점 표기법을 이용해 속성의 이름을 명시하는 것과 객체데이터 뒤쪽에 대괄호를 적어 속성의 이름을 인덱싱 방법으로 꺼내어 사용하는 것과 동일함(user.age = user['age'] )
const user = {
name: 'hyerin',
age: 95,
email: 'abcde@gmail.com'
}
const {name, age, email, address} = user
//E.g, user.address
console.log(사용자의 이름은 ${name}입니다.) //사용자의 이름은 hyerin입니다.
console.log(${name}의 나이는 ${age}세입니다.) //hyerin의 나이는 95세입니다.
console.log(${name}의 이메일 주소는 ${email}입니다.) //hyerin의 이메일 주소는 abcde@gmail.com입니다.
console.log(address) //undefined
- address는 user라는 객체데이터 내부에 존재하지 않으므로 undefined 값이 나옴
- 정의되어있지 않은 속성들은 꺼내온다 한들 값이 없다.
필요한 것들만 꺼내서 사용하기
const {name, age} = user
console.log(사용자의 이름은 ${name}입니다.)
console.log(${name}의 나이는 ${age}세입니다.)
console.log(${name}의 이메일 주소는 ${user.email}입니다.)
console.log(user.address)
기본값 지정
- 구조 분해 할당이라는 문법에서는 어떠한 데이터가 undefined로 비어있다면 할당연산자를 통해 기본값을 지정할 수 있음
- 만약, address가 undefined라면 아래와 같이 해당 변수 부분에 기본값을 지정할 수 있음
- 하지만 user라는 객체데이터 부분에 address 속성의 실제 데이터가 있으면 기본값은 무시됨
const {name, age, address = 'Korea'} = user
console.log(사용자의 이름은 ${name}입니다.)
console.log(${name}의 나이는 ${age}세입니다.)
console.log(${name}의 이메일 주소는 ${user.email}입니다.)
console.log(address) //Korea
기본값 무시되는 경우
const user = {
name: 'hyerin',
age: 95,
email: 'abcde@gmail.com',
address: 'USA'
}
const {name, age, address = 'Korea'} = user
console.log(address) //USA
새로운 이름으로 사용하기
- 만약 user 부분에서 name으로 정의된 속성을 꺼내와서 사용하려고 할 때 변수를 따로 만들어 다시 할당할 수 있음
- 즉, name 이라는 변수이름이 마음에 안들어서 아래쪽에서 활용할때는 다른 이름으로 다시 할당받아 사용 가능
const user = {
name: 'hyerin',
age: 95,
email: 'abcde@gmail.com'
}
const {name, age, address = 'Korea'} = user
const hyerin = name
console.log(사용자의 이름은 ${hyerin}입니다.) //사용자의 이름은 hyerin입니다.
console.log(${hyerin}의 나이는 ${age}세입니다.) //hyerin의 나이는 95세입니다.
console.log(${hyerin}의 이메일 주소는 ${user.email}입니다.) //hyerin의 이메일 주소는 abcde@gmail.com입니다.
console.log(address) //Korea
콜론기호:를 통한 새로운 변수이름 명시
- user라는 객체데이터 내부에서 어떠한 속성의 이름으로 데이터를 꺼내올 때 속성이름이 마음에 안들면 꺼내오는 것은 그 속성의 이름으로 꺼내오지만 밑에서 변수로 활용할 때는 다른 이름으로 사용할 수 있도록 콜론기호를 적어서 뒤쪽에 새로운 변수이름 명시 가능
- 즉, 구조 분해 할당 문법은 어떠한 특정 객체에서 데이터를 꺼내올 때는 그 데이터의 이름을 정확하게 작성하되 그 데이터의 이름을 변수로 활용하고 싶지 않다면 뒤쪽에 콜론기호를 적어 새로운 이름을 선언할 수 있음
const {name: hyerin, age, address = 'Korea'} = user
console.log(사용자의 이름은 ${hyerin}입니다.) //사용자의 이름은 hyerin입니다.
console.log(${hyerin}의 나이는 ${age}세입니다.) //hyerin의 나이는 95세입니다.
console.log(${hyerin}의 이메일 주소는 ${user.email}입니다.) //hyerin의 이메일 주소는 abcde@gmail.com입니다.
console.log(address) //Korea
배열데이터의 구조 분해 할당
- 배열데이터는 객체데이터와 다르게 순서대로 추출해야 함
- 즉, 배열데이터는 item이 순서대로 indexing되어 들어가 있으므로 구조 분해에서 꺼내올 때에도 순서대로 꺼내와야 함
- 데이터 종류에 맞게 대괄호[] 기호 사용
const fruits = ['Apple', 'Banana', 'Cherry']
const [a, b, c, d] = fruits
console.log(a, b, c, d) //Apple Banana Cherry undefined
- d의 경우 존재하지 않는 값을 변수로 출력하려다 보니 undefined 값이 나옴
Banana만 추출하고 싶을때
- 배열 부분에서의 구조 분해는 순서대로 추출되기 때문에 순서를 명확하게 지키기 위해 쉼표를 꼭 적어야 함
const fruits = ['Apple', 'Banana', 'Cherry']
const [, b] = fruits
console.log(b) //Banana
Cherry만 추출하고 싶을때
const fruits = ['Apple', 'Banana', 'Cherry']
const [, , b] = fruits
console.log(b) //Cherry
