자바스크립트 중급(with 앙마코딩) 나머지 매개변수, 전개 구문

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌)
문제 시 바로 삭제하겠습니다.

출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com)

나머지 매개 변수

예시 소스부터 보자

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

showName(); // undefined
showName('Btae'); // 'Btae'
showNamme('Tom','Jerry') // 'Tom'

인수를 하나만 입력한 경우 의도와 맞게 실행된다.
인수가 없거나 매개변수의 수와 다를 경우 에러는 발생하지 않는다 다만 값이 없을 땐 undefined 인수가 더 많은 경우 순차적으로 앞에만 실행하고 끝난다.

 

이렇게 우리는 인수에 접근할 필요가 있는데, 그 때 사용하는 것이 arguments, 나머지 매개 변수이다.
과거에는 arguments만 사용가능했지만 나머지 매개 변수가 나와 잘 사용하지 않고, 화살표 함수에서는 arguments를 사용할 수 없다.

 

arguments

arguments는 함수로 넘어 온 모든 인수에 접근이 가능한 함순내에서 이용 가능한 지역 변수이다.
length와 index를 가지고 있기 때문에 배열이라 생각할 수 있지만 사실 **Array형태의 객체이다. 따라서 length/index는 가질 수 있지만 forEach()등과 같은 배열의 내장 메서드는 없다.

 

function showName(name){
  console.log(arguments.length);
  console.log(arguments[0]);
  console.log(arguments[1]);
}

showName('Mike', 'Tom');
// 2
// 'Mike'
// 'Tom'

예제를 보면, 인수를 두개 받았기 때문에 length는 2이며, 인덱스 번호에 따라 실행된다.

나머지 매개 변수 : ...

ES6 이후 사용할 수 있는 상황이라면 나머지 매개 변수를 사용하는 것이 바람직하다.

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

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

예제에서 보이듯 나머지 매개 변수는 정해지지 않은 개수에 인수를 배열로 나타낸다.
따라서 인수가 없으면 빈 배열이 나타나고, 인수가 많아지면 그 인수를 배열로 나타내게 된다.

 

나머지 매개 변수의 표현은 ...배열이름으로 정한다.**
그리고 배열이기 때문에 내장 메서드를 사용할 수 있다.

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

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

위 예제를 풀어보면 add의 인수를 나머지 배개 변수로 개수 상관없이 받을 수 있는 함수를 만든다. (이 함수에서 인수를 받는 순간 배열로 나타낸다)
그리고 초기값을 0으로 설정하고 배열의 내장 객체인 forEach()를 사용하여 인수를 배열로 만들어 놓은 각 요소를 돌아가면서 result 값에 더하게 된다.

 

나머지 매개 변수를 이용한 생성자 함수 만들기

function User(name, age, ...skills) {
  this.name = name;
  this.age = age;
  this.skills = skills;
}

const user1 = new User('Tom', 30 , 'html', 'css');
const user2 = new User('Jerry', 20 , 'JS', 'React');
const user3 = new User('Btae', 27 , 'java');
/*
user 1 > { name: 'Tom' , age : 30 , skills : [ 'html','css'] }
user 2 > { name: 'Jerry' , age : 20 , skills : [ 'JS','React'] }
user 3 > { name: 'Btae' , age : 27 , skills : [ 'Java'] }
*/

생성자 함수를 통해 전달 받는 인수를 객체로 만들었다. 여기서 skills를 나머지 매개 변수로 받아서 여러 스킬을 배열로 만들었다. 주의 할 점은 당연히 뒤에 나오는 인수를 모두 받기 때문에 나머지 매개 변수는 항상 맨 뒤에 있어야한다

전개 구문

배열에 요소를 변경하기 위해서는 push / splice / concat등의 메서드를 통해 수정을 한다.
이는 식이 복잡해지고 귀찮은 작업이다.(전개 구문이 있다면)
전개 구문은 이 과정을 간편하게 해줄 수 있다.

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

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

이렇게 배열 사이에 배열을 할당한 변수를 넣으면 사이에 들어가 새로운 배열을 만들 수 있다.

 

이는 객체에서도 동일하게 사용할 수 있다.

let user = {name:'Btae'}
let Btae = {...user, age:27};
// Btae > {name:'Btae',age:27}

이렇게 간단하게 넣을 수 있다.

 

다른 장점으로는 객체나 배열을 복제하기 쉽다는 것이다.

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

let user= [name:'Btae'];
let user1 = [...user];

user1.name = 'Tom';
// user1 > {name: 'Tom'}
// user > {name: 'Btae'}

이렇게 기존 변수에 값은 변하지 않고 복제를 할 수 있다.

 

실용적 예제를 통해 효율성을 알아보자

/* arr1 을 [4,5,6,1,2,3]으로 만들기 */
let arr1 = [1,2,3];
let arr2 = [4,5,6];

/*arr2.reverse().forEach((num) => {
    arr1.unshift(num);
});

전개 구문을 사용하지 않은 방법 */

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

참고로 위 예제에서 reverse()가 없다면 앞에 요소부터 배열에 추가되기 때문에 [6,5,4,1,2,3]의 배열이 나타난다.

 

더 복잡한 예제를 살펴보자.
qoduf

let user = {name: 'Btae'};
let info = {age: 27};
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);
});
*/

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