Rest parameters, Spread syntax

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

인수전달

- 함수에 넘겨주는 인수의 개수에는 제한 없음.

function showName(name) { // 함수에 넘겨주는 인수의 개수 제한 없음
    console.log(name);
}

showName('Mike'); // 'Mike'
showName('Mike', 'Tom'); // 에러는 발생하지 않지만 'Mike'만 찍힘
showName(); // 아무것도 전달하지 않아도 에러 발생하지 않음. undefined 찍힘

 

함수에 인수를 전달하는 방법(2가지)

- arguments

- 나머지 매개 변수 사용(여러 장점이 있음!)

* 화살표 함수에는 arguments가 없음

 

 

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']

 

예제) 정해지지 않은 개수의 인수를 받아 다 더한 값 출력하기

 - 배열의 메소드들을 사용할 수 있다. (forEach, reduce, ...)

// forEach 사용
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, 8, 9, 10);

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

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

 

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

console.log(user1) // age: 30, name: "Mike", skills: (2) ['html', 'css']
console.log(user2) // age: 20, name: "Tom", skills: (2) ['JS', 'React']
console.log(user3) // age: 10, name: "Jane", skills: ['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 user = {name: 'Mike'}
let mike = {...user, age: 30}
console.log(mike) // {nmae: "Mike", age: 30}

 

전개 구문(Spread syntax) - 복제

user2의 이름을 복제해도 user에 영향을 끼치지 않음.

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"

 

예제) arr1을 [4, 5, 6, 1, 2, 3]으로 만들기

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

// 방법 1
arr2.reverse().forEach(num =>{
    arr1.unshift(num);
})

// 방법 2 : 전개구문 사용
// arr1 = [...arr2, ...arr1];

console.log(arr1)

 

예제2) user 정보

방법1)

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

user = Object.assign({}, user, info, {
    skills: [],
});

fe.forEach(item => {
    user.skills.push(item);
});
lang.forEach(item => {
    user.skills.push(item);
});

console.log(user);
// age: 30, name: "Mike", skills: (4) ['JS', 'React', 'Korean', 'English']

 

방법2) 전개 구문 사용

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

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

console.log(user);
// age: 30, name: "Mike", skills: (4) ['JS', 'React', 'Korean', 'English']

 

[출처] 코딩앙마 - 자바스크립트 중급 강좌 #10 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax)

https://www.youtube.com/watch?v=lekNM8ldxno&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=10