[프론트엔드]_JavaScript(es6)_7.callback 함수

공부 자료 : 드림코딩 by 엘리

 

개발 환경 : visual studio code

언어 : js

 

 

1. 콜백함수의 개념

 

자바스크립트 언어는 동기적 언어이다.

순차적 언어이지만 뒤에 서술하여도 hoisting 되는 부분이 먼저 맨 위로 자동적으로 올라가고 그 뒤 순차적을 진행한다.

hoisting의 대표적 예로는 var 변수나 함수선언이 있다.

다음과 같은 setTimeout 이라는 함수가 있다 이 함수는 파라미터로 함수를 받아올수 있다.

자바스크립트는 위에서부터 아래로 읽는다.

 

1을 바로 출력하고

setTimeout 를 만나면 브라우저에게 다음과 같은 function을 해당하는 2000(2초) 뒤에 실행해달라는 메시지를 남기고

그다음줄로 이동하여 3,4를 출력한다.

2초뒤 2를 출력하여

로그는 1 ,3 ,4 ,2 가나오게 된다.

 

이처럼 프로그래머가 작성한 함수를 나중에 불러와서 실행시키는 개념이 콜백함수라고 할 수 있다.

 

좀더 확실하게 동기적 콜백과 비동기적 콜백으로 설명하면 다음과 같다.

여기에서 prinImediately라는 함수는 뭔지는 모르지만 print라는 콜백을 받아서 print를 바로 실행한다.

앞의 function printImmediately 는 hoisting 이 되서 앞전의 2보다 먼저 나오게 된다.

 

printWithDelay함수는 print 라는콜백함수와 얼마나 오랫동안 delay를 할지 2개를 받는다.

해당 함수는 읽어들일때 브라우저에 보내놨다가 실행하게 되서 비동기적으로 실행이 된다.

 

2. 콜백지옥 

콜백함수로만 코드를 짜게되면 굉장히 가시성이 떨어지게 된다.

예시를 보면 다음과 같다

UserStorage 라는 클래스 안에 2가지 함수가 있다.

각각에 맞는 파라미터를 받는데 파라미터는 변수도 있고 함수도 있다. (콜백)

함수가 불리면 우선적으로 setTimeout에 의해 의도한 딜레이를 가지고 실행이 되고

loginUser의 경우는 아이디 패스워드를 받고 성공하면 id를 전달, 실패시 오류를 생성

getRoles의 경우 user의 값을 받고 2가지 함수를 콜백한다.

만약 전달된 id 값이 yoon이라면 onSuccess 가 실행될 것이고 해당 함수에 name과 role를 배열 저장

아니라면 오류를 리턴하면서 no admin이 출력

 

해당 코드를 기준으로 보면

생성자를 만들고

id와 password는 prompt 내장함수로 받아와서 저장한다.

userStroage 안의 loginUser 라는 함수에 id와 password를 전달한다. 

전달하게 되면 맞으면 success 가 반환될것이고 아니면 error를 반환한다.

맞다고 한다면 id 가 리턴되고 그값은 user에 지정된다. 해당 id는 getRolse에 전달이 되고

일치한다면 해당 함수 userWithRole 안의 배열로 저장된 값을 각각 참조하여 출력

아닐 경우 오류를 출력하게 된다.

 

이런식으로 콜백안에 또다른 콜백이 있게 되서 가시성이 매우 떨어지게 된다.

 

소스코드 : 

'use strict';

//javascript 는 동기

// hoisting : var 변수 , function declaration -> 자동적으로 올라간다.

// hoisting이 일어나고 그뒤 순차적으로 실행

console.log('1');

setTimeout(function(){

    console.log('2')

},2000);

 // 지정한 시간이 지나면 콜백함수를 호출한다

 // 파라미터로 함수를 받을 때

 //setTimeout(()=>console.log('2'),2000);

console.log('3');

console.log('4');

//Synchronous callback

function printImmediately(print){

    print();

}

printImmediately(()=>console.log('hi'));

//비동기 콜백

function printWithDelay(print,timeout){

    setTimeout(print,timeout);

}

printWithDelay(()=> console.log('async callback'),3000);

//콜백지옥

class UserStorage{

    //2가지의 api

    loginUser(id,password,onSuccess,onError){

        setTimeout(()=>{

            if(

                (id ==='yoon' && password == 'test') ||

                (id ==='coder' && password == 'test')

            ){

                onSuccess(id);

            }else{

                onError(new Error('not found'));

            }

        },2000) //시간딜래이

    }

    getRoles(user, onSuccess,onError){

        setTimeout(()=>{

            if(user ==='yoon'){

                onSuccess({name: 'yoon',role:'admin'});

            }else{

                onError(new Error('no admin'));

            }

        },1000)

    }

}

//1. 사용자에게 아이디와 패스워드를 입력받는다.

//2. 서버에 로그인

//3. 로그인이 된다면 서버에서 다시 받아와서 역활을 받아오고

//4. 사용자의 로그인

const userStorage = new UserStorage();

const id = prompt('enter user id');

const password = prompt('enter yout password');

//declare function prompt(message?: string, _default?: string): string | null;

userStorage.loginUser(

    id,

    password,

    user =>{

        userStorage.getRoles(

            user,

            userWithRole=>{

                alert(`login Success! user: ${userWithRole.name}, your role : ${userWithRole.role}`)

               

        },error=>{

            console.log(error);

        });

    },

    error=>{

        console.log('error');

    }

    );

콘솔: