How reduce() higher order function works? - javascript

Below is reduce() function
function reduce(array, combine, start) {
let current = start;
for (let element of array) {
current = combine(current, element);
}
return current;
}
Now this is the question which i am solving
Use the reduce method in combination with the concat method to “flatten” an array of arrays into a single array that has all the elements of the original arrays.
Here is the solution
let arrays = [[1, 2, 3], [4,5], [6]];
console.log(arrays.reduce((flat,current)=> flat.concat(current), []));
// → [1, 2, 3, 4, 5, 6]
Now if i try this
let arrays = [[1, 2, 3], [4, [79],5], [6]];
console.log(arrays.reduce((flat, current) => flat.concat(current), []));
I get this
[1, 2, 3, 4, [79], 5, 6]
It means that this solution can get a flatten array only up to two nested array
But how it works for this
arrays = [[1, 2, 3], [4,5], [6]];
Because in reduce() function i am using
for( let elements of array) which by the way if i use
It works like this
array = [1,4,6,[6,7],7,6,8,6];
for(element of array)
console.log(element);
// 146[6,7]7686
It does not gets the value from nested array
Then how does it for the first solution
And how to write solution which works for any number of nested array i know it will use recursion but how ?

why this function can only flatten array up to one level deep ?
let arrays = [[1, 2, 3], [4, [79],5], [6]];console.log(arrays.reduce((flat, current) => flat.concat(current), []))
Because the reduce function doesn't know if you are trying to concatenate a primitive (a number) or an array. When the reduce functions tries to concatenate two arrays, it produces a single array, but it doesn't know if every element in the array is a number or an array.
Then, as you suggested, you can use recursion:
function flatten(arrayToFlatten){
return arrayToFlatten.reduce((prev, next)=>{
if(!Array.isArray(next)){ // Base case, when you have a number
return prev.concat(next);
} else { // Recursive case, when you have an array
return prev.concat(flatten(next));
}
}, []);
}

You can do:
const arrays = [[1, 2, 3],[4, [79], 5],[6]];
const getFlatten = array => array.reduce((a, c) => a.concat(Array.isArray(c) ? getFlatten(c) : c), []);
const result = getFlatten(arrays);
console.log(result);

Related

map() method mutating the calling Array

map() can't mutate the calling array, instead it returns a new Array with modified values.
But, the following code mutating the original Array, is there any wrong in my understanding?
const arr = [1, 2, 3, 4, 5];
arr.map((num, index, arr1) => {
return arr1[index] = num * 2;
});
console.log(arr); // [2, 4, 6, 8, 10]
Well, you're mutating the original array by passing its reference into the callback function inside map() (arr1) and then manually accessing the indices. It will create a new array if you just return the value from that function.
const arr = [1, 2, 3, 4, 5];
const arr1 = arr.map((num) => {
return num * 2;
});
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr1); // [2, 4, 6, 8, 10]
The third argument to the callback function of map is the
original/source array on which the map is called upon
The arr and arr1 are both same i.e both are referencing on the same array, You can see it by using console.log(arr === arr1). So what ever you operation perform on the arr1, it gonna affect the arr.
const arr = [1, 2, 3, 4, 5];
arr.map((num, index, arr1) => {
console.log(arr1 === arr);
return num * 2;
});
You can just return num * 2 from the callback function. map internally creates a new array and return it. So you don't have to assign it as
arr1[index] = num * 2
You can also make it one-liner as:
arr.map((num, index, arr1) => num * 2)
const arr = [1, 2, 3, 4, 5];
const result = arr.map((num, index, arr1) => {
return num * 2;
});
console.log(arr); // [2, 4, 6, 8, 10]
console.log(result); // [2, 4, 6, 8, 10]
Array.map creates a new array populated with the results of calling a provided function on every element in the calling array.
Here its specifed that you must call or execute a function on every element of calling array.
What is the issue with your code?
You are not actually calling a function, you are instead updating the original array. If you are looking to create a new array by multiplying each node of the element with 2, you should do something like below.
Working Example
const arr = [1, 2, 3, 4, 5];
const newArray = arr.map((nodeFromOriginalArray, indexOfCurrentElement, arrayFromMapCalled) => {
return nodeFromOriginalArray * 2;
});
console.log(arr);
console.log(newArray);
Lets debug the paremeters inside the map function.
Here we have provided three arguments.
First argument nodeFromOriginalArray: The current element being processed in the array. This will be each node from your calling array.
Second argument indexOfCurrentElement: The index of the current element being processed in the array. Which means, the index of current element in calling array.
Third argument arrayFromMapCalled: The array map was called upon. This is the array on which the map function is getting executed. Please note, this is the original array. Updating properties inside this array results in updating your calling array. This is what happened in your case.
You should not modify your original array, which is the third parameter. Instead, you should return your node multipled by 2 inside map and assign this to a new array. Updating the third paramater inside the map function will mutate your calling array.
When calling map on an array, you provide a mapper with three arguments, an item in the array, it's index and the array itself (as you've represented in your snippet).
map takes the value returned by the function mapper as the element at the index in a new array returned by the operation.
const arr = [1,2,3,4,5]
const doubled = arr.map(x => x * 2) // [2,4,6,8, 10]
A over simplified implementation of map (without the index and originalArray params) might look like this. Let's assume that instead of being a method on the array instance, it's a function that takes an array and a mapper function.
I would not recommend re-implementing in production code, there's the native implementation as well as several libraries such as lodash and underscore that implement it.
function map(arr, mapper) {
const result = [];
for (const item of arr) {
const resultItem = mapper(item);
result.push(resultItem);
}
return result;
}
function double(x) {
return x * 2;
}
const doubled = map([1,2,3,4,5,6], double); // [2, 4, 6, 8 ,10, 12]

Remove multiple elements from an array using a function

What I am trying to do is to return the [1, 4] array, however, I do not understand what's the mistake which ends up returning [1]. Any clues? Thank you!
const removeFromArray = function(arr) {
for (let i = arr.length - 1; i >= 0; i--) {
arr.splice(arr[i], 2);
}
return arr;
};
console.log(
removeFromArray([1, 2, 3, 4], 3, 2)
)
It's not exactly clear to me what you want to achieve.
You define a function which only takes one argument:
const removeFromArray = function(arr) {...}
But then you call the function with 3 arguments, an array and two numbers:
removeFromArray([1, 2, 3, 4], 3, 2)
Now your function only takes the first input (the array) and removes all elements instead the first one.
Please consider the syntax: splice(start, deleteCount)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
Maybe this rm() does what you want?
const rm=(arr, ...rem)=>arr.filter(a=>!rem.includes(a));
console.log(rm([1, 2, 3, 4], 3, 2));
It treats the first argument as the array arr that is to be filtered. The following arguments then make up the array rem, containing all the elements that are to be taken out of array arr.
You should consider using the built in filter method for arrays.
removeFromArray = (array, unwanted, otherUnwanted) => {
const filtered = array.filter((number) => {
return number !== unwanted && number !== otherUnwanted
});
return filtered;
};
console.log(removeFromArray[1,2,3,4], 3, 2]
To make the function more scalable for future use the second parameter could be an array.
betterRemoveFromArray = (array, unwantedNumbers) => {
const filtered = array.filter((number) => {
return !unwantedNumbers.includes(number)
});
return filtered;
};
console.log(removeFromArray3([1, 2, 3, 4], [2, 3]));
You need to write a variadic function which means it accepts a variable number of arguments. To represent it, use the rest parameter syntax which allows the function to accept an indefinite number of arguments as an array.
Then, use the filter method on the 1st argument, like so:
const removeFromArray = function(arr, ...theArgs) {
arr = arr.filter(arg => !theArgs.includes(arg));
return arr;
};
console.log(
removeFromArray([1, 2, 3, 4], 3, 2)
)

Return spreaded array in arrow function

Let's assume i have this type of array:
[ [1, 2], [3, 4] ]
What i need to do is to get nested elements on the higher layer, to make it look like:
[1, 2, 3, 4]
I am trying to reach that in functional way, so the code look's like this:
const arr = [ [1, 2], [3, 4] ]
const f = Array.from(arr, x => ...x)
But that comes up with Unexpected token ... error. So what's the way to do it right?
You can use the flat method of Array:
const inp = [ [1, 2], [3, 4] ];
console.log(inp.flat());
In your case, the spread syntax is not an operator that you can use in that way, that's why the error.
As #MarkMeyer correctly pointed out in the comments, the flat is not supported yet by Edge and Internet Explorer. In this case you could go for a solution with reduce:
const inp = [[1,2], [3,4]];
console.log(inp.reduce((acc, val) => acc.concat(...val), []));
Array.from will produce an item for every item in the array passed in. It looks at the length of the passed in iterable and iterates over the indexes starting at 0. So no matter what you do in the callback (assuming it's valid), you're going to get an array of length 2 output if you pass in a two-element array.
reduce() is probably a better option here:
let arr = [ [1, 2], [3, 4] ]
let flat = arr.reduce((arr, item) => [...arr, ...item])
console.log(flat)
You could create an iterator for the array and spread the array by using another generator for nested arrays.
function* flat() {
for (var item of this.slice()) {
if (Array.isArray(item)) {
item[Symbol.iterator] = flat;
yield* item
} else {
yield item;
}
}
}
var array = [[1, 2], [3, 4, [5, 6]]];
array[Symbol.iterator] = flat;
console.log([...array]);

Return an array with all the elements of the passed in array but the last

Instructions:
Write a function called getAllElementsButLast.
Given an array, getAllElementsButLast returns an array with all the elements but the last.
Below is my code that will not pass the requirements for the question. I am not sure why this is not correct even though I am getting back all the elements besides the last.
var arr = [1, 2, 3, 4]
function getAllElementsButLast(array) {
return arr.splice(0, arr.length - 1)
}
getAllElementsButLast(arr) // [1, 2, 3]
I think the reason why it's not accepted is because with splice() you change the input array. And that's not what you want. Instead use slice(). This method doesn't change the input array.
var arr = [1, 2, 3, 4]
function getAllElementsButLast(array) {
var newArr = array.slice(0, array.length - 1);
return newArr;
}
var r = getAllElementsButLast(arr);
console.log(r);
console.log(arr);

Merging the elements of nested arrays into one big array

I'm trying to merge the elements of the array into one big array. But I receive a message saying:
ReferenceError: reduce is not defined
Here is my code:
var arrays = [[1, 2, 3], [4, 5], [6]];
console.log(reduce(arrays, function(arrayOne, arrayTwo){
return arrayOne.concat(arrayTwo);
}, 0));
reduce() is a method of the Array object, so you must use arrays.reduce().
Moreover, since your initial value is set to 0 (the 2nd parameter), you can't use arrayOne.concat on it, since it's not an array, so you must set the initial value to [].
var arrays = [[1, 2, 3], [4, 5], [6]];
console.log(arrays.reduce(function(arrayOne, arrayTwo){
return arrayOne.concat(arrayTwo);
}, []));
Note that calling Array.flat is easier:
var arrays = [[1, 2, 3], [4, 5], [6]];
// If you expect a multi-level nested array, you should increase the depth.
var depth = 1;
console.log(arrays.flat(depth));
reduce() is only defined on Arrays, you cannot call it by itself:
arrays.reduce(
function (a, b) { return a.concat(b); }
);
// Array [ 1, 2, 3, 4, 5, 6 ]

Categories

Resources