[ES6] Destructuring

sujip·2023년 6월 15일

목록 보기

5/8

Destructuring

: object나 array의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게하는 JS 표현식. (object나 array, 그 외 요소들 안의 variable을 바깥으로 끄집어내서 사용할 수 있도록 하는 것.)

1. object destructuring

ex)
const settings = {
  notifications: {
    follow: true,
    alerts: true,
    unfollow: false
  };
  color: {
  theme: "dark"
  }
};
const {notifications: {follow}} = settings;
/* settings 안의, notifications 안의, follow만을 가져오는 방법. */
/* 만약 color 안의 theme만이 아닌 color 전체도 가져오고 싶다면,
const {notifications: {follow}, color} = settings;*/

-> 위와 같은 방식은 큰 object에서 특정 variable이나 그 안에 속한 작은 object에 접근할 수 있도록 해준다.

선택한 특정 변수에 대한 이해.

ex)
const {notifications: {follow}} = settings;
// 는 notifications 안의 follow를 변수로 꺼내는 것이지,
// notifications을 변수로 꺼내는 것이 아니기 때문에,
console.log(notifications);
// 출력값이 undefined 로 나온다.
console.log(follow);
// 위와 같이 작성해야 정상 작동한다.

+ object에 default value 주기.

ex)
const settings = {
  notifications: {
    alerts: true,
    unfollow: false
  };
  color: {
    theme: "dark"
  }
};
const {notifications: {follow = false}} = settings;
// follow = false 로 default value 설정.
// settings 안의, notifications 안의 follow를 찾고,
// follow가 없으면, 위에서 설정한 default value를 준다.

notifications object가 아예 존재하지 않을 때, 기본값 설정.

ex)
const settings = {
  color: {
    theme: "dark"
  }
};
const {notifications: {follow = false} = {}} = settings;
// settings 안의, notifications 안의 follow를 찾고,
// follow가 없으면, 위에서 설정한 기본값을 준다.
// 이때, notifications이 없다면, notifications은 빈 object 이다.
// 이게 바로 one-line-statement

2. Array destructuring

: 가져온 정보를 조작하지 않을 때 사용하기 좋다.
(반대로, 조작할 필요가 있을 땐, object destructuring을 사용.)

1. array 중 첫 번째 요소 ~ 세 번째 요소 가져오기.
ex)
const day = [“Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”, “Sun”];
const [mon, tue, wed] = days;
array에 3개의 요소만 있을 때, 네 번째 요소에 기본값을 주고 집어넣기.
ex)
const day = [“Mon”, “Tue”, “Wed”];
const [mon, tue, wed, thu = "Thu"] = days;
// 기본값을 지우면, thu의 출력값은 undefined가 된다.

3. Rename

ex)
const settings = {
  color: {
    chosen_color: "dark"
  }
};
const {
  color: {chosen_color: "light"}
} = settings;
console.log(chosen_color);

위의 예시 코드에서 chosen_color를 renaming 해주기.

ex)
const settings = {
  color: {
    chosen_color: "dark"
  }
};
const {
  color: {chosen_color: chosenColor = "light"}
} = settings;
// 위의 코드는 settings 안의 color에서 chosen_color 변수를 가져오고,
// 가져온 변수의 이름을 바꿔준 뒤, 만약 가져온 변수의 값이 존재하지 않으면, 기본값으로 "light" 라는 값을 넣어준것이다.
console.log(chosenColor);

2번 예시 코드에서 renaming 해준 chosenColor 값 업데이트 하기.

ex)
const settings = {
  color: {
    chosen_color: "dark"
  }
};
let chosenColor = "blue"
const {
  color: {chosen_color: chosenColor = "light"}
} = settings;
// 이때, let chosenColor 아래의 변수를 let으로 바꾸면 같은 변수가 두번 선언되므로 X,
// const는 같은 이름의 다른 변수가 생기는 것이므로 X.
// 이때, 사용하는 방법이 4번의 예시 코드이다.
console.log(chosenColor);

3번 예시 코드 수정하기.

ex)
const settings = {
  color: {
    chosen_color: "dark"
  }
};
let chosenColor = "blue"
({
  color: {chosen_color: chosenColor = "light"}
} = settings);
// 새로운 변수를 생성하는 대신, let chosenColor를 업데이트 해준것.
console.log(chosenColor);

4번 예시 코드 확인하기.

ex)
const settings = {
  color: {
    chosen_color: "dark"
  }
};
let chosenColor = "blue"
console.log(chosen_color);
// 출력값 = blue
({
  color: {chosen_color: chosenColor = "light"}
} = settings);
console.log(chosen_color);
// 출력값 = dark

4. Function destructuring

ex)
function saveSettings(followAlert, unfollowAlert, mrkAlert, themeColor) {
};
// 이때, argument가 너무 길기때문에, argument를 settings object 안에 넣어준다.

1번 예시 코드 수정

ex)
function saveSettings(settings) {
  console.log(settings);
};
saveSettings({
  follow: true,
  unfollow: true,
  nrk: true,
  color: "green"
});

2번 예시 코드에서 1) 변수들의 가독성을 확보하고, 2) 각 변수의 기본값 설정하기.

ex)
function saveSettings({follow, unfollow, color = "blue"}) {
  console.log(color);
  // 출력값 = blue
  // 아래의 saveSettings 안에 color 값이 없어도 기본값을 설정해, 출력값이 blue로 나온다.
};
saveSettings({
  follow: true,
  unfollow: true,
  nrk: true,
});

또다른 예시 코드.

ex)
function saveSettings({notifications, color = {theme}}) {
  console.log(theme);
};
saveSettings({
  notifications: {
    follow: true,
    unfollow: true,
    nrk: true,
  },
  color: {
    theme: "blue"
  }
});

value shorthand(변수명 단축)

shorthand property

: key값과 변수명이 같을때, 반복되는 부분을 제거할 수 있다.

1.

ex)
const follow = checkFollow();
const alert = checkAlert();
const settings = {
  notifications: {
    follow: follow,
    alert: alert
  }
  // follow: follow, alert: alert 처럼, key값과 변수명이 같을 경우,
  // 반복되는 부분을 제거할 수 있다.
};

1번 예시 코드를 shorthand한 코드.

ex)
const follow = checkFollow();
const alert = checkAlert();
const settings = {
  notifications: {
    follow,
    alert
  }
};

Swapping and Skipping

1. Swapping variable

ex)
let mon = "Sat";
let sat = "Mon";
1번 예시 코드의 잘못된 변수들을 이용해 새로운 array 만들기.
ex)
let mon = "Sat";
let sat = "Mon";
[] = [mon, sat];
2번의 예시 코드에서 array destructuring 하기.
ex)
let mon = "Sat";
let sat = "Mon";
[sat, mon] = [mon, sat];
console.log(sat);
// 출력값 = Sat
console.log(mon);
// 출력값 = Mon

2. Skipping variable

array에서 마지막 2개의 요소 가져오기.

ex)
const days = [“mon”, “tue”, “wed”, “thu”, “fri”];
const [,,, thu, fri ] = days;
// 앞의 변수를 생략하고, ",(콤마)"로 표시한 뒤,
// 가져오고자 하는 마지막 2개의 요소만 적는다.
console.log(thu, fir);
// 출력값 = thu, fri