console.log vs return: different results (JS)

Question

I don't understand why the code below gives different results in console.log inside the filter function and in the return function:

 function expandedForm(num) { let arr = num.toString().split('').reverse().filter(function(el, ind){ console.log("iter:"+ el * Math.pow(10,ind)); return (el*Math.pow(10,ind)) }); console.log(arr); return arr; } expandedForm(402); 

gives this:

iter:2
iter:0
iter:400
[ '2', '4' ]
=> [ '2', '4' ]

EDIT : Apparently, I haven't been clear enough. To be straightforward, why I get 400 in console.log and 4 in filter? So the question regards more the evaluation of the expression el * Math.pow(10,ind)

Answer 1

num.split('') return one array ['2', '0', '4'] ,

num.split('').filter(function(){ return handler()}) return the elements when hander() is true , then the second selmement is '0', its final result is 0, so it will not keep this element.

Finnally, the reuslt is ['2', '4']

As Array.prototype.filter() defined : (Look into the description on the parameter= callback ).

Syntax

var newArray = arr.filter(callback[, thisArg])

Parameters

callback
Function is a predicate, to test each element of the array. Return true to keep the element, false otherwise, taking three arguments:

    element
        The current element being processed in the array.
    indexOptional
        The index of the current element being processed in the array.
    arrayOptional
        The array filter was called upon.

thisArg Optional
Optional. Value to use as this when executing callback. 

Answer 2

Because filter on array does not manipulate the elements in array

For eg:

const arr = [1, 2, 3];
const newArr = arr.filter(e => {
  const newElement = e * 100;
  return newElement;
}

Here we expect newArray to be [100, 200, 300] but we receive it [1, 2, 3].

Reason - return value from filter is just for true/false concern, it does not actually return the value. This is the reason why you are not getting value for 0.

You can try below code if you want an output [2, 0, 400]

const arr = num.toString().split('').reverse().map((el, ind) => {
  return (el * Math.pow(10,ind));
});

If you want an output as [2, 400],

const arr = num.toString().split('').reverse().map((el, ind) => {
  return (el * Math.pow(10,ind));
}).filter(e => e);

Answer 3

You need to read the documentation of .filter function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

A new array with the elements that pass the test. If no elements pass the test, an empty array will be returned.

It doesn't matter what you return inside from filter function all it cares about if its true of false for each index. As you have 0 in 402 it skips the middle element and returns only elements which are >0