# 자바스크립트 callback

### 동기와 비동기 

```javascript
'use script'
// JavaScript is synchronous.
// 자바스크립트는 동기적인 프로그래밍 언어이다.
// hoisting: var, function dectaration 
// hoisting: 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

console.log('1');
setTimeout(()=>console.log('2'),1000); // 브라우저 요청 -> 1초 후 실행 
console.log('3');   
// 1 3 2 출력
// => 비동기적인 실행 방법

//Synchronous callback (동기) 
// 함수의 선언은 호이스팅 되기때문에 제일 위로 가게됨 
function printImmediately(print){
    print();
}
 printImmediately(()=> console.log('hello'));
 
 
// Asynchronous callback (비동기)
// 함수의 선언은 호이스팅 되기때문에 제일 위로 가게됨 
function printWithDelay(print, timeout){
  setTimeout(print, timeout);
}
printWithDelay(()=> cosole.log('Async CallBack'),2000); // 제일 마지막에 출력
```

###

### 콜백지옥체험 :scream: 

```javascript
// callback hell example
// 콜백지옥의 예시
  // 아이디가 엘리이고 패스워드가 드림 이거나 아이디가 코더 비밀번호가 아케데미라면 onSucces의 아이디를 불러줌
  // 만약 아니라면 not found를 화면에 출력해라 2초뒤 실행
class UserStorage {
    loginUser(id, password, onSuccess, onError) {
        setTimeout(() => {
            if (
                (id === 'ellie' && password === 'dream') ||
                (id === 'coder' && password === 'academy')
            ) {
                onSuccess(id);
            } else {
                onError(new Error('not found')); // 에러 'not found'
            }
        }, 2000);
    }
    // 사용자가 엘리이면 이름은 엘리고 role 은 어드민인 값을 전달해주고 아니면 not access라고 전달 
 
    getRoles(user, onSuccess, onError) {
        setTimeout(() => {
            if (user === 'ellie') {
                onSuccess({ name: 'ellie', role: 'admin' });
            } else {
                onError(new Error('no access')); // 에러 'not access'
            }
        }, 1000);
    }
}
// 변수는 보통 소문자로 시작한다 동일한이름으로 변수 선언하지 말것 
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);
    }
);
// 콜백함수를 많이쓰면 가독성이 떨어져 이해하기 어렵다. 
// 에러가 발생하거나 디버깅을 할때 너무 힘들어..짐 유지보수도 어려움
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/_/undefined-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.