forEach() method - looping over an array

Question

I am totally new to coding so my question is probably very basic. I want to loop over the following array and every time the number is divisible by 3 I want to add 100. If not, just print the number. I want to do that with the forEach() method. This is my code but when I want to print it it says "undefined" What am I doing wrong?

 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]; test.forEach(function(num){ if(num %3 === 0){ return num+=100; }else{ return num; } console.log(num); })

Answer 1

Get rid of the return statements:

The return statement ends function execution and specifies a value to be returned to the function caller.

Therefore it will never make it to the console.log line (this is what they call unreachable code since there is no possible path to it):

 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 ]; test.forEach(function(num) { if (num % 3 === 0) { num += 100; } console.log(num); })

I removed the else block because, as pointed out in the comments below, there is no purpose for it.

The approach above is fine if all you want to do is log the result, but if you want to get a new array that has stored all the new values then you should consider using Array.prototype.map 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 updatedValues = test.map(num => num % 3 === 0? num + 100: num); console.log(updatedValues);

Answer 2

The problem is that the return keyword immediately stops the function, so you don't progress further. And since Array#forEach itself doesn't return anything, the keyword is pretty useless. You can just remove it and you'd get the behaviour you want:

 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]; test.forEach(function(num){ if(num %3 === 0){ num+=100; } console.log(num); })

If you instead want to create a new array from the first one using the rules you've described, then you can simply substitute .forEach for the Array#map method:

 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 result = test.map(function(num){ if(num %3 === 0){ return num+=100; }else{ return num; } }) console.log(result);

Answer 3

You should use map instead of forEach here since map will execute the provided function to each array item and return a new array.

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

Source

Just changing your current code, it can be 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 result = test.map(function(num) {
  if (num %3 === 0) {
    return num + 100; 
  } else {
    return num; 
  }
})

Or, you can also improve it further by separating things

const add100IfDividableBy3 = function (num) {
  return (num % 3 === 0) ? num + 100 : num;
}

const 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];

const result = test.map(add100IfDividableBy3)

The function add100IfDividableBy3 uses what is called as a Ternary Operator