JS foreach loop to update an array element

Question

I am currently learning JavaScript. And I tried to use a foreach loop to update my elements in an array. But the problem is that the "console.log" result always been the same array as before. Below is the code. Can anyone help tell the problem?

var test = [12, 929, 11, 3, 199, 1000, 7, 1, 24, 37, 4,
    19, 300, 3775, 299, 36, 209, 148, 169, 299,
    6, 109, 20, 58, 139, 59, 3, 1, 139
];

var addNum = function(element,index,array){
    if(element%3===0)
    {
        element += 100;
    }
};

test.forEach(addNum);
console.log(test);

Angel Politis · Accepted Answer · 2018-01-03 21:33:34Z

8

That's because in JavaScript arguments are passed by value, not by reference.
So changing element argument does nothing.

In your case, it is better to use map, like this:

var addNum = function(element,index,array){
    if(element%3===0)
    {
        return element + 100;
    }

    return element
};

const result = test.map(addNum);
console.log(result);

If you really need to use forEach - you could do it like this:

var test = [12, 929, 11, 3, 199, 1000, 7, 1, 24, 37, 4,
    19, 300, 3775, 299, 36, 209, 148, 169, 299,
    6, 109, 20, 58, 139, 59, 3, 1, 139
];

var addNum = function(element,index,array){
    if(element%3===0)
    {
        array[index] += 100;
    }
};

test.forEach(addNum);
console.log(test);

But this is, in my opinion, a bad practice.
forEach is designed for doing something with each element in an array without changing it, but map is specifically designed to create new array running a function on each element of the provided array.
Also see discussion here Is there a difference between foreach and map?

edited Jan 3, 2018 at 21:33

Angel Politis

11.4k15 gold badges51 silver badges67 bronze badges

answered Dec 30, 2017 at 0:22

Bsalex

2,9701 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Deleted Over a year ago

Yeah maybe the one who answer was deleted a second ago

jmowla Over a year ago

The shorter version I could successfully run on FireFox 57 is: const result= test.map(i=>i%3===0? i+100: i);

Angel Politis Over a year ago

Why is using forEach a bad practice exactly? Any reference to back this up?

Angel Politis Over a year ago

Changing the value of the original array is not a side-effect, but the actual purpose of using forEach in that context. The OP never explicitly said they wanted to modify a shallow copy of the original array, instead of the original array itself. Calling it bad practice, because of that is at least misinformation.

Angel Politis Over a year ago

In your opinion; that's the point I'm trying to make. It's not like the programming world, in general, considers the use of forEach bad practice. You have to be careful with your wording when addressing someone new to the language. Besides, update my elements in an array sounds to me like the OP wants to modify the original array.

|

Angel Politis · Accepted Answer · 2018-01-03 21:32:38Z

5

In your addNum function, element is just an argument. When you modify it , you are only modifying the value inside the function, not the actual element in the array.

To modify the array, you need to target the element:

var test = [12, 929, 11, 3, 199, 1000, 7, 1, 24, 37, 4,
    19, 300, 3775, 299, 36, 209, 148, 169, 299,
    6, 109, 20, 58, 139, 59, 3, 1, 139
];

var addNum = function(element, index, array) {
    if (element % 3 === 0) {
        array[index] = element + 100;
    }
};
test.forEach(addNum);
console.log(test);

Note that in JavaScript you can directly pass an anonymous function to forEach():

test.forEach(function(element, index, array) {
    if (element % 3 === 0) {
        array[index] = element + 100;
    }
});

edited Jan 3, 2018 at 21:32

Angel Politis

11.4k15 gold badges51 silver badges67 bronze badges

answered Dec 30, 2017 at 0:24

Sébastien

12.1k12 gold badges60 silver badges83 bronze badges

Collectives™ on Stack Overflow

JS foreach loop to update an array element

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related