[JS] 매개변수가 많아질 때 고민 | 구조 분해 할당 #객체편

구조 분해 할당

구조 분해 할당(Destructuring)은 객체나 배열의 속성을 분해하여 변수에 값을 쉽게 할당 및 추출할 수 있는 문법이다. 특히 함수의 매개변수가 많아질 때 사용하면 아주 기분이 좋아진다. 가독성과 유지보수가 좋아진다. 

 

 

기본 문법

const obj = {
    name: "길동",
    age: 30,
}

const { name, age } = obj;
console.log(name, age); // 길동 30

• `name`과 `age` 속성이 있는 `obj`객체를 정의
• '`const {name, age} = obj`': `obj` 속성에 정의된 값들을 `name`과 `age`에 할당
  • 이 때 `obj` 의 속성명과 같은 변수에 값을 할당
  • 순서는 상관 없음
  • 변수가 더 많거나 적어도 상관 없고, 속성명과 다른 변수에는 `undefined` 할당 됨

---

 구조 분해를 쓰지 않는 함수의 매개변수

let name = '길동';
let hobby = '달리기';
let age = 30;
let height = 160;
let birthday = '01/01'

print(name, hobby, age, height, birthday);

function print(name, hobby, age, height, birthday) {
    console.log(name, hobby, age, height, birthday);
}

문제점

• 매개변수가 많아짐에 따라 관리하기가 귀찮아진다.
  • 매개변수가 추가되면 인자로 전달할때, 매개변수로 받을때 두 군데 전부 추가해주어야 한다. 
  • 순서를 맞춰야한다. => 이게 제일 귀찮은 부분인 것 같다.

 

구조 분해를 쓰는 함수

const person = {
    name: '길동',
    hobby: '달리기',
    age: 30,
    height: 160,
    birthday: '01/01'
};

print(person);

function print({ name, hobby, age, height, birthday }) {
    console.log(name, hobby, age, height, birthday);
}

가독성 부분에서는 별 차이 없어 보이지만 유지보수성에서 큰 장점이 있다. 

• 변수의 추가, 수정, 삭제 등이 발생해도 매개변수로 받는 함수에서만 수정하면 된다.
• 순서를 전혀 신경쓰지 않아도 된다. (이름만 같으면 자동으로 변수에 할당됨)

---

약간의 응용

기본 값 설정하기

const person = {
    name: '길동',
    hobby: '달리기',
};

print(person);

function print({ name = null, hobby = null, age = null, height = null, birthday = null }) {
    console.log(name, hobby, age, height, birthday);
}

값을 받지 못할 경우 설정해 놓은 기본 값이 할당 된다. (undefined 대신 할당 된다.)

 

 

변수명 재할당

const person = {
    userId: 'qwer',
    name: '길동',
    age: 30,
}

function func({ userId: id, ...rest }) {
    console.log(id); // 'qwer'
    console.log(rest); // {name: '길동', age: 30}
}

func(person)

 

• `person`: 3가지 속성을 가진다. (`userId`, `name`, `age`)
• `userId`값을 `id`라는 변수로 사용한다.
  • 이때 userId는 사용이 불가능하게 된다. 
• 나머지 속성들은 rest 문법을 사용하여 전달 받는다.