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

Angular animation not firing on exit

Exploring the world of functional programming in Java can be a rewarding experience, especially

Utilizing Core-TransitionEnd in Polymer: A Beginner's Guide

Create a smooth transition: How to make a hidden button appear after a function finishes in JavaScript

Activate a click on a div element to enable smooth scrolling when using the page down and page up keys

What is the reason for XMLHttpRequest.status being equal to 0 in all browsers except for Internet Explorer?

Using the .show() function will not alter the outcome or trajectory

Using node-fetch version 3.0.0 with jest results in a SyntaxError stating that import statements cannot be used outside a module

Obtaining Relative Values within Every Iteration using jQuery

What is the best way to maintain the correct 'this' context for a function that is outside of the Vue

Formatting decimals with dots in Angular using the decimal pipe

The error message "TextEncoder is not defined with mongodb nodes" is indicating that there is

The AngularJS templates' use of the ternary operator

Can you explain the true meaning behind this specific type definition?

Electron's Express.js server waits for MongoDB to be ready before executing queries

Is there a way to create an interpolated string using a negative lookahead condition?

Find with user-friendly input/label removal function (Ionic 2)

Is there a way to prompt text typing actions to circumvent verification on an application?

An error is displayed when attempting to construct an express-react application

What factors influence Redux in determining when to update the user interface?