1
function a() {
2
  // 📝 반환되기 전에 오래걸리는 for이 있다면, 최종결과값이 반환되는데 오래걸림
3
  // 📝 이렇게 함수끼리 긴밀하게 연결된 경우를 '동기화'라고 말함
4
  // 📝 JavaScript는 기본적으로 동기적으로 수행됨
5
  // for (let i = 0; i < 100000; i++);
6
  return 1
7
}
8

9
function b() {
10
  return a() + 1
11
}
12

13
function c() {
14
  return b() + 1
15
}
16

17
console.log('시작했다!')
18
// c -> b -> a 순으로 호출되고, Call Stack에 이 순서대로 저장됨
19
// Call Stack에서 반환될 때는 반대로, a -> b -> c순으로 반환됨
20
const result = c() // 3
21
console.log(result)

1
document.querySelector('.button').addEventListener('click', function () {
2
  // addEventListener : 함수 안에 function()이 콜백함수
3
})
4

5
setTimeout(function () {
6
  // 1초 뒤 실행하는 함수 setTimeout 안에 function() 역시 콜백함수
7
}, 1000)

1
function first(파라미터) {
2
  파라미터()
3
}
4
function seceond() {}
5
first(seceond)

1
function execute() {
2
  console.log('1')
3
  setTimeout(() => console.log('2'), 3000)
4
  console.log('3')
5
}
6
execute() // 1, 3이 출력되고 3초 뒤에 2가 출력

1
'use strict'
2

3
// **** JS는 동기적(synchronous)으로 동작
4
// - 호이스팅이 된 이후부터 코드가 작성된 순서에 맞춰서 하나하나씩 동기적으로 실행됩니다.
5
// - 호이스팅: var, function같은 선언들이 제일 위로 올라가는 것
6
console.log('1')
7
setTimeout(() => console.log('2'), 1000)
8
console.log('3')
9

10
// 동기적(Synchronous) callback
11
function printImmediately(print) {
12
  print()
13
}
14
printImmediately(() => console.log('hello'))
15

16
// 비동기적(Asynchronous) callback
17
function printWithDelay(print, timeout) {
18
  setTimeout(print, timeout)
19
}
20
printWithDelay(() => console.log('async callback'), 2000)

1
class UserStorage {
2
  loginUser(id, password, onSuccess, onError) {
3
    setTimeout(() => {
4
      if ((id === 'ellie' && password === 'dream') || (id === 'coder' && password === 'academy')) {
5
        onSuccess(id)
6
      } else {
7
        onError(new Error('not found'))
8
      }
9
    }, 2000)
10
  }
11

12
  getRoles(user, onSuccess, onError) {
13
    setTimeout(() => {
14
      if (user === 'ellie') {
15
        onSuccess({ name: 'ellie', role: 'admin' })
16
      } else {
17
        onError(new Error('no access'))
18
      }
19
    }, 1000)
20
  }
21
}
22

23
// class를 만들어 id, password를 입력받음
24
const userStorage = new UserStorage()
25
const id = prompt('enter your id')
26
const password = prompt('enter your passrod')
27

28
userStorage.loginUser(id, password, user => {
29
  // 로그인 성공시 실행
30
  userStorage.getRoles(
31
    // 로그인 성공하면 유저 역할 요청해서 받기
32
    user, // 유저 데이터 받고
33
    userWithRole => {
34
      // 이것을 처리하는 콜백 하나
35
      alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`)
36
    },
37
    error => {
38
      // 에러 시 처리할 콜백
39
      console.log(error)
40
    },
41
  )
42
  error => {
43
    // 로그인 실패시 실행
44
    console.log(error)
45
  }
46
})

1
let 프로미스 = new Promise() // Promise 객체 생성
2

3
프로미스
4
  .then(function () {
5
    // 프로미스가 성공일 경우 실행할 코드
6
  })
7
  .catch(function () {
8
    // 프로미스가 실패일 경우 실행할 코드
9
  })
10
  .finally(function () {
11
    // 프로미스가 성공/실패와 상관 없이 어떤 기능을 마지막으로 실행하고 싶을 때
12
  })

1
const promise = new Promise((resolve, reject) => {
2
  // network 통신, read files 등의 haeavy work를 수행
3
  console.log('doing something...')
4
  setTimeout(() => resolve('ellie'), 2000)
5
})

1
const promise = new Promise((resolve, reject) => {
2
  console.log('예를 들어, network 통신, read files 등의 무거운 작업를 수행...')
3
  setTimeout(() => resolve('메시'), 2000) // resolve가 '메시'라는 값을 전달
4
})
5

6
// 프로미스가 정상적으로 수행되면
7
// 마지막에 resolve라는 콜백함수를 통해 전달된 값이 value로 들어옴
8
promise
9
  // 프로미스가 성공일 경우 실행할 코드
10
  .then(value => {
11
    console.log(value)
12
  })
13
  // 프로미스가 실패일 경우 실행할 코드
14
  .catch(error => {
15
    console.log(error)
16
  })
17
  // 프로미스가 성공/실패와 상관 없이 어떤 기능을 마지막으로 실행하고 싶을 때
18
  .finally(() => {
19
    console.log('finally')
20
  })

1
const promise = new Promise((resolve, reject) => {
2
  console.log('예를 들어, network 통신, read files 등의 무거운 작업를 수행...')
3
  setTimeout(() => reject(new Error('no network')), 2000) // reject로 변경하면 uncaught error가 발생
4
})
5

6
// catch를 사용해서 에러 발생시 어떻게 처리할 건지에 대한 콜백함수를 등록
7
promise
8
  .then(value => {
9
    console.log(value)
10
  })
11
  .catch(error => {
12
    console.log(error)
13
  })
14
  .finally(() => {
15
    console.log('finally')
16
  })

1
function fetchEgg(chicken) {
2
  // new Promise((resolve, reject)) 축약 버전
3
  return Promise.resolve(`${chicken} => 🥚`)
4
}
5

6
function fryEgg(egg) {
7
  return Promise.resolve(`${egg} => 🍳`)
8
}
9

10
function getChicken() {
11
  // 여기서 에러가 발생했다고 가정
12
  return Promise.reject(new Error('치킨을 가지고 올 수 없음!'))
13
  // return Promise.resolve(`🪴 => 🐓`);
14
}
15

16
// getChicken을 가져온다면
17
getChicken()
18
  .catch(() => '🐔') // 에러가 발생했다면, 🐔를 리턴
19
  .then(fetchEgg) // getChicken이 다 수행되었다면,
20
  .then(fryEgg) // fetchEgg이 다 수행되었다면,
21
  .then(console.log) // 🐔 => 🥚 => 🍳

1
const fetchNumber = new Promise((resolve, reject) => {
2
  setTimeout(() => resolve(1), 1000)
3
})
4

5
fetchNumber // 1
6
  .then(num => num * 2) // 2
7
  .then(num => num * 3) // 6
8
  .then(num => {
9
    return new Promise((resolve, reject) => {
10
      setTimeout(() => resolve(num - 1), 1000) // 5
11
    })
12
  })
13
  .then(num => console.log(num)) // 5

1
const getHen = () =>
2
  new Promise((resolve, reject) => {
3
    setTimeout(() => resolve('🐔'), 1000)
4
  })
5
const getEgg = hen =>
6
  new Promise((resolve, reject) => {
7
    setTimeout(() => resolve(`${hen} => 🥚`), 1000)
8
  })
9
const cook = egg =>
10
  new Promise((resolve, reject) => {
11
    setTimeout(() => resolve(`${egg} => 🍳`), 1000)
12
  })
13

14
getHen()
15
  .then(hen => getEgg(hen))
16
  .then(egg => cook(egg))
17
  .then(meal => console.log(meal))
18

19
// 결과는 🐔 => 🥚 => 🍳
20
// 콜백함수를 전달할 때 받아오는 값이 하나이고 다음 함수를 바로 호출하는 경우에는
21
// 다음처럼 조금 더 생략하여 사용 가능
22
getHen().then(getEgg).then(cook).then(console.log)

1
const getHen = () =>
2
  new Promise((resolve, reject) => {
3
    setTimeout(() => resolve('🐔'), 1000)
4
  })
5
const getEgg = hen =>
6
  new Promise((resolve, reject) => {
7
    setTimeout(() => reject(new Error(`error! ${hen} => 🥚`)), 1000)
8
  })
9
const cook = egg =>
10
  new Promise((resolve, reject) => {
11
    setTimeout(() => resolve(`${egg} => 🍳`), 1000)
12
  })
13

14
getHen()
15
  .then(getEgg)
16
  .catch(error => {
17
    return '🥖'
18
  })
19
  .then(cook)
20
  .then(console.log)
21
  .catch(console.log)
22

23
// 결과는 🥖 => 🍳

1
function delay(ms) {
2
  return new Promise(resolve => setTimeout(resolve, ms))
3
}
4

5
async function getApple() {
6
  await delay(1000)
7
  return '🍎'
8
}
9

10
async function getBanana() {
11
  await delay(1000)
12
  return '🍌'
13
}
14

15
function pickAllFruits() {
16
  // Promise.all : 병렬적으로 한번에 모든 Promise들을 실행
17
  return Promise.all([getApple(), getBanana()]).then(fruits => fruits.join(' + '))
18
}
19
pickAllFruits().then(console.log) // 결과는 🍎 + 🍌

1
function delay(ms) {
2
  return new Promise(resolve => setTimeout(resolve, ms))
3
}
4

5
async function getApple() {
6
  await delay(1000)
7
  return '🍎'
8
}
9

10
async function getBanana() {
11
  await delay(2000)
12
  return '🍌'
13
}
14

15
function pickOnlyOne() {
16
  // Promise.race : 주어진 Promise중에 제일 빨리 수행된것을 출력
17
  return Promise.race([getApple(), getBanana()])
18
}
19
pickOnlyOne().then(console.log) // 결과는 🍎

1
function getBanana() {
2
  return new Promise(resolve => {
3
    setTimeout(() => resolve('🍌'), 1000)
4
  })
5
}
6

7
function getApple() {
8
  return new Promise(resolve => {
9
    setTimeout(() => resolve('🍎'), 3000)
10
  })
11
}
12

13
function getOrange() {
14
  return Promise.reject(new Error('no orange')) // 에러가 발생하면
15
}
16

17
// **** 바나나과 사과를 같이 가지고 오기
18
// 바나나 갖고오는데 1초, 사과 갖고오는데 3초, 총 4초 뒤에 바나나, 사과 출력
19
getBanana()
20
  .then(banana =>
21
    getApple() //
22
      .then(apple => [banana, apple]),
23
  )
24
  .then(console.log)
25

26
// 📝 Promise.all : 병렬적으로 한번에 모든 Promise들을 실행!
27
Promise.all([getBanana(), getApple()]) // 1초 뒤 바나나, 3초 뒤 사과가 병렬 수행
28
  .then(fruits => console.log('all', fruits)) // 총 3초 뒤에 바나나, 사과 출력
29

30
// 📝 Promise.race : 주어진 Promise중에 제일 빨리 수행된것이 이김!
31
Promise.race([getBanana(), getApple()]) //
32
  .then(fruit => console.log('race', fruit)) // 먼저 출력되는 1초 뒤 바나나가 출력
33

34
Promise.all([getBanana(), getApple(), getOrange()])
35
  .then(fruits => console.log('all-error', fruits)) // 모두 완료되야 실행됨
36
  .catch(console.log)
37

38
Promise.allSettled([getBanana(), getApple(), getOrange()])
39
  .then(fruits => console.log('all-settle', fruits)) // 성공, 실패를 둘 다 배열로 묶어서 리턴
40
  .catch(console.log)

1
async function 어려운연산() {
2
  // async을 지정해주면 Promise를 리턴하는 함수로 만들어줌
3
  1 + 1
4
}

1
async function 더하기() {
2
  1 + 1
3
}
4

5
더하기().then(function () {
6
  console.log('더하기 성공')
7
})

1
// **** Promise 사용하는 경우
2
function fetchUser() {
3
  return new Promise((resolve, reject) => {
4
    // 네트워크에서 2초 걸리는 연산...
5
    resolve('메시')
6
  })
7
}
8

9
const user = fetchUser()
10
user.then(console.log)
11

12
// --------------------------------------------
13
// **** Async & Await 사용하는 경우 : 가독성 ^
14
async function fetchUser() {
15
  // 네트워크에서 2초 걸리는 연산...
16
  return '메시'
17
}
18

19
const user = fetchUser()
20
user.then(console.log)

1
// **** async / then 사용
2
async function 더하기() {
3
  let 어려운연산 = new Promise((성공, 실패) => {
4
    let 결과 = 1 + 1
5
    성공()
6
  })
7
  어려운연산.then() // (1) 여기 부분이
8
}
9
더하기()
10

11
// ----------------------------------------------
12
// **** async / awit 사용
13
async function 더하기() {
14
  let 어려운연산 = new Promise((성공, 실패) => {
15
    let 결과 = 1 + 1
16
    성공()
17
  })
18
  let 결과 = await 어려운연산 // (2) 이렇게 바뀜
19
  // 어려운연산 Promise를 기다린 다음에 완료되면 결과를 변수에 담아라
20
}
21
더하기()

1
function getBanana() {
2
  return new Promise(resolve => {
3
    setTimeout(() => resolve('🍌'), 1000)
4
  })
5
}
6

7
function getApple() {
8
  return new Promise(resolve => {
9
    setTimeout(() => resolve('🍎'), 3000)
10
  })
11
}
12

13
function getOrange() {
14
  return Promise.reject(new Error('no orange'))
15
}
16

17
// **** 바나나과 사과를 같이 가지고 오기
18
async function fetchFruits() {
19
  const banana = await getBanana() // getBanana() 값을 받아올 떄까지 기다림(await)
20
  const apple = await getApple() // getApple() 값을 받아올 떄까지 기다림(await)
21
  return [banana, apple]
22
}
23

24
fetchFruits() //
25
  .then(fruits => console.log(fruits)) // 4초 뒤 [ '🍌', '🍎' ] 출력

1
// 원래 코드 -> 각 1초씩 총 2초를 기다려야 함
2
async function pickFruits() {
3
  const banana = await getBanana()
4
  const apple = await getApple()
5
  return `${apple} + ${banana}`
6
}
7

8
// ------------------------------------------------------------------
9
// 개선된 코드 -> 병렬적으로 실행되어 1초만 기다리면 됨
10
async function fetchFruits() {
11
  const bananaPromise = getBanana()
12
  const applePromise = getApple()
13
  const banana = await bananaPromise
14
  const apple = await applePromise
15
  return `${apple} + ${banana}`
16
}