[JS] Spread 문법

// 어떠한 인수를 전달하고 싶을때 원래 사용하는 방식은 다음과 같다 //

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

showName('Mike');           // 'Mike'
showName('Mike', 'Tom');    // 'Mike' 첫번째 값만 찍힘 하지만 에러는 나지 않음
showName();                 // undefined 에러는 나지 않음

// 이처럼 값이 여러개 값이 있을경우 잘 전달하지 못한다. //

• 나머지 매개변수

  // 나머지 매개변수 //
  
  // 1번 예시 [값을 단순히 전달하고 싶을때] //
  
  function showName(...names){
  	console.log(names);
  }
  
  showName();                 // []
  showName('Mike');           // ['Mike']
  showName('Mike', 'Tom');    // ['Mike', 'Tom']

  // 나머지 매개변수 //
  
  // 2번 예시 [전달 받은 모든 수를 더하고싶을때] //
  
  function add(...numbers) {
  	let answer = numbers.reduce( (arr, cur) => arr + cur );
  	console.log(answer);
  }
  
  add(1, 2, 3);                          // 6
  add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);    // 55

  // 나머지 매개변수 //
  
  // **3번 예시** [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, "java", "spring");
  const user3 = new User("Jane", 10, "c++"); 
  
  console.log(user1); // User { name: 'mike', age: 30, skills: [ 'html', 'css' ] }
  console.log(user2); // User { name: 'Tom', age: 20, skills: [ 'java', 'spring' ] }
  console.log(user3); // User { name: 'Jane', age: 10, skills: [ 'c++' ] }
  
  // 주의할 점 //
  // 나머지 매개변수를 입력 할 때 스프레드문법이 가장 뒤에 와야한다. //
  // 그 이유는 남은 값들을 모조리 끌어다가 배열로 묶기 때문이다. //

• 전개 구문

  // 전개 구문 : 배열 //
  
  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  
  let answer = [...arr1, ...arr2];
  
  // ...arr1 = 1,2,3
  // ...arr2 = 4,5,6      
  
  console.log(answer); // [1, 2, 3, 4, 5, 6]

  // 전개 구문 : 객체 //
  
  let user = {name : 'Mike'}
  let mike = {...name, age : 30}
  
  console.log(mike) // {name : 'Mike', age : 30}

  // 전개 구문 : 복제 //
  
  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', age: 30 }
  console.log(user2); // { name: 'Tom', age: 30 } 
  										//	원래 배열엔 아무런 영향을 주지 않고 name만 변경

  // 전개구문 : 객체 심화 //
  
  let user = { name : "Mike" };
  let info = { age : 30 };
  let skill = ["JS", "React"];
  let lang = ["Korean", "English"];
  
  user = {
  	...user,
  	...info,
  	skills : [...skill, ...lang],
  }
  
  console.log(user);
  
  // console.log(user) 값
  {
    name: 'Mike',
    age: 30,
    skills: [ 'JS', 'React', 'Korean', 'English' ]
  }