【JavaScript】「for」と「forEach」の違い

※notionと同じ内容です

1. 「for」と「forEach」の違い

1-1 ■forEachは配列のみ

forEachが繰り返せるのは配列のみ

1-2 ■forEachは配列の持っている要素の数だけ繰り返す

無限ループエラーになりにくいメリット

1-3 ■forEachはコード記述が効率的

forのように繰り返し条件を書く必要が無い

2. 基本構文

3. コード例

/*-------------------------------------------
画像にマウスオーバーした時のイベント
-------------------------------------------*/
// 1. メインの画像要素を取得します
const mainImage = document.querySelector('.gallery-image img');
// 2. サムネイルの画像要素を取得します
const thumbImages = document.querySelectorAll('.gallery-thumbnails img');

// 3. サムネイルの画像要素のそれぞれに対して、マウスオーバーイベントを追加します
thumbImages.forEach((thumbImage) => {
    thumbImage.addEventListener('mouseover', (event) => {
        // 4. マウスオーバーされたサムネイルの画像のソースをメインの画像に設定します
        mainImage.src = event.target.src;
        
        // 5. コンソールにサムネイルの画像のソースを出力します
        console.log(thumbImage.src);
        
        // 6. メインの画像をフェードインするアニメーションを500ミリ秒で実行します
        mainImage.animate({opacity: [0, 1]}, 500); 
    });
});

3-1 コード解説

複数あるthumbImages という画像をマウスオーバーすると
mainImage という大きな画像にマウスオーバーした画像が反映する

1. メインの画像要素とサムネイルの画像要素をJavaScriptで取得します。

2. サムネイルの画像要素にマウスオーバーイベントを追加するために forEach メソッドを使用します。

3. サムネイルの画像要素がマウスオーバーされた時に実行される関数を定義します。

4. マウスオーバーされたサムネイルの画像のソースをメインの画像のソースに設定します。

5. コンソールにサムネイルの画像のソースを出力します（デバッグ用）。

6. メインの画像をフェードインするアニメーションを実行します。