JavaScript: Different ways to utilize the reduce method

Question

JavaScript: Different ways to utilize the reduce method

Creating an array for search purposes based on a string like BBC Sport, the desired output array will be:

[ 'BBC', 'BB', 'B', 'Sport', 'Spor', 'Spo', 'Sp', 'S' ]

An implementation using 2 for loops is as follows:

const s     = "BBC sport";
const tags  = [];
const words = s.split(" ");

for (let word of words) {
  const wl = word.length;
  for (let i = 0; i < wl; i++) {
    tags.push(word.substr(0, wl - i));
  }
}

// tags now equals [ 'BBC', 'BB', 'B', 'Sport', 'Spor', 'Spo', 'Sp', 'S' ]

However, there is a desire to achieve the same outcome using the reduce function instead of for loops.

If you were to solve this problem, how would you do it?

javascript algorithm reduce

Answer 1

Answer №1

I personally think the way you wrote the code is best - using two loops makes it readable, maintainable and efficient.

However, if you prefer a one-liner approach, you could try this:

s.split(" ").flatMap(word => Array.from(word, (_, i) => word.slice(0, i + 1)))

Answer 2

I personally think the way you wrote the code is best - using two loops makes it readable, maintainable and efficient.

However, if you prefer a one-liner approach, you could try this:

s.split(" ").flatMap(word => Array.from(word, (_, i) => word.slice(0, i + 1)))

Answer 3

Answer №2

Here is a unique approach utilizing function generators for the solution (my preferred method) and another using reduce as per your request (not my personal choice), taking an input string and a specified separator.

In this scenario, the separator used is a blank space by default, but it can be tailored to suit different needs.

The provided code snippet will loop through the input string, extract relevant segments based on occurrences, and capitalize them (as it seems you prefer).

This solution offers flexibility while remaining easy to modify by incorporating extra parameters into the toTagList function or enabling further adjustments since it's iterable.

const s = "BBC sport";

function* toTagList(input, separator) {
  // split by the separator.
  for (const block of input.split(separator)) {
    // For each string block, split the whole word.
    var splitted = block.split('');
    // slice the input array by taking from the first character to the last one, then decrease to get only the previous portions of said word.
    for (var i = splitted.length; i > 0; i--) {
      // Finally, yield the capitalized string.
      yield capitalize(splitted.slice(0, i).join(''));
    }
  }
}
// this just capitalizes the string.
function capitalize(input) {
  return input.charAt(0).toUpperCase() + input.substring(1, input.length);
}

console.log([...toTagList(s, ' ')]);

If you are set on using reduce:

const s = "BBC sport";

const tags = s.split(' ').reduce((acc, next) => {
  return acc.push(...Array.from({length: next.length}).map((_, i) => {
    return (next.split('').slice(0, i + 1)).join('')
  })), acc;
}, [])

console.log(tags);

Answer 4

Here is a unique approach utilizing function generators for the solution (my preferred method) and another using reduce as per your request (not my personal choice), taking an input string and a specified separator.

In this scenario, the separator used is a blank space by default, but it can be tailored to suit different needs.

The provided code snippet will loop through the input string, extract relevant segments based on occurrences, and capitalize them (as it seems you prefer).

This solution offers flexibility while remaining easy to modify by incorporating extra parameters into the toTagList function or enabling further adjustments since it's iterable.

const s = "BBC sport";

function* toTagList(input, separator) {
  // split by the separator.
  for (const block of input.split(separator)) {
    // For each string block, split the whole word.
    var splitted = block.split('');
    // slice the input array by taking from the first character to the last one, then decrease to get only the previous portions of said word.
    for (var i = splitted.length; i > 0; i--) {
      // Finally, yield the capitalized string.
      yield capitalize(splitted.slice(0, i).join(''));
    }
  }
}
// this just capitalizes the string.
function capitalize(input) {
  return input.charAt(0).toUpperCase() + input.substring(1, input.length);
}

console.log([...toTagList(s, ' ')]);

If you are set on using reduce:

const s = "BBC sport";

const tags = s.split(' ').reduce((acc, next) => {
  return acc.push(...Array.from({length: next.length}).map((_, i) => {
    return (next.split('').slice(0, i + 1)).join('')
  })), acc;
}, [])

console.log(tags);

JavaScript: Different ways to utilize the reduce method

Answer №1

Answer №2

Similar questions

What is the proper method for running a script using the Selenium JavascriptExecutor?

What is the best way to dynamically insert an object into a field name in react-final-form?

Having difficulty naming the request while using ajax to send data to a local server

Steps for dynamically loading the content of a Bootstrap 4 Modal

Tacking the progress bar onto an array of $.ajax() calls within a Promise.all

Utilizing request parameters within middleware that employs the 'createHandler' function from the 'graphql-http' package

Error 16 occurred when attempting to ngUpgrade two different versions of Highcharts

What methods can be used to defer the visibility of a block in HTML?

Having trouble connecting to the Brewery API, could use some guidance from the experts (Novice)

Subcomponent in React is not rendering as expected

Maintaining the user interface state while utilizing $resources in AngularJS

Examples of Javascript closures in action with a for loop

Encountering an issue while trying to create a user in Firebase

Implementing event handling with .On() in Jquery following .Off()

Refreshing a React form

How can we guide the user to a different page when a particular result is retrieved by AJAX?

Activate the counter as soon as the error message appears

Using the for-each loop in Express.js with Node

What is the best way to set up the login page and logged-in homepage using Node, Express, and Passport with the "/" route?

The route is displaying the variable as 'undefined' when I attempt to access it