関数宣言より関数式か – Blowing in the wind

Javascriptは他の言語に比べると、ちょっと仕様が違うよねと言うところがありますが、それはwebページ向けに使われ始めたと言う歴史的なものがあるだろうと思う。そのためか感覚的にはPHPにも似たところがあるようにも思う。

ところでJavascriptには関数宣言と関数式がありますが、どちらかと言うと関数式の方が使われるらしい。

関数式はwoisting（関数を使う前に宣言しなくとも呼び出せる）が出来ないことによってバグの余地が少なくできる（変数や関数の宣言を先頭でまとめてやることを強制できる）と言うのが理由のようです。

以下の例でも、”move1()”以下のスクリプトを”const move1 =・・・”の前に配置すると実行できませんからwoistingは無効になってます。

例えば、move2()は以下のように関数宣言で記述しても結果は同じだろうけども、関数式の方が変数宣言としての統一性はあるように思えるから。

function move2(){ moveElement( () => {
    const mov_to = document.querySelector(".title2");    
    mov_to.after(src);
})};

function moveElement( callback ) {              // works as a Promise factory
    return () => new Promise( resolve => {
        setTimeout(() => {
            callback();
            resolve(); }, 3000);
        }); 
}

const src = document.querySelector("#source");

const move1 = moveElement( () => {
    const mov_to = document.querySelector(".title2");    
    mov_to.prepend(src);
});

const move2 = moveElement( () => {
    const mov_to = document.querySelector(".title2");    
    mov_to.after(src);
});

const move3 = moveElement( () => {
    const mov_to = document.querySelector(".wrap");    
    mov_to.append(src);
});

const move4 = moveElement( () => {
    const mov_to = document.querySelector("li");    
    mov_to.after(src);
});


move1()
.then( move2 )      // move2 ~ move4 returns Promise instance too
.then( move3 )
.then( move4 );

本来的にマルチプロセスができない、今のJavascriptで非同期処理を実現するためにはPromiseの役割は大きいだろうから、標準で使われるオブジェクト。

admin