TIL [비구조화 할당]

객체 비구조화 할당

일반적으로 함수에 객체를 파라미터로 받아와서 사용할 경우

const user = {
  name: 'Peter',
  age: 22,
  city: 'Seoul'
}

function showUserInfo(user){
  const info = `유저 이름: ${user.name}, 나이: ${user.age}, 
사는 곳: ${user.city}`; 
  
  console.log(info); 
}

showUserInfo(user); // 유저 이름: Peter, 나이: 22, 사는 곳: Seoul

showUserInfo함수는 파라미터인 user 객체에 있는 정보를 조회할 때 마다 user. 이라는 객체의 키 값을 이용하여 정보를 조회하는 것을 볼 수 있다. 하지만 이를 더 짧고 간편하게 쓰기 위해선 비구조화 할당을 이용하면 된다.

1. 객체를 파라미터로 받은 후 함수 내에서 비구조화 할당을 한 경우

const user = {
  name: 'Peter',
  age: 22,
  city: 'Seoul'
}

function showUserInfo(user){
  const {name, age, city} = user;
  // const name = user.name 
  // const age = user.age 
  // const city = user.city
  const info = `유저 이름: ${name}, 나이: ${age}, 
사는 곳: ${city}`; 
  
  console.log(info); 
}

showUserInfo(user);

비구조화 할당 문법은 const {변수(객체의 key와 같은)} = 객체; 라고 하면 끝이다. 그러면 알아서 변수들이 객체안의 key값을 가르키게 된다.

2. 함수의 파라미터 단계에서 비구조화 할당을 한 경우

1번의 예시보다 더 간편한 예시가 있다. 바로 함수의 파라미터 부분에서 비구조화 할당을 하는 것이다.

const user = {
  name: 'Peter',
  age: 22,
  city: 'Seoul'
}

function showUserInfo({name, age, city}){
  const info = `유저 이름: ${name}, 나이: ${age}, 
사는 곳: ${city}`; 
  
  console.log(info); 
}

showUserInfo(user);

전의 예시들 보다 훨씬 더 간결해 진 모습을 확인할 수 있다.

3. 예외적인 경우 - 파라미터 단계에서 비구조화 할당 시 값이 없는 경우

const user = {
  name: 'Peter',
  age: 22,
  city: 'Seoul'
}

function showUserInfo({name, age, city, hobby}){
  const info = `유저 이름: ${name}, 나이: ${age}, 
사는 곳: ${city}, 취미: ${hobby}`; 
  
  console.log(info); 
}

showUserInfo(user); // 유저 이름: Peter, 나이: 22, 사는 곳: 
		    // Seoul, 취미: undefined

user안에 key는 name, age, city가 다 인데 함수의 파라미터는 hobby가 포함되어 있어서 undefined를 반환한 것을 볼 수 있다. 이럴 경우에는 기본 값을 함수의 파라미터 단계에서 넣어주면 된다.

const user = {
  name: 'Peter',
  age: 22,
  city: 'Seoul'
}

function showUserInfo({name, age, city, hobby = 'game'}){
  const info = `유저 이름: ${name}, 나이: ${age}, 
사는 곳: ${city}, 취미: ${hobby}`; 
  
  console.log(info); 
}

showUserInfo(user); // 유저 이름: Peter, 나이: 22, 사는 곳: 
		    // Seoul, 취미: game

4. rest/spread 문법을 이용한 객체 분해

const person = {
       name: '김코딩',
       age: 23,
       level: 'Junior',
     }
const {name, ...args} = person;
console.log(name); // '김코딩'
console.log({...args}); // { age: 23, level: 'Junior }

const person = {
       name: '조이서',
       major: '생물학과',
       lesson: '생물',
       grade: 'A'
     }
const { name, lesson: course, grade} = person;
console.log(name); // 조이서
console.log(lesson); // 생물
console.log(course); // 생물
// const lesson = person.lesson = course = '생물'
console.log(grade); // A

5. spread 문법을 이용한 객체의 복사

const user = {
      name: '김코딩',
      company: {
        name: 'Code States',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
       age: 35
     }

const overwriteChanges = {
  name: '박해커',
  age: 20, 
  ...user
}
console.log(overwriteChanges); 
// user = {
//      name: '김코딩',
//      company: {
//        name: 'Code States',
//        department: 'Development',
//        role: {
//          name: 'Software Engineer'
//        }
//      },
//       age: 35
//     }

처음에 overwriteChanges 객체안에 name과 age가 있었지만 객체 user를 복사하면서 값이 덮어 씌워졌다. 따라서 name과 age값도 바뀐 것을 확인할 수 있다.

배열 비구조화 할당

배열도 객체와 마찬가지로 비구조화 할당을 할 수 있다. 이 문법은 배열 안에 있는 원소를 다른 이름 (변수)로 새로 선언해주고 싶을 때 사용하면 된다.

1. 배열의 요소를 변수에 할당하는 경우

const array = [1, 2];
const [one, two] = array; 
// const [one, two] = [1, 2]
// const one = array[0]
// const two = array[1]

console.log(one); // 1
console.log(two); // 2

기본 값이 주어진 경우

var a, b;

[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

2. 함수의 파라미터 단계에서 비구조화 할당을 한 경우

const arr = [1, 2];

function addValue([a, b]){
  return a + b;
}
addValue(arr); // 3

3. rest/spread 문법을 이용한 배열 분해

const array = ['code', 'states', 'im', 'course'];
const [start, ...rest] = array;
console.log(start) // code
console.log(rest) // ['states', 'im', 'course'] 

rest 파라미터를 쓰면 배열이 나온다는 사실을 잊어버리면 안된다.

4. 변수 값 교환하기

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

const로 변수를 선언할 경우 값이 바뀌기 때문에 사용할 수 없다. 변수 값을 교환하려면 let이나 var를 이용해야 한다.

자료 출처:

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment