[Day35] HTML, CSS, Javascript - 구조분해 할당2(Destructing Assignment)

객체 분해하기

구조 분해 할당으로 객체도 분해할 수 있다.

let {var1, var2} = {var1:…, var2:…}

할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴’을 넣는다. 분해하려는 객체 프로퍼티의 키 목록을 패턴으로 사용할 수도 있다.

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

프로퍼티 options.title과 options.width, options.height에 저장된 값이 상응하는 변수에 할당된 것을 확인할 수 있다. 참고로 순서는 중요하지 않다! 아래와 같이 작성해도 위 예시와 동일하게 동작한다.

// let {...} 안의 순서가 바뀌어도 동일하게 동작함
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

할당 연산자 좌측엔 좀 더 복잡한 패턴이 올 수도 있다. 분해하려는 객체의 프로퍼티와 변수의 연결을 원하는 대로 조정할 수도 있다.

객체 프로퍼티를 프로퍼티 키와 다른 이름을 가진 변수에 저장해보자. options.width를 w라는 변수에 저장하는 식으로! 좌측 패턴에 콜론(:)을 사용하면 원하는 목표를 달성할 수 있다.

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { 객체 프로퍼티: 목표 변수 }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

콜론은 '분해하려는 객체의 프로퍼티: 목표 변수’와 같은 형태로 사용한다. 위 예시에선 프로퍼티 width를 변수 w에, 프로퍼티 height를 변수 h에 저장했다. 프로퍼티 title은 동일한 이름을 가진 변수 title에 저장된다.

프로퍼티가 없는 경우를 대비하여 =을 사용해 기본값을 설정하는 것도 물론 가능하다. 아래와 같이 .

let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

배열 혹은 함수의 매개변수에서 했던 것처럼 객체에도 표현식이나 함수 호출을 기본값으로 할당할 수 있다. 물론 표현식이나 함수는 값이 제공되지 않았을 때 평가 혹은 실행된다.

중첩 구조 분해 (유용하게 쓰임)

객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출할 수 있다. 이를 중첩 구조 분해(nested destructuring)라고 부른다.

아래 예시에서 객체 options의 size 프로퍼티 값은 또 다른 객체이다. items 프로퍼티는 배열을 값으로 가지고 있다. 대입 연산자 좌측의 패턴은 정보를 추출하려는 객체 options와 같은 구조를 갖추고 있다.

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
  size: { // size는 여기,
    width,
    height
  },
  items: [item1, item2], // items는 여기에 할당함
  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

extra(할당 연산자 좌측의 패턴에는 없음)를 제외한 options 객체의 모든 프로퍼티가 상응하는 변수에 할당됐다.

변수 width, height, item1, item2엔 원하는 값이, title엔 기본값이 저장됐다.

그런데 위 예시에서 size와 items 전용 변수는 없다는 점에 유의해야한다. 전용 변수 대신 우리는 size와 items 안의 정보를 변수에 할당하였다.

함수 매개변수

함수에 매개변수가 많은데 이중 상당수는 선택적으로 쓰이는 경우가 종종 있다. 사용자 인터페이스와 연관된 함수에서 이런 상황을 자주 볼 수 있다. 메뉴 생성에 관여하는 함수가 있다고 해보자. 메뉴엔 너비, 높이, 제목, 항목 리스트 등이 필요하기 때문에 이 정보는 매개변수로 받는다.

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,  // width는 w에,
  height: h = 200, // height는 h에,
  items: [item1, item2] // items의 첫 번째 요소는 item1에, 두 번째 요소는 item2에 할당함
}) {
  alert( `${title} ${w} ${h}` ); // My Menu 100 200
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}

showMenu(options);

최대 급여 계산하기 문제

급여 관련 정보가 저장된 객체 salaries가 있다고 가정해 보자.

let salaries = {
  "John": 100,
  "Pete": 300,
  "Mary": 250
};

가장 많은 급여를 받는 사람의 이름을 반환해주는 함수 topSalary(salaries)를 만들어본다. 조건은 아래와 같다.

salaries가 비어있으면 함수는 null을 반환해야 합니다.
최대 급여를 받는 사람이 여러 명이라면 그 중 아무나 한 명 반환하면 됩니다.

나의 해답

let salaries = {
  John: 100,
  Pete: 300,
  Mary: 250,
};


function topSalary(salaries) {
  let maxSalary = 0;
  let maxName = null;
  for (const [name, salary] of Object.entries(salaries)) {
    if (salary > maxSalary) {
      maxSalary = salary;
      maxName = name;
    }
  }
  return maxName;
}
console.log(topSalary(salaries));

구조분해 할당과 Object.entries를 이용하여 순회하여 최대급여를 받는 사람의
이름을 추출해낼 수 있었다.