[Javascript][ES6] 객체 구조 분해 할당 (Object Destructuring) / 전개 구문 (Spread Operator) / Rest parameter

객체 구조 분해 할당 (Object Destructuring)

구조 분해 할당(Destructuring)은

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

 

우리는 Object Destructuring을 알아보자.

 

다음과 같이 객체와 속성이 선언되어 있고,

그를 콘솔창에 출력할 때 우리는 변수를 선언한다

 

const human = {
  name: "snupi",
  lastName: "Lee",
  nationality: "KOR",
  favFood: {
    breakfast: "egg",
    lunch: "watermelon",
    dinner: "anyfood"
  }
}

const name = human.name;
const difName = human.lastName;
const nationality = human.nationality;
const lunch = human.favFood.lunch;

console.log(name, difName, nationality, lunch);

 

 

위와 같이 네 변수를 따로 선언하는 것을 Object Dstructuring을 이용한다.

 

const human = {
  name: "snupi",
  lastName: "Lee",
  nationality: "KOR",
  favFood: {
    breakfast: "egg",
    lunch: "watermelon",
    dinner: "anyfood"
  }
}

const { 
  name,
  lastName: difName,
  nationality,
  favFood: { breakfast, lunch, dinner }
} = human;

console.log(name, difName, nationality, lunch);

 

보다 간편하게 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 한다.

보는 것과 같이,

lastName -> difName) : 이후 다른 이름으로 하면 변수의 이름을 바꿔서 저장하고,

favFood.lunch) 중괄호를 넣으면 해당 객체 안으로 들어가게 된다.

 

---

 

개별 변수에 담을 때, = defaultValue 로 기본값을 설정할 수 있다

 

const settings = {
  theme: "dark"
};

const { notification: { follow = false } = { } } = settings;
 
console.log(follow);
// false

 

위 개별 변수 선언은,

setting 객체 안의 notification 값이 없으면 { } 빈 객체로 기본값이 설정되고,

notification 안의 follow 값이 없으면 false 기본값이 설정되도록 한다

 

---

 

문법 예시

 

export default withRouter(({ location: { pathname } }) => (
  <Header>
    <List>
      <Item current={pathname === "/"}>
        <SLink to="/">Movies</SLink>
      </Item>
      <Item current={pathname === "/post"}>
        <SLink to="/post">Post</SLink>
      </Item>
      <Item current={pathname === "/search"}>
        <SLink to="/search">Search</SLink>
      </Item>
    </List>
  </Header>
));

 

가져온 props의 location-pathname 속성을 가져와 "/~" 문자열과 비교하여 제어한다

 

---

전개 구문 (Spread Operator)

Spread Operator는 여러 배열이나 객체의 contents를 가지는 배열이나 객체로 확장시킬 수 있게 한다. (Unpack)

 

예를 들어 다음과 같다.

 

const nums = ["1", "2", "3", "4", "5"];
const otherNums = ["6", "7", "8", "9"];

// const sumNums = ["0", nums, otherNums];
const sumNums = ["0", ...nums, ...otherNums];

console.log(sumNums);

 

두 배열의 콘텐츠를 한 배열에 가지게 된다.

...을 안 붙인다면, 두 "배열"이 한 배열에 있게 된다.

객체에서도 이와 같이 적용된다.

...를 붙여 한 객체에 두 "객체"가 있는 것이 아니라 두 객체의 콘텐츠를 가질 수 있다.

 

---

Rest Parameter

Rest 파라미터 구문은 정해지지 않은 수(부정수) 인수를 배열로 나타낼 수 있게 한다.

 

Spread Operator 구문과 같은 `...` 표현이지만,Spread Operator 구문은 확장,Rest 파라미터 구문은 배열로 축소를 하게 된다 (파라미터 부분에 들어가면 rest)

 

함수의 마지막 파라미터의 앞에 ... 를 붙여

모든 나머지 인수를 표준 자바스크립트 배열로 대체한다.

 

또한, 마지막 파라미터만 "Rest 파라미터" 가 될 수 있다.

 

function Rest(arg1, arg2, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

Rest("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

 

다른 예시로는 다음과 같이

객체를 클론할 때,

몇 property를 배제한 채 클론하고 싶을 때 유용한 경우다

 

class ObjectUtilities {
  // ***** rest *****
  static removePassword1 = ({ password, ...obj }) => obj;
  // ***** rest *****
  
  static removePassword2 = (obj) => {
    const noPasswordObj = Object.assign({}, obj);
    delete noPasswordObj.password;
    return noPasswordObj;
  };
  
  static removePassword3 = (obj) => {
    const noPasswordObj = Object.assign({}, obj, {password: undefined});
    return noPasswordObj;
  };
}

const obj = {
  name: "snupi",
  password: "12345",
  favFood: "Kimchi"
};

 

같은 방법으로, 다음 예시는

배열의 첫 원소를 제외하는 방법이다

 

class ArrayUtilities {
  // ***** rest *****
  static removeFirst1 = ([ first, ...numbers ]) => numbers;
  // ***** rest *****

  static removeFirst2 = (numbers) => {
    const noFirstNums = Object.assign([], numbers);
    noFirstNums.shift();
    return noFirstNums;
  };
}

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

 

다음 예시는

destructuring 한 속성의 기본값을 설정한다

 

const user = {
  name: "snupi",
  age: 24,
  password: 12345
}

const setCountry = ({ country = "KR", ...rest}) => ({
  country, ...rest
});

console.log(setCountry(user));

 

마지막으로 다음 예시는

destructuring 한 속성의 이름을 재설정한다

 

const user = {
  name: "snupi",
  age: 24,
  password: 12345
}

const rename = ({ name: NAME, ...rest}) => ({
  NAME, ...rest
});

console.log(rename(user));

 

---

MDN:

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

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

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

;

Nomad Coders;