Effortlessly apply mapping, filtering, reducing, and more in JavaScript

Question

Effortlessly apply mapping, filtering, reducing, and more in JavaScript

Array#map and Array#filter both create a new array, effectively iterating over the original array each time.

In languages like rust, python, java, c#, etc., such expression chains only iterate once, making them more efficient in certain cases.

While this may not be a concern in most scenarios, there are situations where the performance impact could be significant when using the function api of the Array class.

How do you address this issue? Do you have a preference for a library that enables lazy evaluation for functional expressions?

javascript typescript

Answer 1

Answer №1

To prevent iterating more than once, consider using a loop

const numbers = [1,2,3,4,5,6]
let result = 0;
for(const number of numbers) {
  const square = number * number
  if(square % 2) {
    result += square
  }
}
console.log(result)

Alternatively, utilize the reduce method

const numbers = [1,2,3,4,5,6]
const result = numbers.reduce((acc, number) => {
  const square = number * number
  if(square % 2) {
    return acc + square
  }
  return acc
}, 0)
console.log(result)

It's important to note that array methods may not be purely functional due to their existence on the array object. However, you can approach this concept in a more functional manner

const square = (n) => n * n
const oddNumberOrZero = (n) => n % 2 ? n : 0
const add = (a, b) => a + b
const addOddSquare = (a, b) => add(a, oddNumberOrZero(square(b)))
const reduce = (arr, fn, acc) => arr.reduce(fn,acc)
const numbers = [1,2,3,4,5,6]

const result = reduce(numbers, addOddSquare, 0)

console.log(result)

Remember, fluent interfaces and functional programming are distinct concepts.

Answer 2

To prevent iterating more than once, consider using a loop

const numbers = [1,2,3,4,5,6]
let result = 0;
for(const number of numbers) {
  const square = number * number
  if(square % 2) {
    result += square
  }
}
console.log(result)

Alternatively, utilize the reduce method

const numbers = [1,2,3,4,5,6]
const result = numbers.reduce((acc, number) => {
  const square = number * number
  if(square % 2) {
    return acc + square
  }
  return acc
}, 0)
console.log(result)

It's important to note that array methods may not be purely functional due to their existence on the array object. However, you can approach this concept in a more functional manner

const square = (n) => n * n
const oddNumberOrZero = (n) => n % 2 ? n : 0
const add = (a, b) => a + b
const addOddSquare = (a, b) => add(a, oddNumberOrZero(square(b)))
const reduce = (arr, fn, acc) => arr.reduce(fn,acc)
const numbers = [1,2,3,4,5,6]

const result = reduce(numbers, addOddSquare, 0)

console.log(result)

Remember, fluent interfaces and functional programming are distinct concepts.

Answer 3

Answer №2

If you're interested in handling arrays as a stream, one option is to use the highland library:

import _ from "highland";
_([5, 6, 7, 8])
    .filter(v => v % 2 === 0)
    .map(v => v * 3)
    .toArray((result: number[]) => {
        // The transformed array is stored in the result variable
    });

You can find more information about this feature in the highland documentation:

When working with Arrays, each value will be emitted sequentially as part of the stream.

Answer 4

If you're interested in handling arrays as a stream, one option is to use the highland library:

import _ from "highland";
_([5, 6, 7, 8])
    .filter(v => v % 2 === 0)
    .map(v => v * 3)
    .toArray((result: number[]) => {
        // The transformed array is stored in the result variable
    });

You can find more information about this feature in the highland documentation:

When working with Arrays, each value will be emitted sequentially as part of the stream.

Answer 5

Answer №3

To access the stream-list library, simply install it via npm

https://www.npmjs.com/package/stream-list

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 const myList = new List(numbers);
 myList
  .filter((number) => number % 2 == 0)  // only even numbers
  .map((number) => number * number)  // square
  .map((number) => number/2) // divide by half
  .toList(); // numbers list iterated only once

Answer 6

To access the stream-list library, simply install it via npm

https://www.npmjs.com/package/stream-list

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 const myList = new List(numbers);
 myList
  .filter((number) => number % 2 == 0)  // only even numbers
  .map((number) => number * number)  // square
  .map((number) => number/2) // divide by half
  .toList(); // numbers list iterated only once

Answer 7

Answer №4

Please review the code snippet below to understand how the variable 'v' is being handled.

const numbers = [1,2,3,4,5,6];
const result = numbers.reduce((sum, v) => sum + (v % 2 ? v * v : 0), 0);
console.log(result);

Answer 8

Please review the code snippet below to understand how the variable 'v' is being handled.

const numbers = [1,2,3,4,5,6];
const result = numbers.reduce((sum, v) => sum + (v % 2 ? v * v : 0), 0);
console.log(result);

Effortlessly apply mapping, filtering, reducing, and more in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Retrieve data with a web API

Converting a timestamp from PHP in JSON format to date and time using JavaScript

Should the element be scrolled beyond a fixed-positioned element

Error encountered: EPERM when attempting to rename a directory in Node.js unexpectedly

Updates made in the type declaration files are not being displayed

Adding a specific element to an array using JQuery

Is there a way to prevent the window.on('beforeUnload') event from triggering when using the <a> tag?

Create independent SVG files using Meteor and iron-router

Tips on obtaining the element's ID as a function parameter

Steps to Hide a Material-UI FilledInput

Merge two distinct arrays of objects based on a shared field

Using ajax to call the Google Maps Api is proving to be ineffective

Leverage Custom_Pipe within TS

Invoke a Python function from JavaScript

Angular - Is there a specific type for the @HostListener event that listens for scrolling on the window?

Using the tensorflow library with vite

Guide to interacting with the Li element using JavaScript in Selenium

My goal is to have the "show more" button reveal extra information without having to reload the entire page

Acquire information from a Card using Oracle Apex

Is there a way to trigger a function from a specific div element and showcase the JSON data it retrieves in