[JavaScript] 나머지 매개변수, 전개 구문

인수 전달

다음과 같은 코드가 있다.
세 개의 함수 호출 구문은 에러를 발생하지 않고 정상 작동한다.

function showName(name){
  console.log(name);
}
showName('Mike'); // Mike
showName('Mike', 'Tom'); // Mike
showName(); // undefined

자바스크립트에서 함수에 넘겨주는 파라미터의 수는 정해져 있지 않다.
즉, 함수에 정의된 파라미터 개수와 호출 시 넣는 파라미터의 수를 일치시키지 않아도 된다.

함수의 인수를 불러오는 방법

• arguments로 접근( 화살표 함수에는 없다. )
• 나머지 매개변수, ES6를 사용하는 환경에서 권장

arguments

• 함수로 넘어온 모든 인수에 접근
• 함수 내에서 이용 가능한 지역 변수
• length / index
• Array 형태의 객체
• 배열의 내장 메서드(forEach, map)등이 없음

  function showName(name){
  	console.log(arguments.length);
      console.log(arguments[0]);
      console.log(arguments[1]);
  }
  showName('Mike', 'Tom');
  // 2
  // 'Mike'
  // 'Tom'

나머지 매개변수(Rest Parameters)

파라미터 변수명 앞에 ...을 붙여서 사용한다.
나머지 매개변수는 가장 맨 뒤에 들어가야한다.
아래코드의 names는 배열이 된다.
따라서 배열 메소드들을 사용할 수 있다.
아무것도 전달하지 않으면 undefined가 아니라 빈배열이다.

function showName(...names){
  console.log(names);
}
showName(); // []
showName('Mike'); //['Mike']
showName('Mike', 'Tom'); // ['Mike', 'Tom']

사용예제

User 객체를 만들어주는 생성자 함수
사람마다 능력의 개수가 다를 수 있으니 이때 나머지 매개변수를 사용한다.

function User(name, age, ...skills){
  this.name = name;
  this.age = age;
  this.skills = skills;
}
const user1 = new User("Mike", 30, "html", "css");
const user2 = new User("Mike", 20, "JS", "React");
const user3 = new User("Mike", 10, "English");

전개 구문(Spread syntax)

배열 : 나열

배열명 앞에 ... 을 붙여서 사용한다.
해당 배열의 값들이 나열되어 들어간다.

let arr1=[1,2,3];
let arr2=[4,5,6];
let result = [0, ...arr1, ...arr2, 7, 8, 9]
// [0,1,2,3,4,5,6,7,8,9]

객체 : 깊은 복사

객체에 전개구문을 사용하면 깊은 복사가 된다.

let user1 = {name: 'Mike', age: 30};
let user2 = {...user1};
user2.name = 'Tom';
console.log(user1.name); // "Mike"
console.log(user2.name); // "Tom"