spread 연산자(Rest Operator / Spread Operator) 

• 배열이나 객체 변수 앞에 점 세 개 붙여서 사용한다.

• 배열 spread 연산자

console.log(. . .[1, 2, 3]);

이렇게 하면 1 2 3 이렇게 출력됨.


#배열을 복사할 때

const arr =[1, 2, 3];
const copy = [...arr];

console.log(copy); ---> [1, 2, 3] (얕은 복사만 함)




#배열의 일부분: slice 이용해서 복사

const arr = [1, 2, 3, 4, 5];
const copy = [...arr.slice(2)];
console.log(copy);  ---> [3, 4, 5]




#여러 개의 배열을 하나로 합칠 떄

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const numbers = [...arr1, ...arr2, ...arr3]

console.log(numbers); ---> [1, 2, 3, 4, 5, 6, 7, 8, 9]



#자료형이 달라도 가능

const chars = [a, b, c]

console.log([...arr1, ...chars]); ---> [1, 2, 3, "a", "b", "c"]




#문자열도 펼쳐짐

const chars = [...'hello'];

console.log(chars); ---> ['h', 'e', 'l', 'l', 'o']




#구명이 있는 배열은 구멍(undefined)도 그대로 출력됨





#함수에 인자를 전달할 때도 사용 가능.

function sum(a, b) {
return a + b;
}

const numbers = [1, 2, 3, 4, 5];
const result = sum(... numbers);

console.log(result); --> 3
console.log(Math.max(...numbers)); --> 배열의 원소 중 최댓값 찾기

• • • 객체 spread 연산자

#객체 복사

const person = {name: 'lse', age: 10};
const clone = {...person};

console.log(clone)


참조타입은 얕은 복사만 됨. 
-->clone에서 값을 변경하면 원본 객체의 참조형에도 반영된다. 





#객체 병합

const info = {
address: '서울'
};
const person2 = {
...person, 
...info
};

console.log(person2); --> {name: - , age: - , address: - }


※ 동일한 이름의 속성을 가진 객체들을 병합할 때: 
마지막에 병합된 객체의 속성으로 overwrite 된다. 





#객체에 새로운 속성을 추가할 때

console.log({...person, address: "서울");




#나머지 속성만 출력

const items = {
name:  '게임기',
type: '핸드폰',
info: {
price: 10000
}
};
const { name, ...rest } = items;

console.log(rest) ---> {type: "핸드폰", info: Object}

템플릿 리터럴

• 정보를 표현하는 방법이다. ` 이 기호로 감싸서 표현함.

var name = 'k8805';

var letter = `Dear ${name}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Maecenas et auctor tortor, iaculis posuere mi. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
posuere cubilia curae; Quisque sodales tortor eu neque condimentum, 
vel facilisis enim rhoncus.${name}
Integer vel purus eget metus dignissim lacinia ut ut erat. 
Duis tempor rutrum tellus, eu egestas dolor blandit ut. ${1+1}
Cras gravida ac elit id dignissim. Maecenas dictum lobortis maximus. 
Praesent quis eros turpis. Duis mollis elementum leo ac mattis.${name}`;

console.log(letter);

1) 개행 문자 없어도 ` ` 안에서 줄바꾼 거 반영해서 출력됨
2) ${name}으로 속성값 넣음
3) ${1+1} 계산해서 출력됨

구조분해할당 (destructuring)

• 배열의 구조분해 할당

let fruits = ['apple', 'orange', 'banana'];
let [fr1, fr2, fr3] = fruits; 

== let fr1 = fruits[0];
 let fr2 = fruits[1];
 let fr3 = fruits[2]; 와 같은 말.
 --> fr1='apple', fr2='orange', fr3='banan'가 들어간다. 
 
 
 

# 만약 넣어야 하는데 배열에 정보가 없으면? 
 각 요소에 정의되었던 기본값을 사용한다.
 
 let[a=10, b=20, c=50] = [1, 2];
 일 때 c는 undefined라서 기본값 50을 사용함. --> [1, 2, 50]
 
 
 
 
# 공백으로 필요하지 않은 요소 무시하기

let fruits = ['apple', 'orange', 'banana', 'pineapple'];
let [fr1, ,fr2] = fruits; 

--> 오렌지, 파인애플은 무시하고 대입함.




# a, b 값을 바꿔치기 하고 싶을 때 임시변수 안 만들어도 됨.

let a =1;
let b = 2;

[a, b] = [b, a];

• • • 객체의 구조분해 할당

let user = {name: Mike, age: 40};
let {name, age} = user;  --> name이 user.name이고 age가 user.age라는 뜻
let {age, name} = user; 
--> 배열 구조분해 할당과 달리, 요소들의 순서를 바꿔도 상관 없음.


# 기본값 사용하기
let user = {name: 'Mike', age: 30};
let {name, age, gender = 'male'} = user;
--> 만약 user 객체에 gendef 속성이 있었으면 그 값이 할당되었겠지만
지금은 없어서 기본값 male이 사용됨.

클래스

• 객체: 서로 연관된 변수와 함수를 그루핑해서 이름 붙인 것. (코드를 정리정돈 하는 법)
• 클래스: 객체를 만드는 대표적인 공장으로, es6부터 javascript에 추가된 문법

forEach() / map() / reduce()

• forEach()
  • 반복문 역할을 함. for문 대신 쓸 수 있다.
  • 배열의 모든 요소들에 대해서 직접 함수를 실행시켜서 for 문보다 간단하다.

  # for문 예시
  
  const arr = [1, 2, 3];
  
  const res = [];
  
  for (let i = 0; i < array.len; i++) {
  		res.push(arr[i] * 2);
  	}
  ****
  
  # forEach문 예시
  
  arr.forEach(function(value) {
    res.push(value * 2);
  });
  
  출력)
  1
  2
  3
  4
  5
  

• map()
  • forEach 메서드는 단순히 반복문을 대체하기 위한 함수. --> 새로운 배열 반환 X
  • map 메서드는 요소 값을 다른 값으로 mapping하여 원본 배열과 다른 새로운 배열을 생성함.

  const res1 = arr.map((value) => {
  		return value * 2;
  });
  
  const res2 = arr.map((value) => value * 2); 
  

• reduce()
  • 배열 안에 있는 모든 요소들을 이용해서 하나의 값으로 만들 때 사용한다. (합계값, 최솟값 같은 것들..)

  **예시 1) 배열 요소들의 합계 구하기**
  
  const numbers = [1, 2, 3, 4];
  
  ## **for each문:**
  
  let total = 0;
  numbers.forEach((number) => {
  	total = total + number;
  });
  
  console.log(total);
  
  ## **reduce문:**
  
  const total = numbers.reduce((accumulator, currentValue) => {
  	return accumulator + currentValue
  }. 0)
  
  **예시 2) 배열에서 가장 작은 값을 가져오기**
  
  const numbers - [10, 4, 2, 8];
  
  const smallest = numbers.reduce((accumulator, currentValue) => {
  	if (accumulator > currentValue) {
  		return currentValue;
  	}
  	return accumulator;
  });
  
  console.log(smallest);
  

• 기타 배열 메소드
• const arr= [1, 2, 3, 4, 5] arr.push(6, 7); #원소 추가 arr.pop(); #마지막 원소 꺼내서 삭제 arr.unshift(10, 20, 30); #배열의 가장 앞에 원소 추가 arr.shift(); #배열의 가장 앞의 원소를 꺼내서 삭제