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) ;
})

Welcome to SO! Since you are new to coding, just wanted to make a quick summary of the good answers you already have: if your intention is just print out the numbers, forEach works just fine, no need to use map. If you want to transform the numbers and use the transformed numbers somewhere else, map is more appropriate. You may also want to search for "immutability" to understand why map may be a better solution. — Bruno Monteiro
– Bruno Monteiro, Commented Nov 20, 2019 at 22:58

Tom O. · Accepted Answer · 2019-11-20 23:05:23Z

4

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);

edited Nov 20, 2019 at 23:05

answered Nov 20, 2019 at 22:48

Tom O.

5,9813 gold badges24 silver badges36 bronze badges

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

2 Comments

Bruno Monteiro Over a year ago

You can also remove that else statement there, since it doesn't do anything with num ;)

Code-Apprentice Over a year ago

Note that this modifies the local variable num. It does not modify the array.

VLAZ · Accepted Answer · 2019-11-20 22:49:40Z

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);

Leite · Accepted Answer · 2019-11-20 22:59:10Z

0

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

edited Nov 20, 2019 at 22:59

answered Nov 20, 2019 at 22:52

Leite

9946 silver badges16 bronze badges

2 Comments

Bruno Monteiro Over a year ago

I agree that map is probably what OP will need in a real case scenario, but the question specifies the need to print the numbers, which is missing in your answer, thus modifying the expected result. Maybe you could edit the answer to explain why use map over forEach and how to print the numbers :)

Leite Over a year ago

I upvoted Tom O answer as it's more complete, and better takes into account the actual issue the OP was having.

Collectives™ on Stack Overflow

forEach() method - looping over an array

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related