구조 분해 할당.md

구조 분해 할당

객체나 배열을 변수로 분해 할 수 있는 문법을 구조 분해 할당이라고 한다.

배열 분해

// 예시1. 배열 분해
let array = ["fast", "campus"];
let [name1, name2] = array; // name1: fast, name2: campus
let [name3, name4] = "fast campus".split(' ');  // name3: fast, name4: campus

// 예시1과 같은코드
let name1 = array[0];
let name2 = array[1];

// 예시2. 쉼표로 요소(element) 건너뛰기
let [name1, , name2] = ["fast", "campus", "study", "team7"];  // name1: fast, name2: study
// campus는 공란이기 때문에 skip, team7은 변수선언이 안돼서 skip

// 예시3. '...' (rest문법)으로 요소 가져오기.
let [name1, ...rest] = ["fast", "campus", "study", "team7"];  // name1: "fast", rest: ["campus", "study", "team7"]

// 예시4. 기본값
let [name1, name2] = []; // name1: undefined, name2: undefined
let [name1 = "study", name2 = "team7"] = ["fast"];  // name1: fast (배열값), name2: team7

객체 분해

// 기본 문법
let {var1, var2} = {var1: ~, var2: ~}

// 예제1.
let options = {
  name: "Victor Crest",
  age: 26,
  location: "London"
}
// 객체 분해는 객체 프로퍼티 순서와 무관하고, 원하는 프로퍼티만 뽑아낼 수 있다.
let {age, location, name} = options; // age: 26, location: London, name: Victor Crest

// 예제2. 객체 프로퍼티와 변수.
// 객체 프로퍼티를 원하는 변수명으로 지정할 수 있다.
let {age, location: loc, name} = options; // age: 26, loc: London, name: Victor Crest

// 예제3. 기본값
let {age, followers = 70000} = options; // age: 26, followers: 70000

// 예제4. 예제3 4 혼합
let {age = 30, followers = 70000, likes: l = 4000} = options;// age: 26, followers: 70000, l: 4000

// 예제5. rest 문법.
// 프로퍼티 순서와 무관하게 rest문법을 사용하면 나머지 프로퍼티를 가져올 수 있다.
let {name, ...rest} = options;  // name: Victor Crest, rest.age: 26, rest.location: London
let {age, ...rest} = options; // age: 26, rest.name: Victor Crest, rest.location: London

// 예제6. let없이 사용하기 (선언 없는 할당)
{name, ...rest} = options; // Uncaught SyntaxError: Unexpected token
({name, ...rest} = options) // () 문으로 묶으면 작동한다.

// 예제7. 계산된 속성이름
let key = "name";
let {[key]: a1} = options; // a1: Victor Crest

중첩 구조 분해

객체나 배열이 다른 객체나 배열을 포함하는 경우 복잡한 패턴을 사용해 중첩 구조 분해를 할 수 있다.

let options = {
  person: {
    name: "Victor Crest",
    age: 26,
    location: "London"
  },
  arrays: ["fast", "campus", "study", "team7"],
  title: "TIL"
}

let {
  person: {   // person이 아닌 다른 프로퍼티명은 오류가 발생한다.
    name,
    location: loc,
    ...rest
  },
  arrays: [name1, , name2],
  followers = 7000  // followers라는 프로퍼티가 없으므로 기본값을 사용한다.
} = options;

// person.name: 오류발생, name: Victor Crest, loc: London, rest: {age: 26}
// name1: fast, name2: study
// followers = 7000
// title: 변수를 할당하지 않았으므로 오류가 발생한다.

반복문과 구조 분해

var people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith",
    },
    age: 35,
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones",
    },
    age: 25,
  },
];

for (var {
  name: n,
  family: { father: f },
} of people) {
  console.log("Name: " + n + ", Father: " + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

똑똑한 함수 매개변수

함수의 매개변수는 순서에 맞게 넣어줘야 정상적으로 작동하는게 일반적이지만, 구조 분해를 통해 매개변수 할당을 좀더 편하게 할 수 있다.

const getProfile = (name, age, location, arrays = []) => {
  // ...
}

// 예제1. 기본 사용법
// 각 매개변수에 맞게 함수 호출시 변수를 넣어줘야 하며, 없는 변수는 undefined를 넣어줘야 합니다.
getProfile("Victor Crest", undefined, "London", undefined);

// 예제2. 똑똑한 함수 매개변수
let options = {
  name: "Victor Crest",
  age: 26,
  arrays: ["fast", "campus", "study", "team7"]
}

const getProfile = ({name, age = 30, location: loc, followers = 7000 , arrays}) => {
  // ...
  console.log(name);
  console.log(age);
  console.log(loc);
  console.log(followers);
  console.log(arrays);
}

getProfile(options);
// name: Victor Crest, age: 26, loc: undefined, followers: 7000, arrays: ["fast", "campus", "study", "team7"]

// 예제3. 기본값 할당
getProfile({}); // age: 30, followers: 7000, 다른 변수: undefined
getProfile(); // 오류발생가능성 있음

// 예제4. 매개변수 없이 함수 호출시 오류 제거
const getProfile = ({name, age = 30, location: loc, followers = 7000 , arrays} = {}) => {
  // ...
  console.log(name);
  console.log(age);
  console.log(loc);
  console.log(followers);
  console.log(arrays);
}

getProfile();

정리

• 구조 분해 할당을 사용하면 객체나 배열을 변수로 연결할 수 있다.
• 배열 분해: let [item1 = defaultValue, item2: i2 = defaultValue, ...rest] = arrays;
  • arrays의 첫번째요소를 item1으로, 두번째 요소는 item2에 할당하며, 나머지 요소는 rest배열에 저장된다.
  • 첫번째 요소가 비어있을 경우 defaultValue로 item1을 지정한다.
  • item2는 변수명이 i2로 저장되며 item2로는 호출이 불가하다.
• 객체 분해: let {prop: varName = defaultValue, ...rest} = object;
  • object의 프로퍼티 prop을 변수 varName에 할당하고, prop이 없을경우 defaultValue로 할당한다.
  • 변수를 지정하지 않은 프로퍼티들은 객체 rest에 할당된다.

참고자료

• 구조 분해 할당 - mdn