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

*인수 전달

//함수에 넘겨주는 인수의 갯수는 제한이 없음. 
function showName(name){
  console.log(name);
}
showName('Mike');   //"Mike"
showName('Mike','Tom');    //"Mike"
showName();    //undefined

 

 *함수에 인수를 얻는 방법

1.arguments로 접근(과거) -화살표 함수에는 없음

2.나머지 매개 변수(지금추세)

 

1. arguments

• 함수로 넘어 온 모든 인수에 접근
• 함수 내에서 이용 가능한 지역 변수
• length / index
• Array 형태의 객체
• 배열의 내장 메서드 없음 (forEach, map)

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

  

2. 나머지 매개변수(Rest parameters) - 권장

   : 갯수가 정해지지 않은 인수를 배열로 나타냄.

//정해지지 않은 갯수의 인수를 배열로 나타냄
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, 8, 9, 10);

//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);
console.log(user2);
console.log(user3);

 

 

<전개 구문(Spread syntax) : 배열>

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

let result = [...arr1, ...arr2] ;     ...arr1 : arr1배열을 풀어쓴것(1,2,3)  /  ...arr2: arr2배열을 풀어쓴것(4,5,6)

console.log(result) ;     // [1, 2, 3, 4, 5, 6]

 

let result = [0, ...arr1, ...arr2, 7, 8, 9];    →중간에 쓰는것도 가능

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

 

<전개 구문(Spread syntax) : 객체>

let user = {name : 'Mike'}

let mike = {...user, age: 30}

console.log(mike)     //{"name": "Mike", "age": 30}

 

<전개 구문(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";     →user2 의 이름을 바꿔도 user의 이름에는 아무런 영향을 미치지 않는다.

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

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

//arr1 = [...arr2, ...arr1];     ->위 구문을 대체해서 간단하게 나타낼 수 있음

console.log(arr1);

//전개 구문 사용하지 않았을 때 
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);



//전개 구문 사용
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);