심심하면 정답은 아래로 . . .

function 함수(구멍) { 
  console.log( 1 )
  구멍( );
}
함수 ( ) // <- 이 안에 함수들 집어 넣어서 console로 1,2,3,4,5 찍어보자

자바스크립트는 Synchronous

한번에 코드 한줄씩 차례차례 - from 위 to 아래로 실행한다.

비동기식 처리하는 브라우저님

근데 브라우저가 자바스크립트를 실행 하는데 예외가 존재함 - 언제나 예외가 날 힘들게 하지 후후...

Python같은 일반적인 프로그래밍 언어에서는
특정 코드를 1초 후에 실행하고 싶다면

---python

print ( 1 )
time.sleep ( 1 ) // 1초쉬세요 라는 코드
print ( 2 )

위 코드에서는 1출력 / 1초 쉬고 / 2출력

Q . 자바스크립트에서는??

console.log( 1 );
setTimeout( function() { }, 1000);
console.log( 2 );

A . 1과 2가 동시 출력이 된다 ; ; 1초를 안 쉬어 주네

Q . 자바스크립트를 순차적으로 실행하려면 ?

A . 콜백함수를 사용하자

console.log( 1 )
setTimeout ( function( ) { console.log ( 2 ) } , 1000 )

콜백함수가 뭔데요?

그냥 함수안에 들어가는 함수를 전부 콜백함수라 부릅디다.

---

그런데 왜 콜백함수를 배울까??

내가 지금, 받아들이고 생각 해낸 결과는 내가 코드들을 내 맘대로 조작하기 위해서라고 생각이든다.

서버에 데이터를 요청하고 데이터를 가지고 데이터바인딩 하려고 하는데 데이터 요청 먼저 받아온 직 후, 데이터 바인딩 해야하는데 그게 내 맘대로 안대면 어떻하느냐... 이 말이다.

콜백함수 디자인

순차적으로 실행 시키고 싶다면 . . . 콜백 함수를 사용해보자

1 . 함수명을 선언 후 ...

function 첫째함수 ( 콜백 ) { 
  console.log ( 1 )
  콜백 ();
}

function 둘째함수 () { 
  console.log ( 2 );
}

첫째함수 ( 둘째함수 ) // 이게 콜백함수 디자인 하는 방식임

▲ 위처럼 미리 만들어놓은 함수를 집어넣을 수도 있고

2 . 함수선언문을 직접 집어 넣을 수 있음

function 첫째함수 ( 콜백 ) {
  console.log ( 1 )
  콜백 () ;
}

첫째함수 ( function(){
  console.log ( 2 );
})     

▲ 이렇게 직접 함수선언문을 집어넣을 수도 있다.

단점

근데 콜백함수의 단점도 있다.

첫째함수 실행하고 -> 둘째 함수 실행 -> 셋 째 함수 실행 -> 넷째 함수 실행 하고 싶어서 콜백함수로 함 넣어보는 코드를 짜보면

첫째함수(function(){
  둘째함수(function(){
    셋째함수(function(){
      넷째함수(function(){
        ...
      })
      })
    })
  })

▲ 이건 좀 심하다.... 콜백함수의 문제점은 코드가 복잡, 어려워진다.

콜백함수랑 헤어지고 싶은게 아니라 자바스크립트랑 헤어지고 싶다.

그래서 이런 문제점을 보완하기 위해 Promise 패턴이 있다

두둥!! To be continued...