Javascript 구조 분해 할당

목차

1. 구조 분해 할당

2. 구조 분해 할당 - 배열

3. 구조 분해 할당 - 객체

---

1. 구조 분해 할당

 

구조 분해 할당은 객체나 배열을 분해하고 할당하는 기능이다.

 

다음과 같은 상황에 유용하게 쓰인다.

• 함수에 인자로 객체, 배열을 전달해야할 때
• 객체, 배열 데이터 일부만 필요로 할 때
• 함수의 매개변수가 많거나(3개 이상), 매개변수의 기본값이 필요할 때

객체와 배열을 분해하는 방법이 조금은 다르니 한 번 살펴보도록 하자.

 

 

---

2. 구조 분해 할당 - 배열

 

배열의 데이터에 접근하려면, 인덱스를 이용해서 접근했어야 했다.

 

하지만 구조 분해 할당을 이용하면 인덱스를 쓰지 않고도 데이터를 빼올 수 있다.

 

함수의 매개변수에도 사용이 가능하다.

 

문법(Syntax)

let [ 변수1, 변수2, 변수3, .... ] = Array[ ]
const [ 변수1, 변수2, 변수3, .... ] = Array[ ]

▷ 할당 연산자 우측에는 모든 반복 가능한 객체가 올 수 있다. ( 배열 또한 객체이다 )
▷ 할당 연산자 좌측에는 할당할 수 있는 어떤 것이든 올 수 있다. ( ex. 객체의 프로퍼티 키 )

 

 

예시(Sample)

let [ one, two, ...rest ] = ["a", "b", "c", "d"];

console.log(one); // a
console.log(two); // b
console.log(rest); // ['c', 'd']

 

예시를 살펴보면, ...을 통해 나머지 데이터들을 한번에 담을 수도 있다.

(나머지 데이터들은 배열 형태로 담긴다.)

 

 

쉼표를 사용한 요소 무시

 

쉼표를 이용해서 필요없는 값을 무시하고, 다음 값을 변수에 담을 수도 있다.

이는 순서가 있는 배열이기 때문에 가능한 것이고, 객체는 이럴 필요가 없다.

let [ one, ,two ] = ["a", "b", "c", "d"];

console.log(one); // a
console.log(two); // c

 

 

활용하기

 

다음은 구조 분해 할당과 Object.entries( object )를 활용한 것이다.

let user = {
  name: "char1ey",
  age: 29
};

for (let [key, value] of Object.entries(user)) {
  console.log(`${key}:${value}`);
}

// name: char1ey
// age: 29

 

 

기본값(default) 설정하기

 

문법(Syntax)

변수 = "기본값"

변수 옆에 "="를 붙이면, 값이 오지 없더라도 기본값을 넣어준다.
이는 함수의 매개변수에도 많이 사용된다.

 

예시(Sample)

 

할당하고자 하는 변수의 갯수가 분해하는 배열의 길이보다 길어도, 에러가 뜨지않고 undefined를 할당한다.

let [a, b] = [];

console.log(a); // undefined
console.log(b); // undefined

 

하지만, 여기서 기본값을 설정하면 undefined 대신 기본값이 들어가게 된다.

let [a = "a", b = "b"] = [];

console.log(a); // a
console.log(b); // b

---

3. 구조 분해 할당 - 객체

 

객체도 반복이 가능하기 때문에 구조 분해 할당이 가능하다.

 

배열과 달리 순서가 없기 때문에,  더욱 간편하게 사용이 가능하다.

 

다만 키에 값을 할당하므로, 연산자 좌측에 신경을 조금 써줘야 한다.

 

중첩된 객체에도 적용할 수 있다.

 

함수의 매개변수에도 사용이 가능하다.

 

문법(Syntax)

<새로운 변수에 넣는 경우>
let { 객체 프로퍼티: 목표 변수, 객체 프로퍼티: 목표 변수, ... } = Object{ }
const { 객체 프로퍼티: 목표 변수, 객체 프로퍼티: 목표 변수, ... } = Object{ }

<기존의 프로퍼티와 같은 변수명에 넣는 경우>
let { 객체 프로퍼티, 객체 프로퍼티, ... } = Object{ }
const { 객체 프로퍼티, 객체 프로퍼티, ... } = Object{ }

▷ 할당 연산자 우측에는 분해하려는 객체를 넣고, 좌측에는 상응하는 객체의 패턴을 넣는다.

 

예시(Syntax)

let user = {
    name: char1ey,
    age: 29,
}

let { name, age } = user

console.log(name) // "char1ey"
console.log(age) // 29

 

let user = {
    name: char1ey,
    age: 29,
}

let { name: nickname, age: live } = user

console.log(nickname) // "char1ey"
console.log(live) // 29

 

 

---

참고자료
https://ko.javascript.info/destructuring-assignment