나머지 매개변수와 전개 구문

Hi, There!
안녕하세요, 바오밥입니다.

---

목차

1. 개요
2. 본문
3. Reference

---

개요

자바스크립트의 나머지 매개변수와 전개 구문에 대하여 공부하고 정리하였습니다.

---

본문

자바스크립트와 인수

자바스크립트의 인수 개수

자바스크립트는 인수의 개수의 영향을 받지 않습니다.

때문에 정의된 함수를 호출할 때 몇 개의 인수를 전달해도 오류가 발생하지 않습니다.

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

showName('Mike'); // "Mike"
showName('Mike', 'Tom'); // "Mike"
showName(); // 아무것도 전달하지 않아도 undefined가 출력될 뿐 오류가 발생하지 않습니다.

 

자바스크립트에서 인수를 다루는 방법 (1) - arguments

• 함수로 넘어 온 모든 인수에 접근할 수 있습니다.
• 함수 내에서 이용 가능한 지역 변수입니다.
• 배열 행태의 객체로 length / index 를 이용할 수 있습니다.
  그러나 배열의 내장 메서드는 갖고 있지 않습니다. (forEach, map 등)

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

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

 

자바스크립트에서 인수를 다루는 방법 (2) - 나머지 매개변수(...)

나머지 매개 변수를 이용하면 전달된 인수들이 하나의 배열로 반환됩니다.

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

showName() // [], arguments와는 다르게 undefined 대신 빈 배열이 반환됩니다.
showName('Tom') // ["Tom"]
showName('Tom', 'Mike') // ["Tom", "Mike"]

 

나머지 매개변수를 활용하면 다음과 같이 매개 변수를 배열로 만들어 하나의 함수로 정의할 수 있습니다. (forEach)

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

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

 

또는 아래처럼 정의할 수 있습니다. (reduce)

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

add(1,2,3,4,5) // 15

 

아래는 유저 객체를 만들어 주는 생성자 함수를 정의하는 코드입니다.

유저마다 가지고 있는 스킬은 1개가 아니라 n개일 수 있습니다.

아래와 같이 생성자 함수에 나머지 매개변수를 이용하면 손쉽게 객체 값을 배열로 저장할 수 있습니다.

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

console.log(user1, user2);
/* user1과 user2의 결과 값
{
    "name": "Mike",
    "age": 30,
    "skills": [
        "html",
        "css"
    ]
}
{
    "name": "Tom",
    "age": 20,
    "skills": [
        "js",
        "React"
    ]
}
*/

 

전개 구문 배열 예제

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 요소로 사용할 수 있습니다.

이를 적절히 이용하면 arr.push(), arr.splice(), arr.concat() 등을 대체할 수 있습니다.

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

let result = [0, ...arr1, ...arr2, 7, 8, 9] // ...arr1 & ...arr2를 사용하였습니다.

console.log(result) // [0,1,2,3,4,5,6,7,8,9]

 

전개 구문 객체 예제

전개 구문은 배열뿐만 아니라 객체에도 동일하게 사용할 수 있습니다.

let user = {name:"Mike"}
let mike = {...user, age:30} // user 객체 사용
console.log(mike) // { "name": "Mike", "age": 30 }

 

객체 복제 메서드를 대체하여 사용할 수 있습니다.

let arr = [1,2,3]
let arr2 = [...arr] // arr를 그대로 복제
console.log(arr, arr2) // [1,2,3] [1,2,3]

 

전개 구문 객체와 전개 구문 배열을 활용하면 다음과 같이 손쉽게 코드를 작성할 수 있습니다.

• 유저의 이름, 나이, 기술(개발스택, 언어)을 하나의 객체로 만드시오.

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)

 

만약, 전개 구문 객체 없이 구현하려면 다음과 같습니다.

• user 객체를 복제하여 이름, 나이, 기술을 담을 배열을 담은 객체를 생성합니다.
• fe, lang 배열을 순회하면서 skills 객체 배열에 요소를 추가합니다.

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)

---

Reference

• 자바스크립트 중급 강좌 #10 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax)