3차시.txt

## 구조 분해 할당 : 구조를 분해해 할당하는 문법

- 배열이나 객체에서 요소를 해체해 개별 변수에 그 값을 담을 때 사용

### 배열의 구조 분해 할당

- 저장된 **요소 값이 순서대로 할당**된다.
- 배열의 길이보다 할당할 변수의 개수가 적어도 오류가 발생하지 않는다
- 배열의 길이보다 할당 변수의 개수가 많아도 오류가 발생하지 않는다
    - 배열의 길이가 넘는 변수는 **undefined**가 할당된다.

```jsx
//구조 분해 할당 
let arr = [1,2,3];
let [one, two, three] = arr; //배열 arr의 값을 순서대로 변수 one, two, three에 할당함.

console.log(one, two, three);
```

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

- 데이터 저장 순서가 아니라 **key**를 기준으로 한다.
- 변수 name, age, location에는 person 객체 프로퍼티의 value가 key를 기준으로 할당된다.

```jsx
let person = {
	name: "이정환",
	age : 25,
	location : "경기도"
};

let {name, age, location} = person;

console.log(name, age, location);
```

### 함수의 매개변수가 객체일 때 구조 분해 할당하기

- 객체 프로퍼티를 매개변수로 저장하는 함수에서 구조 분해 할당을 한다.

```jsx
//함수 func에서는 전달된 객체에서 프로퍼티의 value를 매개변수 name, age, location에 각각 구조 분해 할당한다.
function func({ name, age, location }) { 
	console.log(name, age, location);
}

let person = {
	name : "이정환",
	age : 25,
	location : "경기도"
};

func(person); //객체를 인수로 전달
```

- 객체를 전달할 때 이 문법을 함수의 매개변수에 적용하면, 필요한 프로퍼티만 전달 할 수도 있어 코드가 훨씬 유연해진다.

- 구조 분해 할당을 하면서 동시에 이름 변경하기
    - 변수 이름 옆에 **콜론(:)**과 함께 새 변수 명을 쓰면, 새 이름으로 값이 할당된다.

```jsx
function func({name : n, age : a, location :l}) {
	console.log(n, a, l); // 프로퍼티 이름 변
}

let person = {
	name : "이정환",
	age : 25,
	location : "경기도"
};

func(person); //객체를 인수로 전달
```

## 스프레드 연산자

- **스프레드 연산자** : 반복이 가능한 객체에서 값을 개별 요소로 분리하는 것

### 스프레드 연산자

- **‘…’ 기호**로 표기, 전개 연산자라고 부른다.
- 배열, 문자열, 객체 등과 같이 반복이 가능한 **객체의 값을 개별 요소로 분리 가능**하다.

### 배열에서의 스프레드 연산자

```jsx
//스프레드 연산자와 배열 객체
let arrA = [1,2,3];
let arrB = [...arrA, 4,5,6]; //변수 arrB는 첫 번째 요소에 또 다른 배열 ...arrA를 저장한다.
//arrB에는 arrA 요소의 1,2,3 + 뒤에 4,5,6이 할당된다.
console.log(arrB); 
```

- …arrA처럼 스프레드 연산자 기호가 변수 앞에 붙으면, 이 배열은 개별 요소로 분리되어 저장된다.
- **…arrA이 아니라 arrA를 다른 배열에 저장하게 된다면?**
    - arrB = [**[**1, 2 ,3**]**, 4, 5, 6]  : arrA가 배열로 저장된다. (개별 요소 X)

### 객체에서의 스프레드 연산자

```jsx
// 객체에서의 스프레드 연산자
let objA = {
	a: 1,
	b: 2
};

let objB = {
	...objA, //objA 프로퍼티를 개별 요소로 objB의 프로퍼티로 나열된다.
	c: 3,
	d: 4
}

console.log(objB);
```

### 함수에서의 스프레드 연산자

- 함수 호출할 때도 이용한다.
- 배열 요소를 분리하여 함수의 인지로 전달한다.

```jsx
function func(a, b, c) {
	console.log(a, b, c) //2. 인수 3개의 값 1,2,3을 전달하여 매개변수 a,b,c -> 1,2,3으로 저장된다.(순서대로 저장됨)
}

let arr = [1, 2, 3];
func(...arr); // 1. 변수 arr에 저장된 배열을 개별 요소로 분리한다.

```

## rest 매개변수

- **rest 매개변수(= 나머지 매개변수)** : 개별 요소를 다시 배열로 묶는 방식
- **기호 ‘…’** 으로 표기한다.

```jsx
function func(..rest) { // rest 매개변수가 된다.
	console.log(rest);
}

func(1, 2, 3, 4) // 인수들이 순차적으로 rest배열에 저장된다.
// rest = [1,2,3,4]
```

- 다른 매개변수와 함께 사용하는 rest의 예

```jsx
function func(param, ...rest) {
	console.log(param); //parame에는 첫 번째 인수 1이 저장됨.
	console.log(rest); // rest 배열에는 나머지 인수들이 순차적으로 저장됨.
}

func(1, 2 ,3 ,4);
```

- 인수는 순차적으로 왼쪽부터 오른쪽으로 할당된다.

- 주의 ) rest 매개변수를 사용할 때
    - rest 매개변수를 먼저 선언하면 할당된 인수를 제외하고 나머지를 모두 배열에 저장한다. → **rest 매개변수는 마지막에 작성해야한다!**

```jsx
function func(...rest, param) { **// rest 매개변수는 마지막에 작성해야한다!**
	console.log(param);
	console.log(rest);
}

func(1, 2, 3, 4);

```

## 배열과 메서드

- 배열 메서드 : 배열을 쉽게 다룰 수 있도록 제공되는 메서드

### push(추가)

- 배열 맨 **끝**에 요소를 추가하고 새로운 길이를 반환하는 메서드

```jsx
let food = ["짜장면", "피자", "치킨"];
const newLength = food.push("탕수육", "라자냐"); //요소 추가
 
console.log(food);
condole.log(`새로운 배열의 길이 : ${newLength}`);

----------------------------------------------------------
["짜장면", "피자", "치킨", "탕수육", "라자냐"]
새로운 배열의 길이 : 5
```

### pop(제거)

- 배열의 맨 **끝** 요소를 제거하고, 제거한 요소를 반환하는 메서드

```jsx
let food = ["짜장면", "피자", "치킨"];
const removedItem = food.pop();

console.log(removedItem); //제거 된 것
console.log(food); //제거되고 남은 것

-----------------------------------------------------------
"치킨"
["짜장면", "피자"]
```

- **빈 배열**에서의 pop() 메서드는 **undifined**가 출력된다.

### shift

- 배열의 맨 **앞** 요소를 제거하고, 제거한 요소를 반환하는 메서드

```jsx
let food = ["짜장면", "피자", "치킨"];
const removedItem = food.shift();

console.log(removedITem);
console.log(food);

----------------------------------------------------------
"짜장면"
["피자", "치킨"]
```

### unshift

- 배열 맨 **앞**에 요소를 추가하고, 새 배열의 길이를 반환하는 메서드

```jsx
let food = ["짜장면", "피자", "치킨"];
const newLength = food.unshift("갈비찜");

console.log(food);
console.log(`새로운 배열의 길이 : ${newLength}`);

----------------------------------------------------------
["갈비찜", "짜장면", "피자", "치킨"];
새로운 배열의 길이 : 4
```

### slice

- 기본 배열에서 특정 범위를 잘라 새로운 배열을 반환하는 메서드

```jsx
const arr = [1,2,3];
const sliced = arr.slice(0,2); //0~1 인덱스 뽑기

console.log(arr);
console.log(sliced);

------------------------------------------------------------
[1,2,3]
[1,2]
```

- arr.slice(m, **n**) : m ~ (**n-1**) 인덱스를 추출할 수 있다.

- start 인수만 전달

```jsx
const sliced = arr.slice(2); //2번째 인덱스 하나만 추출

------------------------------------------------------------
[3]
```

- start만 음수 인덱스 전달
    
    배열 맨 끝부터 전달한 음수의 절댓값 만큼 잘라낸 새 배열을 반환한다.
    

```jsx
const arr = [1,2,3,4,5];

console.log(arr.sliced(-1));
console.log(arr.sliced(-2));
console.log(arr.sliced(-3));
console.log(arr.sliced(-4));
console.log(arr.sliced(-5));

-----------------------------------------------------------
[5]
[4,5]
[3,4,5]
[2,3,4,5]
[1,2,3,4,5]
```

### concat

- 서로 다른 배열을 이어 붙여 새 배열을 반환하는 메서드

```jsx
let arA = [1,2];
let arB = [3,4];
let arrC = arrA.concat(arrB);

console.log(arrC);
console.log(arrA);

------------------------------------------------------------
[1,2,3,4]
[1,2]
```

- concat 메서드  인수에 객체 전달하기

```jsx
let arA = [1,2];
let arB = { a: 1, b:2 },
let arrC = arrA.concat(arrB);

console.log(arrC);

------------------------------------------------------------
[a,2, { a:1, b:2 }]
```

## 순회 메서드(forEach)

- 배열 순회 메서드 제공 : forEach

<aside>
📌 fucntion cb(item, index, array) {
}

arr.forEach(cb);

</aside>

- item : 현재 순회하는 배열 요소
- index : 현재 순회하는 베열 요소의 인덱스
- array : 순회 중인 배열

```jsx
fuction cb(item, idx) {
	console.log(`${id}번째 요소: ${item}`);
}

const arr = [1,2,3];

arr.forEach(cb)

------------------------------------------------------------
const arr = [1,2,3];
arr.forEach((item, idx) => {
	console.log(`${idx}번째 요소 : ${item}`);
});

------------------------------------------------------------
0번째 요소: 1
1번째 요소: 2
2번째 요소: 3
```

## 탐색 메서드(indexOf)

- 배열 탐색 : 배열에서 특정 조건을 만족하는 요소를 찾아내는 행위
- **indexOf** : 배열에서 찾으려는 요소의 인덱스를 반환하는 메서드

<aside>
📌 arr.indexOf(item, fromIndex);

</aside>

- item : 찾으려는 요소
- fromIndex : 탐색을 시작할 인덱스 번호(생략 가능 - 0부터 탐색)

```jsx
let arr = [1,3,5,7,1];

console.log(arr.indexOf(1,0)); // 인덱스 1을 찾고, 0부터 탐색해라.

-------------------------------------------------------------
0 // 0번째 인덱스의 값이 1
==============================================================

console.log(arr.indexOf(1));
console.log(arr.indexOf(1, -1));
------------------------------------------------------------
0
4
```

- -1 반환
    - 찾으려는 요소가 없을 때
    - fromIndex의 값이 배열의 길이보다 크거나 같은 경우
    - ‘-3’(문자형) 과 -3(숫자형)처럼 자료형이 다를 경우

- indexOf 메서드로는 객체 자료형의 값을 탐색할 수 없다.

→ findIndex

### Includes

- 배열에 특정 요소가 있는지 판별
- 인수로 전달한 요소가 배열에 존재해면 true
- 존재하지 않으면 false

<aside>
📌 arr.includes(item, fromIndex)

</aside>

- indexOf와 같은 역할의 매개변수

```jsx
let arr = [1,3,5,7,1];

console.log(arr.includes(3));
console.log(arr.includes("생신"));

----------------------------------------------------------
true
false
```

### findIndex

- indexOf 처럼 배열에서 찾으려는 요소의 인덱스 번호를 찾아 반환하는 메서드

<aside>
📌 arr.findIndex( callback (item, index, array) );

</aside>

- callback 함수 : **‘판별 함수’**
- 이 판별 함수를 만족하는 첫 번째 요소의 인덱스 번호를 반환한다.

- item : 현재 요소
- index : 현재 인덱스
- array : 탐색 대상 배열

```jsx
function determine(item, idx, arr) { //2. 6이 참이면 탐색 stop!
	if(item % 2 === 0) {
		return true;
	} else {
		return false;
	}
}

let arr = [1,3,5,6,8];
let index = arr.findIndex(determine); //1. determine의 참인지 판단

console.log(index);//3. index 값에 6의 인덱스 번호인 3 출력!

-----------------------------------------------------------
3
```

- 화살표 함수 + 삼항 연산자

```jsx
let arr = [1,3,5,6,8];
let index = arr.findIndex((item) =>
	item % 2 === 0 ? true : false
);

console.log(index);
```

- findIndex로 배열에서 프로퍼티 name 값이 “이정환”인 요소의 인덱스 찾기

```jsx
let arr = [
	{ name: "이종원" ),
	{ name: "이정환" ),
	{ name: "신다민" ),
	{ name: "김효빈" )
];

let index = arr.findIndex((item) => item.name === "이정환");
console.log(index);

-------------------------------------------------------------
1
```

- indexOf는 === 엄격한 비교 연산자를 사용하지만, findIndex는 판별 함수를 이용해 배열에서 조건과 일치하는 객체 요소를 찾아낸다.

### find

- **findIndex와 같이** 인수로 판별 함수를 전달하고, 배열에서 만족하는 요소를 찾는다.
- **findIndex와 달리** **요소**를 반환한다.

```jsx
let arr = [
	{ name: "이종원" ),
	{ name: "이정환" ),
	{ name: "신다민" ),
	{ name: "김효빈" )
];

let index = arr.findIndex((item) => item.name === "이정환");
console.log(index);

-------------------------------------------------------------
{ name: "이정환" )
```

### filter

- 배열에서 조건을 만족하는 요소만 모아 새로운 배열로 반환하는 메서드
- find, findIndex와 거의 비슷하다.

<aside>
📌 arr.filter( callback (item, index, array ) );

</aside>

```jsx
let arr = [
	{ name: "이종원", hobby: "축구" },
	{ name: "이정환", hobby: "영화" ),
	{ name: "신다민", hobby: "축구" ),
	{ name: "김효빈", hobby: "노래" )
];

let filteredArr = arr.filter(
	(item) => item.hobby === "축구"
);

console.log(filteredArr);

-----------------------------------------------------------
0: Object
name: "이종원"
hobby: "축구"

1: Object
name: "신다민"
hobby: "축구"
```

## 변형 메서드

- 배열을 변형하거나 요소를 정렬하는 메서드

### map

- 배열 각각의 요소에 대한 함수 호출 결과를 모아 새 배열을 만들어 반환하는 메서드

<aside>
📌 arr.map( callback (item, index, array ) );

</aside>

```jsx
//배열의 모든 요소에 3을 곱해 얻은 값 새 배열로 만들기
let arr = [1,2,3,4];
let newArr = arr.map((item) => item * 3 );

console.log(newArr);
------------------------------------------------------------
[3,6,9,12]
```

### Sort

- 배열의 요소를 정렬할 때 사용하는 메서드
- 사전순, 오름차순으로 정렬된다.

```jsx
let arr = [10, 5, 3];
arr.sort();

console.log(arr)
----------------------------------------------------------
[10,3,5]
```

→ 비교함수가 필요하다. (문자열로 취급해 사전순으로 정렬하기 때문에)

```jsx
// 오름차순 정렬(비교함수)
function compare(a,b) {
	if(a>b) {
		return 1;
	} else if (a<b) {
		return -1;
	} else {
		return 0;
	}
}

let arr = [10, 5, 3];
arr.sort(compare);
console.log(arr);

------------------------------------------------------------
[3, 5, 10]
```

- a는 b보다 크면 뒤로 가고 작으면 앞으로 온다.

### Join

- 배열 요소를 모두 연결해 하나의 문자열로 반환하는 메서드

```jsx
let arr = ["안녕", "나는", "이정환"];

console.log(arr.join());
console.log(arr.join("-"));
```

### reduce

- 배열의 모든 요소를 순회하면서 인수로 제공한 함수를 실행하고, 단 하나의 결과값만 반환하는 메서드
- map과 유사하지만 하나의 결과 값만 반환한다.

<aside>
📌 arr.reduce( (acc, item, index, array ) ⇒ {

   (…)
}, initial );

</aside>

- 첫번째 인수 : 콜백함수(”리듀서”)
    - acc : 이전 함수의 호출 결과를 저장함.(initial) - 필수 X
    - item : 현재의 배열 요소
    - index : 현재의 배열 인덱스
    - array : reduce 메서드를 호출한 배열
- 두번째 인수 : initial(초깃값)

```jsx
let arr = [1,2,3,4,5];
let result = arr.reduce((acc, item) => acc + item, 0);
 //초기 : 0 + 1 + 2 + 3 + 4 + 5

console.log(result);
--------------------------------------------------------
15
```

- acc와 item 2개의 매개변수를 제공받는다.

## Date 객체와 날

### Date 객체 생성하기

```jsx
//현재 날짜 및 시간 출력하기

let date = new Date();

console.log(date);
```

### 협정 세계시

- UTC는 국제 표준 시간으로 쓰이는 시간이다.
- 타임스템프 : 특정 시간이 UTC+0시인 1970년 첫날을 기점으로 흘러간 밀리초(ms)의 시간이다.

```jsx
// 타임스템프로 출력하기 Date(0)
let Jan01_1970 = new Date(0);
```

- 한국 표준시가 UTC보다 9시간 빠르기 때문에 UTC+09:00으로 표현됩니다.

### 원하는 날짜로 Date 객체 생성하기

```jsx
let date1 = new Date("2000-10-10/00:00:00");
let date2 = new Date("2020.10.10/00:00:00");
let date3 = new Date("2000/10/10/00:00:00");
let date4 = new Date("2000 10 10/00:00:00");
```

### 숫자로 특정 날짜 전달하기

- year, month, date, hours, minutes, seconds, milliseconds 순서로 Date 객체 만들기

```jsx
let date1 = new Date(2000, 10, 20, 0,0,0,0); //11월
let date2 = new Date(2000, 9, 10); //10월
```

- 월은 0부터 시작하기 때문에 10은 11월 이다.

### 타임 스탬프로 날짜 생성하기

- 타임 스탬프는 저장 공간이 적게 차지해서 빠른 비교와 탐색이 가능하다.

```jsx
let date = new Date(2000, 9, 10); 
let timeStamp = date.getTime(); //Date 객체에 저장된 날짜를 타임스탬프로 변환해준다.
console.log(timeStamp); 

let dateClone = new Date(timeStamp); // 타임스탬프 값을 인수로 전달하면 자동으로 날짜를 반환해 준다.
console.log(dateClone);
```

## Date 객체에서 날짜 요소 얻기

### getFullYear

- 네 자리수의 연도를 반환한다.

```jsx
let date = new Date(2000, 9, 10);

console.log(date.getFullYear());
```

### getMonth

- 0에서 11로 표현되는 월을 반환한다.

```jsx
console.log(date.getDate()); //9
```

### getDate

- 일 을 반환한다.

```jsx
console.log(date.getDate()); //10
```

### getDay

- 0 에서 6으로 표현되는 요일을 반환한다.
- 0 : 일요일, 6 : 토요일

```jsx
console.log(date.getDay); //2 - 화요일
```

### getHours, getMinutes, getSeconds, getMilliseconds

- 시간, 분, 초, 밀리초를 반환한다.

```jsx
console.log(date.getHours()); //0
console.log(date.getMinutes()); //0
console.log(date.getSeconds()); //0
console.log(date.getMilliseconds()); //0
```

## Date 객체의 날짜 요소 수정하기

### setFullYear

- 연도를 수정할 때

```jsx
let date = new Date(2000, 9, 10);
date.setFullYear(2021);
```

### setMonth

- 월을 수정할 때

```jsx
date.setMonth(10);
```

### setDate

- 일을 수정할 때

```jsx
date.setDate(11);
```

### setHours, setMinutes, setSeconds

- 시, 분, 초를 수정할 때

```jsx
date.setHours(1);
date.setMinutes(1);
date.setSeconds(1);
```

## Date 객체 출력하기

### toString

- 현재 저장된 시간을 **문자열로 반환**한다.

```jsx
const today = new Date(2000, 9, 10, 22);

console.log(today.toString());

-----------------------------------------------------------
Tue Oct 10 2000 22:00:00 GMT+0900 (한국표준시)
```

### toDateString

- 시간을 제외하고 **현재의 날짜만 출력**하는 메소드

```jsx
console.log(today.toDateString());
---------------------------------------------------------
Tue Oct 10 2000
```

### toLocaleString, toLocalDateString

- ‘현지화’된 날짜와 시간을 반환한다.

→ 현재 우리가 속한 시간대에 맞게 변환한다는 뜻이다.

```jsx
console.log(today.toLocaleString()); //날짜+시간 모두 반환
console.log(today.toLocaleDateString()); //날짜만 반환
-----------------------------------------------------------
2000. 10. 10. 오후 10:00:00
2000. 10.10
```

## Date 객체 응용하기

### n월씩 이동하기

- Date 객체를 응용하여 날짜를 n월씩 이동하는 기능을 구현한다.

```jsx
function moveMonth(date, moveMonth) { //Date객체, 이동할 월의 수
	const curRimestamp = date.getTime(); //타임스템프를 변수에 저장
	const curMonth = date.getMonth(); // 월을 구해 변수에 저장
	
	const resDate = new Date(curTimestamp); //date 객체와 동일한 타임스탬프 값이 들어있는 Date 객체가 저장되어있음.
	reDate.setMonth(curMonth + moveMonth); //reDate에 저장된 Date 객체에서 setMonth를 호촐해 moveMonth 만큼 더한 월을 새로운 월로 지정함.
	return reDate;
}

const dateA = new Date("2000-10-10");
console.log("A: ", dateA);

const dateB = moveMonth(dateA, 1);
console.log("B: ", dateB);

const dateC = moveMonth(dateA, -1);
console.log("C: ", dateC);

--------------------------------------------------------------

A : Tue Oct 10 2000 09:00:00 GMT+0900
B : Fri Nov 10 2000 09:00:00 GMT+0900
C : Sun Sep 10 2000 09:00:00 GMT+0900
```

### 배열에서 이번 달에 해당하는 날짜만 필터링하기

- 여러 개의 Date 객체를 저장하고 있는 배열에서 이번 달에 해당하는 Date 객체만 필터링 해 새로운 배열을 생성한다.
- 2가지 작업 필요
    - 이번 달에서 가장 빠른 시간, 가장 늦은 시간 구하기
    - 위에서 구한 시간 내에 포함되는 Date 객체를 필터링하

```jsx
function filterThisMonth(pivotDate, dateArray) {//pivotDate: 필터링할 월이 있는 Date 객체, dateArray: Date객체
	const year = pivotDate.getFullYear(); 
	const month = pivotDate.getMonth();

//이번달에 가장 빠른 시간인 10월 1일 0시 0분 0초로 설정한다.
	const startDay = new Date(year, month, 1, 0,0,0,0);
//이번달에 가장 마지막인 다음달 0일 23시 59분 59초로 설정한다.
	const endDay = new Date(year, month+1, 0, 23, 59, 59);

	const resArr = dateArray.filter((it) =>
		startDay.getTime() <= it.getTime() && //it이 startDat와 같거나 이후인지
		it.getTime() <= endDay.getTime() //it이 endDay와 같거나 이전인지 확
	);
	retrun resArr;
}

const dateArray = [
	new Date("2000-10-1");
	new Date("2000-10-31");
	new Date("2000-11-1");
	new Date("2000-9-3");
	new Date("1900-10-11");
];

//오늘이 2000년 10월 10일이라고 가정
const today = new Date("2000-10-10/00:00:00");
const filterArray = filterThisMonth(today, dateArray);

console.log(filteredArray);

-----------------------------------------------------------
0 : Sun Oct 01 2000 00:00:00 GMT+0900
1 : Tue Oct 31 2000 00:00:00 GMT+0900
```

## 비동기 처리

- 비동기 처리의 효과 : 오래 걸리는 작업이 종료될 때까지 기다리지 않고 다음 작업을 수행하는 유연한 프로그래밍이 가능하다.

### 동기와 비동기

- 동기 (Synchronous) : 순차적으로 코드를 실행하는 것.
    - ex) 은행 창구 - 은행 창구에서 한번에 한 명의 고객을 응대한다.
- 오래 걸리는 작업을 빨리 끝낼 작업보다 먼저 실행하면 지연 문제가 발생한다.

- **비동기(Asynchronous)**  : 특정 작업을 다른 직업과 관계없이 독립적으로 동작하게 만드는 것

**setTimeout** 을 사용하면 비동기적으로 처리 가능하다.

```jsx
setTimeout(() => { //3초 동안 진행
	console.log("1번!");
}, 3000);

console.log("2번!");

---------------------------------------------------------
2번!
1번!
```

- 일이 일찍 끝나는 순서대로 출력된다.

### 콜백 함수로 비동기 처리하기

```jsx
//1초 기다린 후 인수에 2를 곱해 콘솔에 출력
function double(num) {
	setTimeout(() => {
		const doubleNum = num *2;
		console.log(doubleNum);
	}, 1000);
}

double(10);
```

- 함수 내부에서 출력하지 않으면 타이머 식별 번호가 출력된다.

```jsx
function double(num, cb) {
	setTimeout(() => 
		const doubleNum = num *2; // 2배를 하고
		cb(doubleNum); // 콜백함수로 출력해라
	}, 1000);
}

double(10, (res) => { //num : 10, cb: res
	console.log(rest);
});

console.log("마지막"); // 먼저 출
```

### 프로미스 객체를 이용해 비동기 처리하기

- 프로미스 : 비동기 처리를 목적으로 제공하는 자바스크립트 내장 객체
- 프로미스 비동기 작업을 3가지로 나누어 관리한다.
    - **대기 상태** : 작업을 아직 완료하지 않음
    - **성공 상태** : 작업을 성공적으로 완료함 - 해결
    - **실패 상태** : 작업이 모종의 이유로 실패함 - 거부
- 유튜브로 설명
    - 대기 상태 - 동영상 로딩 중
    - 성공 상태 - 영상 재생 가능(해결)
    - 실패 상태 - 영상 재생 불가(거부)

### 프로미스 객체 만들기

- 인수로 실행 함수를 전달한다.
- 실행 함수 : 비동기 작업을 수행하는 함수
    - 프로미스 객체를 생성함 & 2개의 매개변수를 제공받는다.

```jsx
//프로미스 객체의 실행 함수.
const promise = new Promise(
	function (resolve, reject) {
		setTimeout( () => {
			console.log("안녕");
		}, 500);
	}
});
```

- resolve : 비동기 작업의 상태를 성공으로 바꾸는 함수
- reject : 비동기 작업의 상태를 실패로 바꾸는 함수

- 작업 상태를 성공으로 바꾸는 예

```jsx
const promise = new Promise(
	function (resolve, reject) {
		setTimeout(() => {
			resolve("성공");
		}, 500);
	}
});

promise.then(function (res) { // then 메서드를 호출하고 콜백함수를 전달한다. resolve를 호출했을때 실행된다.
	console.log(res);
});
```