[JavaScript_study] Rest parameters, Spread syntax

* 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"

* 나머지 매개변수(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;
  })
}

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

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

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) // {name: 'Mike', age: 30, skills: Array(2)}
console.log(user2) // {name: 'Tom', age: 20, skills: Array(2)}
console.log(user3) // {name: 'Jane', age: 10, skills: Array(1)}

 

* 전개 구문 (Spread syntax) : 배열

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

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

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

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

 

* 전개 구문 (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";

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

// reverse()를 사용하지 않으면 [6, 5, 4, 1, 2, 3]으로 출력된다.
// 이유는?? JavaScript Lexical Environment를 생각해보면 이해가 될것이다.
// 6,5,4 순서대로 쌓이고 쌓여있는 맨위인 4부터 시작해서 순서대로 5, 6 unshift된다.

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

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); // {name: 'Mike', age: 30, skills: Array(4)}

// --------------------------------------------------------------------------
// 아래와 같이 쉽게 표헌 가능하다.

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

console.log(user)