JavaScript 문법 - spread/rest, 구조분해할당, 화살표함수

📌 spread/rest

spread 문법

배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용. 배열에서 강력한 힘

	function sum(x,y,z){ return x+y+z; }
	
	const numbers = [1,2,3];
	sum(...number); // 6

rest 문법

파라미터를 배열의 형태로 받아서 사용. 파라미터 개수가 가변적일 때 유용

	function sum(...theArgs){//배열의 형태로 매개변수 받음
      return theArgs.reduce((previous, current) => {
        //배열 메서드인 reduce(acc, cur) 사용
        return previous + current ;
      });
    }
	sum(1,2,3); 
	//6 
	//[1,2,3] => previous cur return
	//              1      2    3
    //              3      3    6
	sum(1,2,3,4); 
	//10 
	//[1,2,3,4] => previous cur return
	//                1      2    3
	//                3      3    6
	//                6      4    10

배열에서 사용하기

1. 배열 합치기

	let parts = ['shoulders', 'knees'];
	let lyrics = ['head', ...parts, 'and', 'toes']; 
	// ['head','shoulders', 'knees', 'and', 'toes']

	let arr1 = [0,1,2];
	let arr2 = [3,4,5];
	arr1 = [...arr1, ...arr2]; // [0,1,2,3,4,5]
	// 배열은 immutable 하기 때문에 arr1에 새롭게 재할당

2. 배열 복사

	let arr = [1,2,3];
	let arr2 = [...arr]; //[1,2,3] arr.slice()와 유사하기 때문에 같은 주소조차 참조하고 있지 않음 따라서 arr!==arr2
	arr2.push(4); //arr=[1,2,3] arr2 = [1,2,3,4] arr2에만 값 추가

객체에서 사용하기

	let obj1 = { foo:'bar', x : 42 };
	let obj2 = { foo:'bax', y : 13 };
	let clonedObj = { ...obj1 };  //clonedObj = { foo:'bar', x : 42 } , clonedObj !== obj1
	let mergedObj = { ...obj1, ...obj2 }; // mergedObj = { foo:'baz', x : 42 , y : 13 }; //foo키는 중복이기 때문에 우선순위인 obj2의 값으로 변경

함수에서 나머지 파라미터 받아오기

function myFun(a,b,...manyMoreArgs){
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
// 'a one'
// 'b two'
// 'manyMoreArgs ['three', 'four', 'five', 'six']'

🚨 헷갈리는 부분
arr = [10,30,40,20]
value = Math.max(arr); => Math.max(...arr); 배열을 펼쳐 수로 만듦
Math.max는 number형 메서드인데 매개변수로 배열을 받고 있기 때문에 NaN 출력

value = [...arr] = [10,30,40,20]

📌 구조분해할당

분해 후 새 변수에 할당

const [a, b, ...rest] = [10,20,30,40,50];
//a : 10 , b: 20 , rest = [30, 40, 50]
const {a, b, ...rest} = {a:10, b:20, c:30, d:40};
// a : 10, b: 20, rest = { c:30, d:40 };

함수에서 객체 분해

function whois({displayName: displayName, fullName:{ firstName:name}}){
  console.log(displayName + " is " + name);
}
let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
    firstName : "John",
    lastName: "Doe"
  }
};
whois(user);
//함수 whois의 매개변수는 오직 displayName과 fullName{fisrtName}만 필요하다. 따라서 "jdoe"와 "John"이 함수 안의 displayName 과 name 으로 각각 할당 되기 때문에 "jdoe is John" 이 출력

🚨 헷갈리는 부분
arr = ['code', 'states'] => ...arr = 'code', 'states'
...['course', 'student'] => 'course', 'student'

📌 화살표함수

//함수선언문
function add(x,y){ return x + y;} 

//함수표현식 -> 화살표함수
const subtract = function(x,y){ return x - y;}
const subtract = (x,y) => { return x - y; }// function 키워드 삭제 후 => 추가

1. 매개변수가 한 개일 때, () 소괄호 생략 가능 ,
   (단, 매개변수가 없을 경우나 두개 이상일 경우는 () 소괄호 필수!)
2. return 키워드 생략 가능
3. 함수 코드 블록 내부가 하나의 문으로 구성되어 있다면 {} 중괄호 생략 가능

const multiply10 = x => { return x*10; }
const multiply10 = x => { x*10 }
const multiply10 = x => x*10
const multiply10 = (x) => { return x*10; }
const multiply10 = function(x){
  return x*10;
}
//위 다섯문장은 모두 동일하게 동작

const print = () => { return 'print'; } //단, 매개변수가 없을 때 소괄호를 생략할 수 없다.