Javascript ES6 - map multiple arrays

Question

Is there a feature in JavaScript 6 that allows to map over multiple arrays ?

Something like a zipper :

 var myFn = function (a, b) { console.log(a, b);}
  var arr1 = ['a', 'b', 'c'];
  var arr2 = [1, 2, 3];

  arr1.map(myFn, arr2); // imaginary syntax.
  // prints :
  // a 1
  // b 2
  // c 3

Rick

This seems to already answer the question: https://mcmap.net/q/99244/-javascript-equivalent-of-python-39-s-zip-function – Ide

Answer 1

Unfortunately, no. What you are looking for is commonly called zip or zipWith. See lodash's implementation for a reference: https://lodash.com/docs#zipWith

Mintz

Aww. I know about lodash, but I can't use it right now. Do you have a source for that missing feature ? (Quite hard I know). – Rick

No I am not asking for code? How do you know that it is missing ? Obviously "missing features" are not represented in the ES6 standard. So do you have a reference to point that it is missing ? – Rick

Gotcha! Here's a link to the reference for Array on MDN. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… It lists all of the methods available on Array.prototype, and you will find that the functionality you are looking for is not present. – Mintz

Thanks, I will accept your answer as soon as I can. – Rick

Answer 2

As the other answer points out, this is commonly known as a zip. It can be implemented as:

let zipped = arr1.map((x, i) => [x, arr2[i]]);

Or as a function, basically:

let zip = (a1, a2) => a1.map((x, i) => [x, a2[i]]); 

Which would let you do:

zip(["a","b","c"], [1,2,3]); // ["a", 1], ["b", 2], ["c", 3]

Charyl

Answer 3

You could also use reduce to get the desired outcome:

var arr1 = ['a', 'b', 'c'];
var arr2 = [1, 2, 3];

arr1.reduce((acc, current, index) => {
   console.log(current, arr2[index])
   return [...acc, current, arr2[index]]
}, [])

// a 1
// b 2
// c 3
// returns ["a", 1, "b", 2, "c", 3]

Saturday

This isn't what the user wanted, they wanted ["a", 1], ["b", 2], ["c", 3], not ["a", 1, "b", 2, "c", 3] right? – Testament

Answer 4

Took reference from @Onaracs 's answer and edited it.

const arr1 = ['a', 'b', 'c']
const arr2 = [1, 2, 3]

const arr3 = arr1.reduce((acc, current, index) => {
  return [...acc, [current, arr2[index]]]
}, [])

console.log(arr3)

Whitewash

Answer 5

Late to the party, but here's my solution.

// Custom zip
const zip = function (N, callback) {
    if (this.length === 0 || N.length === 0 || this.length !== N.length) {
        console.error(`Arrays are of different lengths or empty.`);
        return;
    }
    for (let i = 0; i < this.length; i++) {
        callback(this[i], N[i], i, this, N);
    }
};

// Custom zipMap
const zipMap = function (N, callback) {
    if (this.length === 0 || N.length === 0 || this.length !== N.length) {
        console.error(`Arrays are of different lengths or empty.`);
        return;
    }
    const results = [];
    for (let i = 0; i < this.length; i++) {
        results.push(callback(this[i], N[i], i, this, N));
    }
    return results;
};

// Basic Usage:
const numberArr = [1,2,3];
const stringArr = ['a','b','c'];

// Add zip function to array as a property.
numberArr.zip = zip;
//or
numberArr.zipMap = zipMap;

const callback = function(itemA, itemB, index, ArrayA, ArrayB){
    console.log(itemA + itemB)
}

numberArr.zip(stringArr, callback);

// prints :
// a1
// b2
// c3

You can also add the functions to Array.prototype but I don't recommend doing so, unless it's only going to be used in your code base. This post explains why it should be avoided.

//Use with caution
Object.defineProperty(Array.prototype, 'zip', {
    value: zip
});

Object.defineProperty(Array.prototype, 'zipMap', {
    value: zipMap
});

Finegrained