Koans-09_SpreadSyntax

• 전개 문법(spread syntax)을 학습합니다.

  const spread = [1, 2, 3];
  const arr = [0, ...spread, 4];
  expect(arr).to.deep.equal([0, 1, 2, 3, 4]);

  const spread2 = [1, 2, 3];
  const arr = [0, spread2, 4];
  expect(arr).to.deep.equal([0, [1, 2, 3], 4]);

  const spread3 = [];
  const arr = [0, spread3, 1];
  expect(arr).to.deep.equal([0, [], 1]);

  const spread4 = [];
  const arr = [0, ...spread4, 1];
  expect(arr).to.deep.equal([0, 1]);

• 여러 개의 배열을 이어붙일 수 있습니다.

  const arr1 = [1, 2, 3];
  const arr2 = [4, 5, 6];
  const concatenated = [...arr1, ...arr2];
  console.log(concatenated) // [ 1, 2, 3, 4, 5, 6]
  arr1.concat(arr2); 이것도 가능하다.

• 여러 개의 객체를 병합할 수 있습니다.

const fullPre = {
      cohort: 7,
      duration: 4,
      mentor: 'hongsik',
    };

const me = {
      time: '0156',
      status: 'sleepy',
      todos: ['coplit', 'koans'],
    };
const merged = {...fullPre, ...me};
console.log(merged)	
//
merged= {
   cohort: 7,
   duration: 4,
   mentor: 'hongsik',
   time: '0156',
   status: 'sleepy',
   todos: ['coplit', 'koans'],
}

변수 'merged'에 할당된 것은 'obj1'과 'obj2'의 value일까요, reference일까요?
// value가 할당되었습니다.
만약 값(value, 데이터)이 복사된 것이라면, shallow copy일까요, deep copy일까요?
// deep copy 입니다.

• Rest Parameter는 함수의 인자를 배열로 다룰 수 있게 합니다.
  자바스크립트는 (named parameter를 지원하지 않기 때문에) 함수 호출 시 인자의 순서가 중요합니다.

function returnFirstArg(firstArg) {
  return firstArg;
}// 첫번째 인자를 무조건 출력합니다.
 console.log(returnFirstArg('first', 'second', 'third'))//'first';

function returnSecondArg(firstArg, secondArg) {
   return secondArg;
}// 매개변수가 두개일때는 가능하다.
console.log (returnSecondArg('only give first arg'))//undefined;
console.log (returnSecondArg('abc', 'cde') // 'cde';

• rest parameter는 spread syntax를 통해 간단하게 구현됩니다.

function getAllParamsByRestParameter(...args) {
    return args;
}
console.log(getAllParamsByRestParameter(13)) // [13];
const restParams = getAllParamsByRestParameter('first', 'second', 'third');
console.log(restParams)//['first', 'second', 'third'];

• argument 객체 :(spread syntax 도입 이전)
  arguments는 모든 함수의 실행 시 자동으로 생성되는 '객체'(유사배열객체)입니다

 function getAllParamsByArgumentsObj() {
        return arguments;
 }
 const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');
console.log(Object.keys(argumentsObj))//['0', '1', '2'];
console.log(Object.values(argumentsObj))//['first', 'second', 'third'];
console.log(argumentObj)// 아래와 같이 객체 형태로 소환이 됩니다.
Arguments(3) ["first", "second", "third", callee: ƒ, Symbol(Symbol.iterator): ƒ]
0: "first"
1: "second"
2: "third"
callee: ƒ getAllParamsByArgumentsObj()
length: 3
Symbol(Symbol.iterator): ƒ values()

• argumetns와 rest parmeter를 통해 배열로 된 인자(args)의 차이를 확인하시기 바랍니다.

expect(restParams === argumentsObj).to.deep.equal(false);
//restParams :배열  argumentsObj :객체
expect(typeof restParams).to.deep.equal('object');
expect(typeof argumentsObj).to.deep.equal('object');
expect(Array.isArray(restParams)).to.deep.equal(true);
expect(Array.isArray(argumentsObj)).to.deep.equal(false);

• Array.from() method

const argsArr = Array.from(argumentsObj);
expect(Array.isArray(argsArr)).to.deep.equal(true);
expect(argsArr).to.deep.equal(['first', 'second', 'third']);
expect(argsArr === restParams).to.deep.equal(false);
// 주소가 다르기 떄문에 같지 않습니다.

• Rest Parameter는 인자의 수가 정해져 있지 않은 경우에도 반복을 통해서 유용하게 사용할 수 있습니다.

function sum(...nums) {
  let sum = 0;
  for (let i = 0; i < nums.length; i++) {
     sum = sum + nums[i];
    }
  return sum;
}
    expect(sum(1, 2, 3)).to.equal(6);
    expect(sum(1, 2, 3, 4)).to.equal(10);

• Rest Parameter는 인자의 일부에만 적용할 수도 있습니다.

function getAllParams(required1, required2, ...args) {
  return [required1, required2, args];
}
expect(getAllParams(123)).to.deep.equal([123, undefined, []]);

function makePizza(dough, name, ...toppings) {
  const order = `You ordered ${name} pizza with ${dough} dough and ${toppings.length} extra toppings!`;
  return order;
}
expect(makePizza('original')).to.equal(`You ordered undefined pizza with original dough and 0 extra toppings!`);
expect(makePizza('thin', 'pepperoni')).to.equal(`You ordered pepperoni pizza with thin dough and 0 extra toppings!`);
expect(makePizza('napoli', 'meat', 'extra cheese', 'onion', 'bacon')).to.equal(`You ordered meat pizza with napoli dough and 3 extra toppings!`);

출처: 코드스테이츠