JavaScript constの位置(for文の内外)による挙動の違いを理解したいです

大変初歩的なことで恐縮ですが、constとfor文についてわからない部分があります。

目的

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <style>
5            .box { 
6            /*略*/
7            }
8        </style>
9    </head>
10    <body>
11        <script>
12            'use strict';
13            const num = 5;
14            
15            for (let i = 0; i < num; i++) {
16                const div = document.createElement('div');
17                div.classList.add('box');
18            
19                document.body.appendChild(div);
20            }
21        </script>
22    </body>
23</html>

以上のソースコードにある、

const div = document.createElement('div');

これがfor文の中にある場合は正しくdiv要素が5つ生成されますが、
constを先にまとめて宣言すればいいかと思ってfor文の外に移したら、
div要素が1つしか生成されなくなりました。

constは一度宣言すれば、位置に関係なく同じ挙動をするわけではないのでしょうか。
これについて理解を深めたく、ご教示願えればと思います。
よろしくお願いいたします。

kei344

2020/01/04 13:24

変更後のコードも提示してください。

行動規範の内容に同意します

回答3件

ベストアンサー

こんにちは、xornoteさん

質問拝見しました。

これがfor文の中にある場合は正しくdiv要素が5つ生成されますが、constを先にまとめて宣言すればいいかと思ってfor文の外に移したら、div要素が1つしか生成されなくなりました。

上記条件から、以下のようにコードを書かれていることを前提にお話をしますと、

        <script>
            'use strict';
            const num = 5;
            const div = document.createElement('div');

            for (let i = 0; i < num; i++) {
                div.classList.add('box');

                document.body.appendChild(div);
            }
        </script>

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

以上、参考になれば幸いです。

投稿2020/01/04 14:34

編集2020/01/05 03:35

gentamura

総合スコア406

xornote

2020/01/04 15:39

基礎的な部分にもかかわらず丁寧なご説明をいただき、大変ありがたいです。非常に参考になりました。

行動規範の内容に同意します

constを先にまとめて宣言すればいいかと思ってfor文の外に移したら、
div要素が1つしか生成されなくなりました。

JavaScript
1'use strict';
2const num = 5;
3const div = document.createElement('div');
4
5for (let i = 0; i < num; i++) {
6  div.classList.add('box');
7  document.body.appendChild(div);
8}

変数 div によって、一つのdiv要素ノードが生成され、一つのdiv要素ノードに対して、5回、box クラス追加が試行されます。
appendChild は初回はbody要素ノードへの挿入ですが、2回目以降も「同じノード(body要素ノードに挿入されたノード)」が対象なので、移動扱いとなります。
しかし、1回目に挿入した位置と「同じ位置(body要素直下)」に移動しようとするので、移動は発生せず、2回目以降の挿入は何もしていないのと同じとなります。

Re: xornote さん

投稿2020/01/04 14:11