JavaScript - Callback HELL

mia·2022년 11월 23일

JavaScript 동기와 비동기

JavaScript를 글로 배워보자

목록 보기

13/19

1. 동기와 비동기

자바스크립트는 synchronous, 동기적인 언어이다.
호이스팅 된 이후로 작성이된 순서대로 동기적으로 실행된다.

hoisting: var, function 선언들이 자동적으로 제일 위로 올라가는 것.

synchronous: 정해진 순서에 맞게 코드가 실행되는 것

<script>
  console.log(1);
  console.log(2);
  console.log(3);
  // 1 -> 2 -> 3
</script>

asynchronous: 언제 코드가 실행될지 예측할 수 없는 것

<script>
  console.log(1);
  setTimeout(() => console.log(2), 1000) 
  console.log(3);
  // 1 -> 3 -> 2
</script>

setTimeout() : 브라우저에서 제공하는 API로 지정한 시간이 되면 전달한 함수(call back함수)를 호출
<진행 순서>
콘솔에 1 찍기 -> 2는 브라우저에게 요청 전달(1초뒤에 콜솔 찍기) -> (응답을 기다리지 않고 다음으로 넘어감) 콘솔에 3 찍기 -> 브라우저에서 1초의 시간이 지난 뒤 콘솔에 2 찍기

2. 콜백 마지막 정리

지금 당장 실행하지는 않고 나중에 불러달라고 전달하는 함수를 callback 함수라고 한다.
자바스크립트는 함수를 콜백형태로 인자로 다른 함수에 전달할 수도 있고 변수에 할당할 수도 있는 언어이다.
언어마다 콜백을 전달하는 형식은 모두 다르다.

Synchronous callback : 즉각적으로 불러주는 함수

<script>
  console.log(1);
  setTimeout(() => console.log(2), 1000) 
  console.log(3);
  function printImmediately(print) {
  	print();
  } 
  printImmediately(() => console.log('hello'));
  // 1 -> 3 -> hello -> 2
</script>

함수 선언은 hoisting되기 때문에 가장 위로 올라간다.
<진행 순서>
콘솔에 1찍기 -> 2는 브라우저에게 요청 전달(1초뒤에 콜솔 찍기) -> (응답을 기다리지 않고 다음으로 넘어감) 콘솔에 3 찍기 -> 콘솔에 hello 찍기 -> 브라우저에서 1초의 시간이 지난 뒤 콘솔에 2 찍기

Asynchronous callback : 언제 실행될지 예측할 수 없는 함수

<script>
  console.log(1);
  setTimeout(() => console.log(2), 1000) 
  console.log(3);
  function printImmediately(print) {
  	print();
  } 
  printImmediately(() => console.log('hello'));
  function printWithDelay(print, timeout) {
  	setTimeout(print, timeout);
  } 
  printWithDelay(() => console.log('async callback'), 2000);
  // 1 -> 3 -> hello -> 2 -> async callback
</script>

<진행 순서>
콘솔에 1찍기(동기) -> 2는 브라우저에게 요청 전달(1초뒤에 콜솔 찍기)(비동기) -> (응답을 기다리지 않고 다음으로 넘어감) 콘솔에 3 찍기(동기) -> 콘솔에 hello 찍기(동기) -> 함수는 브라우저에게 요청 전달(2초뒤에 콜솔 찍기)(비동기) -> 브라우저에서 1초의 시간이 지난 뒤 콘솔에 2 찍기 -> 브라우저에서 2초의 시간이 지난 뒤 콘솔에 async callback 찍기

3. callback HELL☠️

<script>
<!-- class 선언-->
  class UserStorage {
  	loginUser(id, password, onSuccess, onError) {
    	setTimeout(() => {
        	if(
            	(id === 'mia' && password === '1234') ||
                (id === 'jiyeon' && password === '5678')
            ) {
            	onSuccess(id);
            } else {
            	onError(new Error('not found'));
            }
        }, 2000);
    }
    
    getRoles(user, onSuccess, onError) {
    	setTimeout(() => {
        	if(user === 'mia') {
            	onSuccess({ name: 'mia', role: 'admin'});
            } else {
            	onError(new Error('no access'));
            }
        }, 1000);
    }
  }
<!--0bject 만들기-->
  const userStorage = new UserStorage();
  const id = prompt('enter your id');
  const password = prompt('enter your password');
  userStorage.loginUser(
    id,
    password,
    user => {
    	userStorage.getRoles(
        user, 
        userWithRole => {
        	alert(`hello ${userWithRole.name}, you have a ${userWithRole.role} role`);
        },
        error => {
        	console.log(error);
        }
      );
    },
    error => {
    	console.log(error);
        }
      );
</script>