24. 동기식,비동기식

동기식 과 비동기식

• 출처: https://www.youtube.com/watch?v=s1vpVCrT8f4 [드림코딩 by 엘리]

1. 동기식

• JavaScript is synchronus 자바스크립트는 동기식임
• Execute the code block by order after hoisting 호이스팅 이후에 순서에 따라 위에서 아래로 실행됨
• hoisting이란 var 변수 또는 함수는 자바스크립트 실행시 자동적으로 제일위로 올라간다는 뜻
• 비동기식이란 하나의 일이 완료될때까지 기다리지 않고 다음에 해야될 일을 바로 실행되는 것을 말함

//javascript는 동기식이다. 위에서 아래로 순차적으로
console.log('1');
console.log('2');
console.log('3');
// 결과값
// 1
// 2
// 3

2. callback 을 이용한 비동기식 처리

console.log('1');

//1초뒤에 콜백함수를 실행하라
//ES6 이전의 코드
setTimeout(
  // 콜백함수
  function() {
    console.log('2');
  }  
  ,1000
); 

//ES6에서 제공하는 Arrow function을 이용
// setTimeout(
//   [이부분이 콜백함수]
//   () => console.log('2')  
//   ,1000
// ); 

console.log('3');

// console.log('1'); 실행
// setTimeout은 해당 callback 함수를 1초 후에 실행하라고 browser 에게 전달
// 응답을 기다리지 않고 바로 console.log('3'); 실행
// 1초후 browser 에서 callback 함수 실행

// 결과값
// 1 
// 3
// 2