LouisLam's Blog

[00:05.113]作曲：吉木絵里子・華原大輔
[00:09.199]作詞︰岩里祐穂
[00:10.614]
[00:11.644]黒髪へと触れた　君のその指の名残りが
[00:17.064]私の心に跡をつけてゆくよ
[00:22.438]
[00:22.872]運命さと言えば　誰かがわらうでしょうか
[00:28.275]想いを逆さに映す水鏡
[00:33.197]
[00:33.599]叶わぬ恋は終わりはしない
[00:39.053]終わらぬのならば二人は永遠になる
[00:44.151]
[00:44.714]愛し方はひとつじゃなくて
[00:47.480]それは自分を生き抜くことさ
[00:50.504]夕日さす薄雲の流れるままに
[00:55.602]
[00:55.890]愛は　愛で　愛しかなくて
[00:59.044]この想いこそ真実ならば
[01:01.682]たとえ死んでも君にただ貫くでしょう
[01:08.999]
[01:18.150]輝く日の光　美しき藤の香りに
[01:23.734]哀れな恋の一途な罪深さ
[01:28.880]
[01:29.266]いるはずのない場所で
[01:32.016]それでももしやと思った
[01:34.783]誰にも言えぬ願いの情けなさ
[01:39.801]
[01:40.235]結ばれぬなら失くしもしない
[01:45.593]失くさぬなら愛は何処にも行かない
[01:50.851]
[01:51.287]愛しき人はふたつとなくて
[01:54.068]その面影に包まれながら
[01:57.157]翳りゆく月明かり　照らして欲しい
[02:02.111]
[02:02.480]夢は　夢で　夢さえあれば
[02:05.441]この涙も煌めくだろう
[02:08.224]君のため生きてゆく私はここにいる
[02:15.155]
[02:36.886]生まれ変わっても
[02:39.943]ふたたび君を必ず見つけだすはず
[02:46.875]試された魂は祈りのなかで
[02:52.279]時をこえて結ばれるから
[02:57.073]
[02:57.957]愛し方はひとつじゃなくて
[03:00.626]それは自分を生き抜くことさ
[03:03.699]夕日さす薄雲の流れるままに
[03:08.605]
[03:09.007]愛は　愛で　愛しかなくて
[03:11.709]この想いこそ真実ならば
[03:15.103]たとえ死んでも君にただ貫くでしょう
[03:23.420]

[00:04.362]水樹奈々 
[00:05.543]
[00:07.142]JEWEL
[00:08.995]
[00:10.477]Lyricist：水樹奈々
[00:11.823]Composer：角野寿和・青葉紘季
[00:12.585]
[00:13.273]あなたに伝えたい宝物が沢山ある
[00:21.217]少し聞いてくれるかな？
[00:24.932]
[00:25.322]喜び　悲しみ　生きていく意味
[00:31.119]今の私を彩る　すべてがある
[00:36.988]
[00:37.906]「おかえり」と
[00:39.705]どんな私も包んでくれる
[00:46.056]愛しい場所
[00:48.684]
[00:49.176]夢が浮かぶ透き通る海
[00:54.761]未来へ続く白い橋
[01:00.755]背伸びすれば届きそうな空
[01:06.664]いつの日も変わらずそこにある
[01:12.668]涙がこぼれ落ちる夜も
[01:18.696]踊るような笑顔の朝も
[01:24.717]私が私でいられるよう見守っている
[01:34.562]かけがえのない　ふるさと
[01:39.315]
[01:51.220]煌めく憧れ語り合った
[01:56.675]幼い頃　寄り添うあの時間が
[02:02.625]何度も私を勇気付ける
[02:08.653]諦めない強さ思い出すよ
[02:16.249]どんなに遠く離れても感じる
[02:21.333]大切な記憶
[02:29.312]
[02:51.592]時が経つほど深まる愛情
[03:01.787]あなたと分かち合えたら
[03:08.860]どれほど幸せだろう
[03:15.061]
[03:15.788]夢が浮かぶ透き通る海
[03:21.780]未来へ続く白い橋
[03:27.673]背伸びすれば届きそうな空
[03:33.708]いつの日も変わらずそこにある
[03:42.745]涙がこぼれ落ちる夜も
[03:48.807]踊るような笑顔の朝も
[03:54.718]私が私でいられるよう見守っている
[04:04.684]かけがえのない　ふるさと
[04:09.958]

Here is an example that show you why you have to use async/await especially in many callback functions in a single task. Assume that we have a function which multiply ‘x’ by 2 (200 ms).

output = x * 2

Here is the function with a callback parameter.

function slowDoubleCallback(x, callback) {
    setTimeout(() => {
        callback(x * 2);
    }, 200);
}

If we would like to call it 10 times, in callback version would be like this:

// Callback Hell Version
let callBackAns = 0;
slowDoubleCallback(1, (ans) => {
    callBackAns += ans;
    slowDoubleCallback(2, (ans) => {
        callBackAns += ans;
        slowDoubleCallback(3, (ans) => {
            callBackAns += ans;
            slowDoubleCallback(4, (ans) => {
                callBackAns += ans;
                slowDoubleCallback(5, (ans) => {
                    callBackAns += ans;
                    slowDoubleCallback(6, (ans) => {
                        callBackAns += ans;
                        slowDoubleCallback(7, (ans) => {
                            callBackAns += ans;
                            slowDoubleCallback(8, (ans) => {
                                callBackAns += ans;
                                slowDoubleCallback(9, (ans) => {
                                    callBackAns += ans;
                                    slowDoubleCallback(10, (ans) => {
                                        callBackAns += ans;
                                        console.log("Callback: " + callBackAns);
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

That is horrible, right? Now, make a Promise version. To do this, we need to modify the function to return Promise object:

function slowDouble(x) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(x * 2);
        }, 200);
    });
}

To call it 10 times, would be like this:

// Promise Version
let promiseAns = 0;
slowDouble(1).then((ans) => {
    promiseAns += ans;
    return slowDouble(2);
}).then((ans) => {
    promiseAns += ans;
    return slowDouble(3);
}).then((ans) => {
    promiseAns += ans;
    return slowDouble(4);
}).then((ans) => {
    promiseAns += ans;
    return slowDouble(5);
}).then((ans) => {
    promiseAns += ans;
    return slowDouble(6);
}).then((ans) => {
    promiseAns += ans;
    return slowDouble(7);
}).then((ans) => {
    promiseAns += ans;
    return slowDouble(8);
}).then((ans) => {
    promiseAns += ans;
    return slowDouble(9);
}).then((ans) => {
    promiseAns += ans;
    return slowDouble(10);
}).then((ans) => {
    console.log("Promise: " + (promiseAns + ans));
});

Much better in Promise version? Now in async/await version:

// async / await Version
(async () => {
    let ans = 0;
    ans += await slowDouble(1);
    ans += await slowDouble(2);
    ans += await slowDouble(3);
    ans += await slowDouble(4);
    ans += await slowDouble(5);
    ans += await slowDouble(6);
    ans += await slowDouble(7);
    ans += await slowDouble(8);
    ans += await slowDouble(9);
    ans += await slowDouble(10);
    console.log("async/await: " + ans);
})();

Extremely clear, isn’t it? Not just for readability. You could add for-loop here like structured programming which is difficult in callback/promise (Edit: a redditor pointed out that you can do this with Promise) version.

// async / await Version 2
(async () => {
    let ans = 0;
    for (let i = 1; i <= 10; i++) {
        ans += await slowDouble(i);
    }
    console.log("async/await Version 2: " + ans);
})();

Hope you could feel the benefit of async/await after read the example. Not saying callback is useless, it is still useful in a simple situation. However, it is much clear to write async/await in complicated situation.

Tested on: Node.js 8.10.0

Gist:
https://gist.github.com/louislam/a4ffc57fb9fd4596a0092d1054eabcee

Reddit Thread:
https://www.reddit.com/r/javascript/comments/85j6tu/for_beginners_i_wrote_an_article_to_help_you/

[00:13.812]朝焼けの霧に滲む
[00:18.843]囁く彼方の声
[00:24.027]夢が覚め遠く満ちる
[00:29.207]時の訪れ
[00:32.726]
[00:33.782]手に落ちた露に映る
[00:38.816]そなたの面影
[00:43.963]待てど　いずこ　うつつに
[00:49.812]心の奥で　彷徨う
[00:55.692]
[00:57.590]儚く揺れる
[01:00.900]なでしこ桜
[01:02.986]乱世で生まれた花よ
[01:07.887]紅く染められ
[01:10.491]今、よみがえる
[01:13.152]あの日のにほひ
[01:17.577]夜に開く花ビラ
[01:21.772]
[01:36.366]音もなく　続く道を
[01:41.337]守るべき者のため
[01:46.590]ひとときの　闇を照らす
[01:51.720]月影ぼうし
[01:55.476]
[01:56.290]深き淵に霞める
[02:01.337]そなたの指切り
[02:06.457]忍び　宿る　絆と
[02:12.311]心を盾に貫け
[02:17.308]
[02:17.615]艶やかに舞う
[02:20.191]なでしこ桜
[02:22.857]乱世で朽ちてく花よ
[02:27.862]風にたわむれ
[02:30.441]今、枝垂(しだ)れゆく
[02:33.117]微(かす)かなにほひ
[02:37.571]色は移りにけりな
[02:42.216]
[02:43.561]今ひとつ　またひとつ　零れゆく
[02:46.346]花海に　うずもれて
[02:48.267]永遠に巡り巡る夢見草
[02:52.397]
[03:17.037]儚く揺れる
[03:19.631]なでしこ桜
[03:22.092]乱世で生まれた花よ
[03:27.308]紅く染められ
[03:29.811]今、よみがえる
[03:32.495]あの日のにほひ
[03:36.912]夜に開く花ビラ
[03:40.939]
[03:42.133]忘れることなかれ
[03:47.148]

[00:13.812]朝焼けの霧に滲む
[00:18.843]囁く彼方の声
[00:24.027]夢が覚め遠く満ちる
[00:29.207]時の訪れ
[00:32.726]
[00:33.782]手に落ちた露に映る
[00:38.816]そなたの面影
[00:43.963]待てど　いずこ　うつつに
[00:49.812]心の奥で　彷徨う
[00:55.692]
[00:57.590]儚く揺れる
[01:00.900]なでしこ桜
[01:02.986]乱世で生まれた花よ
[01:07.887]紅く染められ
[01:10.491]今、よみがえる
[01:13.152]あの日のにほひ
[01:17.577]夜に開く花ビラ
[01:21.772]
[01:36.366]音もなく　続く道を
[01:41.337]守るべき者のため
[01:46.590]ひとときの　闇を照らす
[01:51.720]月影ぼうし
[01:55.476]
[01:56.290]深き淵に霞める
[02:01.337]そなたの指切り
[02:06.457]忍び　宿る　絆と
[02:12.311]心を盾に貫け
[02:17.308]
[02:17.615]艶やかに舞う
[02:20.191]なでしこ桜
[02:22.857]乱世で朽ちてく花よ
[02:27.862]風にたわむれ
[02:30.441]今、枝垂(しだ)れゆく
[02:33.117]微(かす)かなにほひ
[02:37.571]色は移りにけりな
[02:42.216]
[02:43.561]今ひとつ　またひとつ　零れゆく
[02:46.346]花海に　うずもれて
[02:48.267]永遠に巡り巡る夢見草
[02:52.397]
[03:17.037]儚く揺れる
[03:19.631]なでしこ桜
[03:22.092]乱世で生まれた花よ
[03:27.308]紅く染められ
[03:29.811]今、よみがえる
[03:32.495]あの日のにほひ
[03:36.912]夜に開く花ビラ
[03:40.939]
[03:42.133]忘れることなかれ
[03:47.148]