Пустые значения и запятые, возвращаемые в массиве, если условие не выполнено, функция стрелки JS map

Question

Я написал следующее решение, чтобы получить квадрат только натуральных чисел в массиве

const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
const squareList = (arr) => {
  "use strict";
  const squaredIntegers = arr.map((val) => {

    if (val % 2 == 0 && val > 0) {
      return Math.pow(val, 2);
    }

  })

  return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);

Выходное значение равно 16 ,,,, 1764,36 ,,

Я ожидаю только 16, 1763, 36 и пытаюсь понять, как отображаются запятые, когда условие не выполняется.

Любая помощь с вышеупомянутым ценится

Answer 1

Использовать фильтр перед картой

const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
const squareList = (arr) => {
  "use strict";
  return arr.filter(value => value>0 && value%2==0).map(value => Math.pow(value, 2));
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);

Answer 2

Как говорится в комментарии Кунала, filter будет полезно. Он принимает функцию предиката и возвращает копию массива, содержащего только значения, которые прошли предикат.

Вот пример с некоторой другой незначительной очисткой кода.

const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
const squareList = arr => arr
    .filter(a => !(a % 2) && a > 0)
    .map(a => a ** 2);
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);