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

인프런 강의 자바스크립트 중급 - 코딩앙마 를 듣고 정리한 내용입니다.

매개변수가 하나인데 인수가 2개인 함수를 작성해도 에러는 발생하지 않습니다. 함수에 넘겨주는 인수의 갯수는 제약이 없습니다.

function showName(name){
	console.log(name);
}
showName('Mike');
showName('Mike', 'tom')

// 인자 없이 실행해도 에러는 나지 않습니다. undefined 가 나옵니다.
showName(); // undefined

함수에서 인수를 얻는 방법은 두가지 입니다. 하나는 arguments 를 쓰는 것이고 다른 하나는 나머지 매개변수를 쓰는 것입니다. 나머지 매개변수는 여러 장점이 있어서 자주 쓰입니다. 화살표 함수에서 arguments 는 쓸 수 없습니다.

일단 arguments 는 함수로 넘어오는 모든 인수에 접근 가능합니다. 함수 내에서 이용 가능한 지역변수 입니다. Array 형태의 객체라서 length index 를 사용할 수 있지만, 배열 내장 메소드 forEach map .. 은 사용할 수 없습니다.

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

ES6 를 사용할 수 있는 환경이면 가급적 나머지 매개변수 사용을 권장합니다. 나머지 매개변수 는 정해지지 않은 갯수의 인수를 배열로 나타냅니다. ... 를 붙여 표현합니다.

function showName(...names){
	console.log(names);
}
showName(); // 빈배열, 아무것도 입력하지 않으면, 
showName('Mike'); // ['Mike']
showName('Mike', 'Tom'); // ['Mike', 'Tom']

전달받은 모든 수를 더해야 하는데 그 갯수가 매번 다르다면,

function add(...numbers){
	let result = 0;
	numbers.forEach((num) => (result += num));
	console.log(result);
}

add(1, 2, 3);
add(1, 2, 3, 4, 5, 6, 7);

// 위 코드는 reduce 를 사용해서 변경할 수 있습니다.

function add(...numbers){
	let result = numbers.reduce((prev, cur) => prev + cur);
	console.log(result);
}

유저 객체를 만들어주는 생성자 함수를 만들어 보면,

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("Tom", 20, "JS", "React");
const user3 = new User("Jane", 10, "English");

console.log(user1); // 스킬부분이 배열로 반환된다. 
// 나머지 매개변수는 마지막에 들어가는 것을 주의

전개 구문 (Spread syntax), 배열을 알아보면

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let result = [... arr1, ...arr2] // 이렇게 합칠 수 있다.
let result = [0, ...arr1, ...arr2, 7, 8] // 이렇게 중간 삽입도 가능

아래 처럼 합칠 수 있습니다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// arr1 을 [4, 5, 6, 1, 2, 3] 로 만들고 싶다면

let arr1 = [...arr2, ...arr1];

객체에서도 활용해보면,

let user = { name: "Mike"};
let info = { age: 30 };
let fe = ["JS", "React"];
let lang = ["Korean", "English"]

// 일단 전개 구문없이 작성해보면

user = Object.assign({}, user, infor, { // 빈 객체에 두개 객체 더하고
	skill: [],  //  // 스킬 부분은 일단 빈 배열로 생성
});
fe.forEach((item) => {
	user.skills.push(item); // 돌면서 빈배열에 요소를 넣기
});
lang.forEach((item) => {
	user.skills.push(item);
});

// 위 식을 전개구문으로 정리해보면

user = {
	...user,
	...info,
	skills: [...fe, ...lang],
};