callback 함수를 이해했는지 확인하는 작업.
문제: 나이가 3 초과인 사람은 통과하고 아니면 입장할 수 없다라는 콜백함수 만들기.
원리 : 단일 쓰레드인 js엔진은 실행할 수 있는 공간이 한 곳인데(콜스택)입니다. 먼저 main함수가 실행되고 조건에 맞춰서 console.log가 실행이 되거나 되지 않은 상태(age<3) 로 함수가 종료되고 동시에 callback함수는 webAPI가 처리할 수 있게 js엔진이 요청한다. webAPI는 이를 가지고 q에 옮겨놓고 이벤트 q의 순서에 따라 콜스택이 비게 되면 그 위에 콜백함수를 실행하게 된다.
function check(age,callback){
age>3? console.log("통과입니다"): callback()
}
function errorcheck(age){
setTimeout(() => {
console.log("나이가 3보다 작기 때문에 서버 요청에 실패하였습니다.")
}, 1000);
}
check(7,errorcheck)
check(2,errorcheck)
결과
통과입니다
나이가 3보다 작기 때문에 서버 요청에 실패하였습니다.
문제2: 웹 API에 url의 데이터가 정상적으로 들어온 데이터만 함수 실행 하기
let url = "https://www.youtube.com/"
function download(url,check ){
setTimeout(() =>{
console.log(`${url}의 데이터를 다운로드 중입니다` )
let error = url.length===0
error ? function check(){console.log('error')} : console.log("데이터가 잘 들어왔습니다")
},3000)
}
'Javascript' 카테고리의 다른 글
JS 지저분한 코드 깨끗하게 바꾸는 팁!! (0) | 2021.10.26 |
---|---|
callback 함수 지옥편 promise로 극복 (0) | 2021.10.21 |
JS function 코딩하면서 이해하기 (0) | 2021.10.20 |
자바스크립트 동작원리 with callback function (0) | 2021.10.19 |
더미데이터 버튼 클릭시 보여주기 위한 onclick=button() 만들기 (0) | 2021.10.02 |