JavaScript-ում forEach մեթոդը

JavaScript-ում զանգվածների հետ աշխատելիս մենք հաճախ ենք ունենում անհրաժեշտություն ինչ-որ գործողություն կատարել յուրաքանչյուր տարրի վրա։ Դրա համար առկա է մի շատ հարմար մեթոդ՝ forEach()։ Չնայած իր պարզությանը, այն հզոր գործիք է կոդը կարճ և ընթեռնելի գրելու համար։

Այս հոդվածում մենք ոչ միայն կուսումնասիրենք, թե ինչպես է աշխատում forEach-ը, այլ նաև կստեղծենք մեր սեփական տարբերակը՝ զրոյից։ Այո՛, ոչ մի մոգություն չկա․ ամեն ինչ պարզ ֆունկցիաներ են։

---

Սինտաքս

    array.forEach(function(element, index, array) {
      // գործողություն
    });

Պարամետրեր

• element – ընթացիկ տարրը
• index – ընթացիկ տարրի ինդեքսը
• array – ամբողջ զանգվածը (պարտադիր չէ օգտագործել)

---

Պարզ օրինակ

    const numbers = [1, 2, 3];

    numbers.forEach(function(num) {
      console.log(num);
    });

Արդյունք:

    1
    2
    3

---

Ինչ է վերադարձնում forEach-ը

    const result = [1, 2, 3].forEach(n => console.log(n));
    console.log(result); // undefined

forEach-ը ոչինչ չի վերադարձնում։ Այն պարզապես կատարում է գործողություն յուրաքանչյուր տարրի համար։

---

Տարբերությունը for ցիկլի հետ

    const arr = ['a', 'b', 'c'];

    // for
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i]);
    }
    
    // forEach
    arr.forEach(item => {
      console.log(item);
    });

forEach-ը ավելի ընթեռնելի է, բայց չունի break, continue կամ return հնարավորություն ցիկլից դուրս գալու համար։

---

Հատուկ ուշադրություն

• Չի կարելի դադարեցնել կամ դուրս գալ forEach-ից, ի տարբերություն for-ի:
• Չի սպասում async/await-ին – Եթե ուզում ես ակնկալել, օգտագործիր for...of:

    arr.forEach(async (item) => {
      await doSomething(item); // սա չի սպասի
    });

---

Իրական օրինակ

    const users = [
      { name: 'Anna' },
      { name: 'David' },
      { name: 'Narek' },
    ];
    
    users.forEach(user => {
      console.log(`Բարև, ${user.name}!`);
    });

Արդյունք:

    Բարև, Anna!
    Բարև, David!
    Բարև, Narek!

---

Ինչպես է աշխատում forEach-ը ներքուստ

Երբ դու գրում ես՝

    [1, 2, 3].forEach(fn);

Դա նույնն է ինչ գրել՝

    Array.prototype.forEach.call([1, 2, 3], fn);

Այսինքն՝ forEach-ը ընդամենը մի ֆունկցիա է, որը կապված է Array.prototype-ին։ Մենք էլ կարող ենք մեր տարբերակը գրել։ Ահա թե ինչպես։

---

Գրենք մեր սեփական myForEach ֆունկցիան

    function myForEach(array, callback) {
      for (let i = 0; i < array.length; i++) {
        callback(array[i], i, array);
      }
    }

Օգտագործում ենք այսպես՝

    const numbers = [10, 20, 30];

    myForEach(numbers, function(num, index) {
      console.log(`Ինդեքս ${index}: արժեքը՝ ${num}`);
    });

Արդյունք:

    Ինդեքս 0: արժեքը՝ 10
    Ինդեքս 1: արժեքը՝ 20
    Ինդեքս 2: արժեքը՝ 30

---

Կարող ենք մեր գրած ֆունկցիան ավելացրու զանգվածին

Ուսումնական նպատակներով կարող ենք մեր մեթոդը ավելացնել Array.prototype-ին։

    Array.prototype.myForEach = function(callback) {
      for (let i = 0; i < this.length; i++) {
        callback(this[i], i, this);
      }
    };

Կիրառություն՝

    ['apple', 'banana'].myForEach((item, i) => {
      console.log(`${i}: ${item}`);
    });

Արդյունք:

    0: apple
    1: banana

Պրոդաքշն կոդում խորհուրդ չի տրվում փոփոխել ներկառուցված պրոտոտիպները, քանի որ դա կարող է խնդիրներ առաջացնել։