[JS] Spread / Rest / 구조분해

node 설치된 환경에서 terminal으로 파일 실행법은 >> node 파일명.확장자

Spread 문법

배열을 풀어서 인자로 전달 / 배열을 풀어서 각각의 요소로 넣을 때에 사용함
객체 혹은 배열을 펼칠 수 있다.

const anotherAnimals = [...animals, '나무늘보'];
console.log(animals); // ["호랑이", "코끼리", "늑대"]
console.log(anotherAnimals); // ["호랑이", "코끼리", "늑대", "나무늘보"]

용례

function sum(x, y, z) {
    return x + y + z;
    };
const animals = ['호랑이','코끼리','늑대'];
console.log(sum(...animals)); // 호랑이코끼리늑대

---------------------------------------------

let highRankers = ['challenger', 'master'];
let users = ['bronze', 'silver', 'gold', 'platinum', 'diamond', ...highRankers];

console.log(users);// 
[
  'bronze',
  'silver',
  'gold',
  'platinum',
  'diamond',
  'challenger',
  'master'
]

---------------------------------------------

let ranks = ['bronze', 'silver', 'gold', 'platinum'];
let highRanks = ['challenger', 'master','diamond'];
ranks = [...ranks, ...highRanks];  // 
console.log(ranks); // 
[
  'bronze',
  'silver',
  'gold',
  'platinum',
  'challenger',
  'master',
  'diamond'
]
**spread 문법은 기존 배열을 변경하지 않는다(immutable)
결과값을 바꾸려면 새롭게 할당할 것

---------------------------------------------

복사도 가능하다.

let ranks = ['bronze', 'silver', 'gold', 'platinum'];
let ranks2 = [...ranks];

console.log(ranks); // [ 'bronze', 'silver', 'gold', 'platinum' ]
console.log(ranks2); // [ 'bronze', 'silver', 'gold', 'platinum' ]

ranks2.push('platinum');

console.log(ranks); // [ 'bronze', 'silver', 'gold', 'platinum' ]
console.log(ranks2); // [ 'bronze', 'silver', 'gold', 'platinum', 'diamond' ]
**spread 문법은 기존 배열을 변경하지 않으므로(immutable), ranks2를 수정해도 rank는 안바뀜.

---------------------------------------------

객체에서는?

let obj = { vermonter: 'diamond', villain: 'platinum' };
let obj2 = { ledley: 'bronze', villain: 'iron' };

let clonedObj = { ...obj};
let mergedObj = { ...obj, ...obj2 };

console.log(clonedObj); // { vermonter: 'diamond', villain: 'platinum' }
console.log(mergedObj); // { vermonter: 'diamond', villain: 'iron', ledley: 'bronze' } 
**병합되면서 villain이라는 키가 이미 있었고, 다른 값 'iron'이 할당됨.
만약 다른 키-값을 가지고 있었으면 그것이 추가되어서 결과값에 출력되었을것임.

Rest 문법

파라미터를 배열의 형태로 받아서 사용할 수 있음. 파라미터 개수가 가변적일 때 유용함.
(객체, 배열, 함수의 파라미터에서 사용 가능)

용례

function myRank(a, b, ...otherRanks) {
  console.log("vermonter", a);
  console.log("ledley", b);
  console.log("otherRanks", otherRanks);
}

myRank("bronze", "silver", "gold", "platinum", "diamond", "master")
// 
vermonter bronze
ledley silver
otherRanks [ 'gold', 'platinum', 'diamond', 'master' ]

;

구조 분해(Destructing)

Spread 문법을 이용하여 값을 해체 > 개별 값을 변수에 새로 할당하는 과정

용례

[vermonter, ledley, ...rest] = ['silver', 'gold', 'platinum', 'diamond', 'master'];
console.log(vermonter); // silver
console.log(ledley); // gold
console.log(...rest); // platinum diamond master

---------------------------------------------

함수에서 객체를 분해하는 유용한 예시

function whoAmI({displayName: displayName, fullName: {firstName: name}}){
    console.log(displayName + " is " + name);
    }

    let user = {
        id: 34,
        displayName: "vermonter",
        fullName: {
            firstName: "Byron",
            lastName: "Kim"
    }
};

whoAmI(user) // vermonter is Byron