자바스크립트 어려워요.

제이스 쓰고 있어요?나는 최근에 쓰기 시작했다.
지금까지 다른 언어로 쓴 적이 없기 때문에 매일 호출 함수에 의해 빙글빙글 돈다.
나는 내가 이해할 수 있는 범위의 js의 비동기 처리와 호출 함수라는 것을 간단하고 쉽게 전달할 수 있다면 좋겠다고 생각한다.
초보자를 대상으로 하다.전반적으로 노드다.내 생각에는 js를 향한 것 같다.

비동기 처리란 무엇입니까?

지금부터 당연한 말을 하겠다.
비동기 처리 프로그래밍 언어(PHP, Java, Python 등)가 아니라면 아래 그림과 같은 흐름도에 따라 위에서 아래로 실행되겠죠?

단, 비동기 처리된 js의 경우 뒷면에서 시간을 들여 처리한 다음에 다음 처리를 진행한다.
A, B, C의 처리 결과를 기다리지 않으면 프로그램은 끝까지 진행될 것이다.

아주 간단하게 말하면 이것은 비동기적인 처리이다.
장점은 집행이 빠르다는 것이다.

호출 함수는 무엇입니까?

호출 함수는 방금 전의 시간이 필요한 처리를 가리킨다.
코드로 쓰면 이런 느낌이야.

hoge(function(){
    // 何らかの処理
    .
    .
    .
})

이런 상황에서 hoge라는 방법의 매개 변수에 함수가 쓰여 있다.
호출 함수는 매개 변수에 쓰는 함수입니다.
함수에 적힌 함수의 결과를 다음 처리합니다.

무슨 문제라도 있습니까?

다음 코드를 고려하십시오.

// hogeというテーブルの内容を全て取得する簡単なコードです。データベースの接続の部分は省略しました。
sql = 'select * from hoge'
connection.query(sql,function(error,query_results){
    console.log(query_results);
});

다음은 실패의 예다.
일반적인 상황에서 데이터베이스에 조회를 던지는 처리를 분리하고 싶죠?
하지만 js의 상황은 그다지 좋지 않다.
겸사겸사 말씀드리지만, 이것은 제가 실제로 쓴 것입니다. 왜 생각한 코드입니까?

// fugaという関数に分離しました
function fuga(sql){
    connection.query(sql,function(error,query_results){
        return query_results;
    });
}

sql = 'select * from hoge'
var result = fuga(sql);

console.log(result);

이 코드에 대해 호출 함수는 반환 함수이지만 함수 중의 함수이기 때문에 반환 위치가 잘 모르겠다.
호출 함수는 기본적으로 되돌릴 수 없습니다. Gebobobo.
이렇게 되면 코드를 분리할 수 없으니 힘껏 분리해야 한다.

function fuga(sql){
    connection.query(sql,function(error,query_results){
        // グローバル変数fooの中に結果を入れます
        foo = query_results
    });
}

sql = 'select * from wp_users'
// 適当にfooというグローバル変数を用意します。
var foo = '';
fuga(sql);

console.log(foo);

이거 콘솔.log의 결과는foo가 비어있음
foo = query_results 전에 console.log(foo);검색 결과를 기다리기 전에 끝까지 실행하기 때문입니다.
따라서foo 변수의 실행은 비어 있습니다.
함수를 모듈화하는 언어는,,
어떻게든 foo에 조회의 실행 결과를 입력하고 싶다면 set Timeout 등 조회의 실행을 기다리면 순조롭게 진행될 수 있습니다.
이게 뭐야.
그래서 js에서 아래처럼 이렇게 쓰는 게 제일 빨라요.

function fuga(sql){
    connection.query('select * from wp_users',function(error,results){
    // モジュール化などせず続きの処理を延々とコールバック関数内に書く
    .
    .
    .
    });
}

지옥의 진면목을 외치다

우리 아까의 흐름도를 다시 한번 고려해 봅시다.
입력과 출력을 고려해 보세요.

이것은 일반적인 프로그래밍 언어의 상황이다.모든 입력과 출력은 앞뒤의 처리에 달려 있다.
이것은 매우 이해하기 쉽다고 말할 수 있겠지, 이것은 당연한 것이다.
다음에 js의 상황을 고려해 봅시다.
A, B, C의 처리는 호출 함수로 한다.
여기서 주의해야 할 것은 호출 함수는 처리 내부에 출력이 있고 호출 함수에서 처리 결과를 기다리지 않으면 다음 처리를 입력할 수 없다는 것이다.

그림에서 보듯이 잠입 처리 내부를 처리한다.
이 너무 깊은 상태를 회호지옥이라고 부른다.

Promise를 사용한 동기화 처리

요즘은 호출지옥에서 벗어나기 위해 프로미스라는 걸 쓰는 것 같아.
자세한 사용법은 많은 분들이 소개해 주시는데 저쪽을 보시는 게 좋을 것 같아요.
여기서 Promise의 대략적인 인상으로 소개합니다.

간단하게 말하자면, Promise는 js의 동기화 처리를 해 줄 것이다.
Promise는 각각의 처리를 수행하고 처리가 끝날 때까지 기다립니다.
그러나 이 그림만 보면 프로미스는 js의 비동기 처리의 장점이 없어진 것 같다.
아래와 같은 그림을 고려하다.

이 그림에서 A를 확대 처리하고 내부를 고려하세요.
간단하게 말하면 동기화해야 하는 부분에서Promise를 사용하고 이외에 비동기화를 통해 js를 사용하는 장점이 있다.

결론

귀찮다
누가 js 모듈화의 좋은 방법을 알려줄 수 있습니까?