최신 기능들

DEFAULT PARAMS(디폴트 매개변수)

	함수를 쓸 때 매개변수를 사용하는 것은 선택
	매개변수가 있으면 그 값을 사용하고, 없다면 디폴트 매개변수를 받는다.

		// 예시 : 옛날 방식(매개변수가 여러 개 있다면 힘들어질 것)
		function rollDie(numSides){
			if(numSides === undefined){
				numSides = 6
			}
			return Math.floor(Math.random() * numSides) + 1;
		}

		// 예시 2 : 최신 방식(매개변수에 등호 = 을 주어 디폴트 값을 준다.), 
		function rollDie(numSides = 6){
			return Math.floor(Math.random() * numSides) + 1;
		}

	* 디폴트 매개변수는 디폴트 값이 없는 매개변수 뒤에 있어야 한다.

SPREAD(함수 호출 시 스프레드 구문)

	배열과 같이 반복 가능한 객체를 전개 구문을 사용해서 확장한다.
	정보의 소스를 펼쳐서 다른 용도로 만들기 위해 사용한다.

	함수로 호출할 경우에는 0개 이상의 인수로,
	배열 리터럴에서는 요소로 확장할 수 있다.
	객체 리터럴의 경우 객체 표현식은 0개 이상 키-값 쌍으로 확장할 수 있다.

	함수로 호출할 때 반복 가능한 객체를 펼치는 경우(… 사용)

			// 예시 1
			const nums = [9, 3, 2, 8];

			Math.max(nums);			// NaN, 배열이 전체적으로 들어와서 출력할 수 없다.

			Math.max(…nums);		// 9, 배열이 펼쳐지고 인수는 따로따로 들어간다.  
			Math.max(9, 3, 2, 8);	// 9, 위와 같다.
			Math.min(…nums);		// 2

			// 예시 2
			console.log(…’HELLO’);	// H E L L O, 문자열이 하나하나 분리됨

	배열과 배열 사이에서 전개를 펼치는 경우

			const num1 = [2,4,6,8,10];
			const num2 = [1,3,5,7,9];
	
			const copy = […num1];			// [2,4,6,8,10], 전개를 사용해 복사
			const allNum = […num1, …num2];	// [1,2,3,4,5,6,7,8,9,10], 전개를 사용해 배열끼리 묶어 새로운 배열로
			allNum.push(100);				// [1,2,3,4,5,6,7,8,9,10, 100]

	객체 리터럴에서 전개를 사용하는 경우
    
    객체를 복사해 새로운 객체를 만드는 이유 
   	= 라이브러리나 React 도구로 작업할 때 쓰기 위해 객체를 변형하지 않고 복사하는 방법을 배우는 것이다.

			// 예시
			const dataFromForm = {
				email : ‘1234@gmail.com’,
				password : ‘1234’,
				username : ‘user’
			} 

			const newUser = {…dataFromForm, id : 4321, isAdmin : false}

REST

	전개와 같이 점(…)을 사용하기 때문에 비슷해보일 수는 있으나 완전히 다르다.
	
	REST를 이해하려면 인수객체(유사배열객체)를 이해해야 한다.
	인수객체는 요소에 접근하려면 인덱스를 사용해야 한다. 배열처럼 작동하는 것처럼 보이지만 배열 메서드를 사용할 수 없다. (reduce, push, pop 등)
	인수객체는 함수로 전달된 인수를 모두 가지고 있다. 인덱스 요소로 순서를 가지고 나열하고 있다.

		// 예시 : 인수객체는 인수에 아무 것도 넣으면 안된다.  
		function sumAll(){
			let total = 0;
			for(let i = 0; i < arguments.length; i++){
				total += arguments[i];
			}
			return total;
		}
		sumAll(8,3,1);		// 12
		sumAll(10,1);		// 11	

		// 예시 : 인수객체와 배열 매서드 사용 = 오류	
		function sum(){
			return arguments.reduce((total, el) => total + el)
		}	// error

	REST는 매개변수 목록에 들어가 남아있는 인수를 모두 모으고 배열로 나타낸다.

		// 예시 : REST를 사용해 나머지 매개변수(…nums)를 배열로 만들어 for..of 사용
		 function sumAll(…nums){
			let total = 0;
			for(let n of nums) total += n;
			return total;
		}

		sumAll(1, 2);		// 3
		sumAll(1,2,3,4,5);	// 15

		// 예시 : REST를 사용하면 인수객체에서도 배열 매서드 사용이 가능해진다.
		function sum(…nums){
			return nums.reduce((total, el) => total + el)
		}	
	
		sum(10,10,10);	// 30

배열 분해

	기존 배열의 값을 지워서 꺼내는 것이 아닌, 배열의 값을 복사해 개별 변수로 사용할 수 있다.
	기존 배열 값의 순서를 기반으로 한다.

		// 예시
		const scores = [100, 90, 80, 70, 60, 50];

		const highScore = scores[0]; 
		const secondScore = scores[1]; 
		const thirdScore = scores[2];
		highScore;		// 100
		secondScore; 	// 90
		thirdScore;		// 80
		
		const [gold, silver, bronze, …else] = scores;
		gold;	// 100
		silver;	// 90
		bronze;	// 80
		else;	// [70, 60, 50]

객체 분해

	배열분해와 달리 순서를 따르지 않아 실용적이다.	

		const player = {
			name : ‘Sonny’,
			number : 7,
			country : ‘Korea’,
			title : ’none’
		}
		const {number, name} = player;
		number; // 7
		name;	// Sonny
		
		// 객체의 키를 다른 변수에 담을 수도 있다.
		const {name : nickname} = player;
		name;		// error
		nickname;	// Sonny
		
		// 디폴트 값도 추가할 수 있다. (기존 값이 없는 경우)
		const {team = ’Tottenham’} = player;
		team;		// Tottenham

매개변수 분해

	함수의 매개변수에 적용된다.
	함수를 정의할 때 괄호 안에 매개변수를 작성하면 전달되는 값의 구조를 분해할 수 있다.
	객체에 주로 사용되는 방법이다.
	매개변수에 {}를 입힌다.

		const player = {
			name : ‘Sonny’,
			age : 28,
			country : ‘Korea’,
			title : ’none’
		}

		// 기존 방법
		function nameAndAge(player){
			return `${player.name} ${player.age}` 
		}

		//객체 분해만 사용했을 때
		function nameAndAge(player){
			const {name, age} = player;
			return `${name} ${age}`
		}

		// 매개변수 분해 사용 후
		function nameAndAge({name, age}){
			return `${name} ${age}`;
		}