비동기 콜백함수 공부 예제만들기

김동찬·2021년 7월 27일
0

//동기식 처리
console.log(1)
console.log(2)
console.log(3)
순차적으로 작동하는 형태를 동기적

비동기식 처리
console.log(1)
setTimeout(()=>{console.log(2)},1000)
console.log(3)

오래 걸리는 작업 있으면 잠시 두고 다른거 부터 처리하는
방식을 비공기식 처리
settime, ajax(), eventlistner 등 대표적인 비동기
처리 함수

//콜백함수
// 함수안에 함수가 들어간다 그것이 콜백
function func1(data){
  data() // 내가 원하는 위치에 출력가능
  console.log(1)
}

function func2(){
  console.log(2)
}

func1(func2)


콜백지옥
순차적으로 실행하려고 콜백함수를 여러개 사용하면 가독성이 안좋습니다.
코드가 옆으로 길어지고 보기 안좋아요
// 그래서 우리는 프로미스를 사용합니다.
function func1(data){
  data() // 내가 원하는 위치에 출력가능
  console.log(1)
}

function func2(data){
  data() // 내가 원하는 위치에 출력가능
  console.log(2)
}

function func3(data){
  data() // 내가 원하는 위치에 출력가능
  console.log(3)
}

function func4(data){
  data() // 내가 원하는 위치에 출력가능
  console.log(4)
}

func1(()=>{
  func2(()=>{
    func3(()=>{
      func4(()=>{
        console.log(5)
      })
    })
  })
})
profile
프론트엔드 지망 개발공부를 하는 김동찬입니다 ^^7 코드스테이츠

0개의 댓글