Let's explore the power of combining concat and reduce in Javascript!

Question

Let's explore the power of combining concat and reduce in Javascript!

Currently, I am tackling a task that involves taking an array of arrays and reducing it into a single array containing all the elements from each individual array.

Here is the initial array setup:

var array = [[1,2,3],[4,5,6],[7,8,9]]

I managed to solve the problem using the following code:

var new_array = array.reduce(function(prev,cur){return prev.concat(cur);})

Upon logging console.log(new_array), the output was as expected:

[1, 2, 3, 4, 5, 6, 7, 8, 9]

However, when I attempted to modify the function like this:

var new_array = array.reduce(function(prev,cur){return prev.concat(cur);},0)

An error occurred:

"TypeError: prev.concat is not a function

This makes me wonder why this error is being triggered.

javascript arrays

Answer 1

Answer №1

I'm still trying to fully understand how the reduce method works

Here is an explanation of how it works:

Array.prototype.reduce = function(callback, startValue){
    var initialized = arguments.length > 1,
        accumulatedValue = startValue;

    for(var i=0; i<this.length; ++i){
        if(i in this){
            if(initialized){
                accumulatedValue = callback(accumulatedValue, this[i], i, this);
            }else{
                initialized = true;
                accumulatedValue = this[i];
            }
        }
    }

    if(!initialized)
        throw new TypeError("reduce of empty array with no initial value");
    return accumulatedValue;
}

Your failing example is similar to this:

var array = [[1,2,3],[4,5,6],[7,8,9]];

var tmp = 0;
// This is where it goes wrong.
// Because `tmp` is 0 and 0 does not have a `concat` method
tmp = tmp.concat(array[0]);
tmp = tmp.concat(array[1]);
tmp = tmp.concat(array[2]);

var new_array = tmp;

To fix it, replace the 0 with an Array, like [ 0 ]

Answer 2

I'm still trying to fully understand how the reduce method works

Here is an explanation of how it works:

Array.prototype.reduce = function(callback, startValue){
    var initialized = arguments.length > 1,
        accumulatedValue = startValue;

    for(var i=0; i<this.length; ++i){
        if(i in this){
            if(initialized){
                accumulatedValue = callback(accumulatedValue, this[i], i, this);
            }else{
                initialized = true;
                accumulatedValue = this[i];
            }
        }
    }

    if(!initialized)
        throw new TypeError("reduce of empty array with no initial value");
    return accumulatedValue;
}

Your failing example is similar to this:

var array = [[1,2,3],[4,5,6],[7,8,9]];

var tmp = 0;
// This is where it goes wrong.
// Because `tmp` is 0 and 0 does not have a `concat` method
tmp = tmp.concat(array[0]);
tmp = tmp.concat(array[1]);
tmp = tmp.concat(array[2]);

var new_array = tmp;

To fix it, replace the 0 with an Array, like [ 0 ]

Let's explore the power of combining concat and reduce in Javascript!

Answer №1

Similar questions

Customize the href option with Fancybox plugin in real-time

Tips for creating different CSS print layouts within a single-page application

Create a custom JSON object to use in an AJAX call for a REST request

Ensuring Node.js backend JavaScript waits for completion of my bash script before proceeding

I am unable to append a new attribute to an object

What is the best way to identify the n-th parent element using JavaScript only?

Iterate through JSON and dynamically populate data

Experience the entire website with the assistance of cookies, javascript, and a mobile redirect feature

Translate data from two "contact form 7" date fields into JavaScript/jQuery to display the date range between them

Angular detects when a user scrolls on a webpage

What steps can I take to resolve a Sass loader's ValidationError issue?

After submitting a form, the page will redirect to another page while passing variables

What's causing ng-show to malfunction in IE11 on AngularJS?

Using JQuery to implement a date and time picker requires setting the default time based on the server's PHP settings

Observer function simulated by SinonStub

What is the best way to test an Angular application using John Papa's style, as well as Karma and Jasmine, all while

Tips for sending an array as a querystring with a GET request using jQuery AJAX

Create a visual representation using a push button

What could be the reason for the malfunction of this AngularJS data binding feature?

Angular15: How can we properly provide support for legacy browsers?