1230 TIL

1230 TIL

Created By: 성희 배 Last Edited: Dec 30, 2019 10:50 PM

ES6 : Arrow Function

• function 사용 안함
• (인자) ⇒
• short-hand syntax
• arrow function은 자신의 this, arguments, super, new.target을 바인딩 하지 않는다.

    const event = {
        name : 'Birthday Party',
        guestList :['Andrew', 'Sonia', 'Mike'],
        printGuestList(){ 
            console.log('Guest list for ' + this.name)
            this.guestList.forEach((guest)=>{
                console.log(guest + ' is attending ' + this.name)
            })
        }
    }
  

• 메소드 함수가 아닌 곳에 가장 적합
• concise 바디는 return 불필요 / block 바디는 return 필요

    const square = x => x*x //concise body
  

• 객체 리터럴 반환 : 괄호로 감싸기

    const func = ()=> ({foo:1})
  

  ---

Async/Await

• JS는 비동기적 언어 → 동기화가 필요 (setTimeout, callback, promise)

setTimeout

• 특정 시간 동안 delay
• setTimeout은 첫 번째 task 내에 별도의 task 생성 후 첫 번째 task가 종료되길 기다림.

    let first = 10
    let second = 20
    let result = 0
      
    function add(x, y) {
      return x + y
    }
    function getResult(callback) {
      setTimeout(function() {
        result = add(first, second)
        console.log(result) // 30
        callback()
      }, 1000)
    }
      
    getResult(function() {
      first = 20
    })
  

  → 따라서 결과는 30이 아닌 40이 나온다.

callback

• callback?
  • 호출하는 함수 (calling function)가 호출되는 함수(called 함수)로 전달하는 함수를 말한다.
• callback 함수의 제어권은 호출되는 함수에게 있음
• 비동기 코드를 동기식으로 처리하기 위해 사용. (네트워크 요청)
• 남발할 시 코드의 복잡도, 에러 발생 확률 올라감

promise

• 어떤 작업이 성공 (resolve) 됐을 때, promise 객체의 then() 함수에 넘겨진 파라미터(함수)를 단 한번만 호출하겠다는 약속
• 파라미터가 단 한 번만 실행되기 때문에 안정성 높음
• 실패(reject) 했을 경우에도 catch() 함수를 통해 실패 이후의 작업 처리 가능

async & await

• function 키워드 앞에 async 부착, 비동기로 처리되는 부분 앞에 await 부착
• await 뒷 부분이 반드시 promise 반환
• async도 promise 반환
• async,await => 제너레이터,이터레이터 + 프로미스