[Javascript] 나머지 매개변수(Rest parameters), 전개 구문(Spread syntax)

인수 전달

function showName(name){
    console.log(name);
}

showName('Mike');  // 'Mike'
showName('Mike', 'Tom');  // ?
showName();  // undefined

자바스크립트에서 함수에 넘겨주는 인수의 개수에는 제한이 없다. 인수의 개수를 정해놓고 함수를 만들어도, 함수를 호출할 때 정확히 그 개수를 맞출 필요가 없다. 따라서 위 코드에서 에러가 발생하지 않는다.

 

 

함수의 인수를 얻는 방법은 두 가지가 있다.

1) arguments

2) 나머지 매개변수

 

과거에는 argument만 사용할 수 있었지만 지금은 여러 가지 장점이 있는 나머지 매개변수를 쓰는 추세이다.

**화살표 함수에는 argument가 없다!!

 

1) 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'

 

2) 나머지 매개변수(Rest parameters)

정해지지 않은 개수의 인수를 배열로 나타낼 수 있게 한다.

나머지 매개변수는 항상 매개변수 마지막에 있어야 한다.

function showName(...names){
    console.log(names);
}

showName();  // []
showName('Mike');  // ['Mike']
showName('Mike', 'Tom');  // ['Mike', 'Tom']

 

---

전개 구문(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]

 

전개 구문(Spread syntax) : 복제

let arr = [1, 2, 3];
let arr2 = [...arr];  // [1, 2, 3]

let user = {name:'Mike', age:30};
let user2 = {...user};

user2.name = "Tom";

console.log(user.name);  // "Mike"
console.log(user2.name);  // "Tom"