spread syntax, rest parameter, argument

spread syntax

//spread syntax로 배열 복사하기
const hobbies = ['Sports','Coocking'];
const copiedHobies = [...hobies];
console.log(copiedHobies); //['Sports','Coocking']

//spread syntax로 객체 복사하기
const person = {
  name:'Max',
  age:29,
  greet(){
    console.log('Hi, my name is' + this.name);
  }
};
const copiedPerson = {...person};
console.log(copiedPerson); //person 객체와 일치한다

rest parameter

//인자를 3개 받는 함수의 인자를 배열에 담아 리턴하는 함수
const toArray1 = (arg1,arg2,arg3) => {
  return [arg1,arg2,arg3];
};
console.log(toArray1(1,2,3)); //[1,2,3]
//하지만 만약 인자를 4개 주고 싶다면?
//이 함수는 인자를 3개까지만 입력받는다고 선언되어 있으므로 3개까지만 리턴시킬 수 있다

//인자가 총 몇개인지 모르는 함수의 인자를 배열에 담아 리턴하는 함수
const toArray2  = (...args) => {
  return args;
}
console.log(toArray2(1,2,3,4,5,6)); //[1,2,3,4,5,6]

arguments

ES6 호환코드를 작성중이라면 되도록 rest parameter 구문을 사용할 것!

arguments는 함수 실행시 자동으로 생성되는 Array 형태의 객체이다. length 속성과 인덱스 속성을 가지고 있지만, Array의 forEach, map, push, shift와 같은 내장 메서드는 가지고 있지 않다.

1. 함수의 인수에 접근하기

let argsObj = {}; //빈 객체 선언

function getAllParamsByArgument(){
  return argsObj = arguments; //빈 객체에 arguments 재할당
}

getAllParamsByArgument('first','second','third');

console.log(typeof argsObj); //object
console.log(Array.isArray(argsObj)); //false

argsObj[0]; //first
argsObj[1]; //second
argsObj[2]; //third
}

//실행과정
1. 스크립트 스코프에 argsObj가 선언되고 TDZ 상태인 동시에 전역객체에 
   getAllParamsByArgument 메소드가 등록된다.
2. argsObj에 빈 객체가 할당된다.
3. getAllParamsByArgument 함수가 실행된다.
  3-1. 함수가 실행됨에 따라 자동으로 로컬 스코프에 arguments가 생성된다.
  3-2. 4번째 줄에 의해 스크립트 스코프의 argsObj에 arguments가 재할당된다.
  3-3. 함수가 호출된 자리에 argsObj 값을 리턴한다. 

function sum(){
  let sum = 0;
  for(let i=0;i<arguments.length;i++){
    sum = sum + arguments[i];
  }
  return sum;
}

2. 인덱스를 활용해 인수를 설정하거나 재할당하기
   arguments는 배열이 아니기 때문에 push, shift, pop, unshift 등의 메소드를 사용할 수 없지만 length와 인덱스를 사용할 수 있다. 따라서 값에 접근, 추가, 재할당하기 위해서는 인덱스를 활용한다.

3. Array로 변환하기

• Array.prototype.slice.call(arguments)

	let argArr = Array.prototype.slice.call(argumentObj);

• [].slice.call(arguments)

	let argArr = [].slice.call(argumentObj);

• Array.from(argumentObj);

	let argArr = [].from(argumentObj);

• spread syntax

	let argArr = [...argumentObj];