[JS] Rest parameter, Spread syntax

Rest parameter

// 파라미터를 배열의 형태로 받아서 사용
// 파라미터의 개수가 가변적일 때 유용함!!

const sum = function(...args) { 
  return args.reduce((prev, curr) => {
    return prev + curr;
  });
}

sum(1, 2, 3) // 6
sum(1, 2, 3, 4) // 10

rest param 이해하면서 재귀도 보고.. 믹스 공부

• array의 인스턴스로 array method 를 사용할 수 있다.
• args를 하나의 배열로 받는다.
  아래 코드에서 함수호출을 args[0]으로 했다.
• slice로 targetArr의 첫 번째 요소를 제거한 값을 인자로 넣었지만, targetArr의 값 자체는 변하지 않는다.
• 헷갈리면 console.log 로 다 넣어서 일일이 확인하자!!

문제 : 숫자 배열의 모든 숫자를 프린트합니다. 여기에서 반드시 재귀를 사용해야 합니다.

const printArray = function (...args) {
  function _print(targetArr) {
   // console.log(`targetArr length : ${targetArr.length}`)
   // console.log(`targetArr : ${targetArr}`)
    if (targetArr.length === 0) {
      return;
    } else {
      let temp = targetArr[0];
	  // console.log(`temp : ${temp}`)
      
      if (Array.isArray(temp)) {
        _print(temp);
        _print(targetArr.slice(1));
      } else if (temp) {
      // console.log(`targetArr : ${targetArr}`);
      // console.log(temp);
        _print(targetArr.slice(1));
      } else {
        _print(targetArr.slice(1));
      }
    }
  }

  _print(args[0]);
  // console.log(`args : ${args}`);
  // console.log(`args[0] : ${args[0]}`);
  // console.log(`args[1] : ${args[1]}`)
  // console.log(`args.slice : ${args[0].slice(1)}`);
  // console.log(`args : ${args[0]}`)
};

printArray([1, 2, ,[3, 4], 5]); 
// 1
// 2
// 3
// 4
// 5

---

Spread syntax

// 배열을 풀어서 인자로 전달하거나, 각각의 요소로 넣을 때 사용
const sum = function(a, b, c) {
  return a + b + c;
}

const nums = [1, 2, 3];

sum(...nums) // 6

1) 배열 합치기

let lyrics = ['sweet','as']
let words = ['life', 'is', ...lyrics,  'honey']

words // ["life", "is", "sweet", "as", "honey"]

let arr1 = ['get', 'up']

let arr2 = ['in','the','morn']

arr1 = [...arr1, ...arr2]
// ["get", "up", "in", "the", "morn"]

2) 객체 합치기

// key가 같은 value는 마지막에 선언된 객체의 값이 모두 덮어쓰고,
// key가 같은 것이 없는 경우는 속성(키-값쌍) 그대로 반환된다
let obj1 = {name : 'JK', age : 25};
let obj2 = {name : 'RM', position : 'leader'}

let cloneObj1 = {...obj1}
cloneObj1
// {name: "JK", age: 25}

let mergeObjs = {...obj1, ...obj2}
mergeObjs
// {name: "RM", age: 25, position: "leader"}

3) 함수에서 나머지 파라미터 받아오기

const nums = function(a, b, ...args) {
    console.log('a', a);
    console.log('b', b);
    console.log('args', args);
}

nums(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
// a 1
// b 2
// args [3, 4, 5, 6, 7, 8, 9, 10]

---

읽어보기