質問: document.createElement('div'); ``` これがfor文の中にある場合は正しくdiv要素が5つ生成されますが、 constを先にまとめて宣言すればいいかと思ってfor文の外に移したら、 div要素が1つしか生成されなくなりました。 constは一度宣言すれば、位置に関係なく同じ挙動をするわけではないのでしょうか。 これについて理解を深めたく、ご教示願えればと思います。 よろしくお願いいたします。
回答: こんにちは、xornoteさん 質問拝見しました。 > > これがfor文の中にある場合は正しくdiv要素が5つ生成されますが、constを先にまとめて宣言すればいいかと思ってfor文の外に移したら、div要素が1つしか生成されなくなりました。 > > > 上記条件から、以下のようにコードを書かれていることを前提にお話をしますと、 ``` ``` > > constは一度宣言すれば、位置に関係なく同じ挙動をするわけではないのでしょうか。 > > > `const`は`読み取り専用の名前付き定数を宣言する`を示していて、宣言自体は位置に依存しません。 const しかし、JavaScriptには`ブロックスコープ`という概念があり、この`ブロック`を踏まえた`位置`によっては、挙動が異なります。 ブロック ただ上記のconstとブロックの説明は、JavaScriptの一般的な仕様の話で、divが5つ生成されなくなったという点はconstとは関係ありません。 私が例示したコードのように書かれていたのであれば、実際に`div`が生成されているのは`document.createElement('div')`を呼び出している部分1回だけで、for文の中では、その作ったdivに同じクラス名boxを5回追加していることになります。 加えて、`appendChild`については、すでに同じノード(ここでは、`document.createElement('div')で作ったdiv)が存在している場合は、すでにあるノードを削除して、改めてノードを追加することになるので、5回繰り返しても表示されるdivは1つになります。 appendChild 以上、参考になれば幸いです。