Modern JavaScript-1

Modern JavaScript

arrow function

ES6에서 새로 도입된 문법. 함수 표현식 내 function을 화살표로 대체해서 표현해준다. 다음 두 표현식은 동일하게 작동한다.

const add = function(x,y) {
	return x + y;
}


const add = (x,y) => x + y
// 화살표 함수

다음과 같이 return을 없애고, curly brackets {}도 삭제 가능. 둘이 set로 묶여 있음. 추가로 parameter가 한개라면 parentheses ()도 삭제 가능.

const adder = function(x) {
	return function(y){
		return x + y;
    };
}

const adder = (x) => {
	return (y) => {
		return x + y;
    };
}

const adder = (x) => (y) => x + y 

const adder = x => y => x + y // 최종 

함수 내 표현식이 두 줄 이상일 경우, 중괄호와 return을 명시적으로 쓰자.

Spread / Rest

• spread 문법
  배열을 풀어서 arguments로 전달하거나, 각각의 요소로 넣을 때 사용.
  인자로 들어갈 때는 풀어지고, parameter로 가져올때는 배열의 type을 갖는다.

let sum = (x,y,z) => x + y + z 
const arr = [1,2,3]

sum(...arr) // 10

• 배열 합치기

  let arr1 = [1,2,3,4]
  let arr2 = [1,2,...arr1,3,4,5]
  
  arr2 // [1,2,1,2,3,4,3,4,5]

• 배열 복사

  let arr1 = [0,1,2];
  let arr2 = [...arr1];
  arr2.concat(arr1) // [0,1,2,0,1,2]

• 객체에서 적용
  spread syntax를 쓰는 위치에 따라서 내용이 변할 수 있으므로 주의.

  let obj1 = {familyName: 'Park', firstName: 'Sasha'};
  let obj2 = {familyName: 'Ovchi', firstName: 'Lisa'};
  let newObj1 = {...obj1} // {familyName: 'Park', firstName: 'Sasha'}
  let mergedObj = {...obj1, ...obj2} // {familyName: 'Ovchi', firstName: 'Lisa'} key가 같으므로, 후 순위로 입력된 obj2 value를 가져오게 됨. 

- 구조 분해 할당
spread 문법을 이용하여, 값을 해제한 후 개별 값을 변수에 새로 할당하는 과정을 말함.

```js
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a) // 10
console.log(b) // 20
console.log(rest) // [30,40,50] 

• Rest 문법
  Parameter의 개수가 정해져 있지 않을때 배열의 형태로 받아서 사용 가능.

function sum(...theArgs) {
	return theArgs.reduce((acc,cur) =>{
		return acc + cur;
    }); 
} // 1,2,3,4를 [1,2,3,4]로 변환하여 인자로 전달하였음. 

sum(1,2,3,4) // 10;
theArgs // type은 array