how to obtain values from forEach javascript - javascript

I've always used array.forEach(element=>console.log(element) to see what I am obtaining from array; but now I want to obtain the values themselves.
Suppose I have the following code:
array=['1','2','3','4']
array.forEach(x=>x)//undefined
What I want to obtain is :
'1'
'2'
'3'
'4'
is this the correct approach or there is some other way I am not seeing right now?

array.forEach() presents each value to your callback one at a time. That's how it works and to use that, you put code into the callback that does something with the values.
As an example:
let array = [1,2,3,4];
let product = 1;
array.forEach(x => {
console.log(x);
// update the product variable
product *= x;
});
console.log(product);
If you're trying to do array.forEach(x, ...) in the console, then you see undefined because array.forEach() has no return value (and thus undefined).
Other array functions such a .map(), .filter(), .reduce(), etc... all have return values, and you can pick one of them depending upon what type of operation you're trying to do on the array.
For example, the previous code block, could have been written with .reduce()
let array = [1,2,3,4];
let product = array.reduce((total, x) => {
console.log(x);
return total * x;
}, 1);
console.log(product);
And, here's an example of .map() that returns a new array with every value squared:
let array = [1,2,3,4];
let product = array.map(x => {
return x ** 2;
}, 1);
console.log(product);

Related

How would I make 'arr' a function in order to use 'arr.sort' when not setting a pre-defined array?

I want to create a function to find the lowest value within a set of numbers, but I do not wish to use the Math.min(); method. Below is my code I have constructed:
function min(arr) {
var lowest = arr.sort((x, y) => x - y);
return lowest[0];
}
but 'arr.sort' is not a function, as it has not been defined for obvious reasons: I want to be able to input any array into the 'min' function.
I tried creating a JavaScript function for finding the lowest value in an array of numbers, expecting to have a function that would accept any array and would output the lowest value in that array.
I want to create a function to find the lowest value within a set of numbersfunction to find the lowest value within a set of numbers
Just pop the sorted array
That is assuming you are calling your function with an actual array and you do not mind that array is modified
const min = arr => arr.sort((a, b) => b - a).pop();
console.log(min([7,6,8,99,100]))
console.log(min([1000,999,998,997]))
const arr1 = [1000,999,998,997]
console.log("---------------")
console.log(arr1)
console.log(min(arr1))
console.log(arr1)
function min(arr) {
arr.sort( (a, b) => a - b );
return arr[0]
}
Pay attention, though, that sort() overwrites the original array.

Creating an array of functions returning their index without loops

I would like to create a function returning an array of functions. When any function from the array is called, the result must be the index of this function in the array. The task and challenge are to create this function without for-loops. I was moving this way, however, the code did not work as I expected:
const createArrayOfFunctions = number => {
const functionsArray = new Array(number).fill();
return functionsArray.map(element => function() {
return functionsArray.indexOf(element);
});
};
I expected:
const testArray = createArrayOfFunctions(7);
testArray[2](); // 2;
Is there any way to have the goal achieved without using for-loops. I need it for a study project.
You can achieve your goal by using Array.from like this:
const createArrayOfFunctions = length => Array.from({length}, (v, i)=> ()=> i);
const arrayOfFunctions = createArrayOfFunctions(10);
console.log(arrayOfFunctions[0]())
console.log(arrayOfFunctions[9]()) // last item would be 9
First, you use new Array(number).fill(), which makes an array of undefined. So, when you call testArray(2)(), your element inside your return function is also undefined. then you tried to find the index of undefined, it returns 0. The reason it returns 0 is because your functionsArray is an array of 7 undefined in your case, then Array.indexOf will return the first match, and since functionArray[0] is undefined, that's why it always return 0 no matter which function you call within your functionArray. Make sense?
I made a little change of your code, try this. It should work as you would expect. I didn't use Array.indexOf or any other array methods just because you only want the index, why not consider using the index instead?
If you insist that you want to use Array.indexOf to solve your problem, you will have to use a forloop inside createArrayOfFunctions to create your functionsArray with different elements(e.g. 0,1,2,3,4...7), because new Array(number).fill() creates array of undefined, and even if you do Array(number).fill(number), you still just create an array of 7s in your case, so that is exactly the same thing as an array of 7 undefined in your case. So your method won't work. Since you mentioned no forloop, that's why I provided the method using index as described above.
Also I would recommend you to add some logic or create a separate function to make sure no one can call the testArray out of bound, for example, if you create 7 array functions, you don't want people to be able to call testArray[8]. I hope this helps. let me know if you have any confusion.
const createArrayOfFunctions = (number) => {
functionsArray = new Array(number).fill(0);
return functionsArray.map((element, index) => {
return () => {
return index;
};
});
};
const testArray = createArrayOfFunctions(7);
console.log(testArray[2]()); // 2;
console.log(testArray[3]()); // 2;
console.log(testArray[1]()); // 2;
First of all, I suggest you change new Array().fill() to just [].
We are able to recreate a for loop using a while loop.
let x = 0
while (x < 5) {
console.log(`five times`)
x++
}
Therefore, I suggest you do this:
function createarray() {
let arrayfunc = []
let i = 0
while(i<10) {arrayfunc.push(new Function(‘console.log(\‘ + i + \‘)\‘))}
return arrayfunc
}
Assign default value '0' to Array.fill() method.
const createArrayOfFunctions = (len) => {
const functionsArray = Array(len).fill(0);
return functionsArray.map((ele, index) => () => index );
};
const testArray = createArrayOfFunctions(7);
console.log(testArray[0]());
console.log(testArray[6]());

Returning from Array.prototype.map() is not consistent

I'm trying to get this output ['1', '12', '123'] from:
getSubstrings('123');
function getSubstrings(string) {
let array = string.split('');
let subarray = [];
return array.map(element => {
subarray.push(element);
console.log(subarray) //this gets me ['1'], then ['1','2'] ...
return subarray; //but this is not returning the same as in console.log(subarray)
});
}
I know I can get the result I want by adding .join('') to the end of subarray. My question is not about how to get ['1', '12', '123'] But, why returning the same subarray as the one being outputted on the console would result in [[1','2','3'], ['1','2','3'], ['1','2','3']] instead of [[1], [1,2], [1,2,3]] weird enough, the output from the console.log(subarray) is not the same as the returning subarray populated in the .map() Am I missing something here? Thanks in advance.
The problem is that subarray is changing in each map 'iteration', because you are not creating a new subarray, just passing the same reference to return. It will change all the three cases.
First, it returns [1], but then it returns [1,2] and change the first to [1,2]. Same happens with last element. Finally, you'd have an array made by three copies of the same reference (subarray).
Fix it by the spread operator
function getSubstrings(string) {
let array = string.split('');
let subarray = [];
return array.map(element => {
subarray.push(element);
return [...subarray].join(""); // join to get the desired output
});
}
console.log(getSubstrings("123"))
Notice that the subarray is being modify in every iteration and is not creating a new subarray. so what it actually happening is that you're passing the exact same reference to return, hence resulting in changing all results.
I suggest to refactor this to use forEach, something like this:
const arr = getSubstrings('123');
function getSubstrings(string) {
let array = string.split('');
let mainArray = [];
let cur = '';
array.forEach(x => {
cur += x;
mainArray.push(cur);
})
return mainArray;
}
console.log(arr)

Is there a way to check whether the argument passed into a function is an array in javascript?

const validateCred = arr => {
let checkableArr = arr.pop();
for (let i = arr.length - 1; i >= 0; i--) {
arr[i]
checkableArr.push(arr[i])
}
}
When i run the code, I get an error saying that .push() is not a function that I can use on checkableArr. this is because checkableArr isn't an array due to it being a variation of arr (the argument that will be passed when the function is called), which the function isn't sure is an array, is there any way to check that the argument passed into the function is an array?
EDIT:
The thing I was looking for is called isArray(), a method that returns a boolean indicating if the item passed into it is an array or no. Thanks to #David for showing me this tool, along with a bunch of helpful information that helped a lot with writing my program
You're getting that error, because you haven't made sure that the last item of the passed array (arr) is an array itself, but your function's logic requires it to be an array.
There are various ways to solve this, some of them have already been outlined by others (#hungerstar).
Check the last element of arr
One attempt is to ensure that the last element/item inside arr is an array and bail out if it isn't.
const validateCred = arr => {
let lastItem = arr.pop();
if (!Array.isArray(lastItem)) {
throw new Error('validateCred :: Last item of passed array must be an array itself');
}
// ... rest of your code ...
}
Although that does not solve the root cause, it ensures you get a decent and descriptive message about what went wrong. It's possible to improve that by defining a fallback array in case the last item isn't an array itself. Something like this:
const validateCred = arr => {
let lastItem = arr.pop();
let checkableArr = Array.isArray(lastItem) ? lastItem : [];
// ... rest of your code ...
}
One thing to note: If the last item may be an array with a value inside, you have to copy that value into the new array!
const validateCred = arr => {
let lastItem = arr.pop();
let checkableArr = Array.isArray(lastItem) ? lastItem : [lastItem]; // <--
// ... rest of your code ...
}
HINT: The following answer is based on guessing. The name validateCred lets me assume you use it to validate credentials. However, that's just guessing because all the provided code does is taking the last item and then pushing the rest of the contents of arr reversely into it (= reversing and flattening)
Reversing and flattening
If all you want to do with validateCred is reversing and flattening (and you only target supporting environments), you can easily do that with a one-liner:
// impure version
const validateCred = arr => arr.reverse().flat();
// pure version
const validateCred = arr => arr.flat().reverse();
To support older environments as well, you can use .reduce and .concat instead of .flat:
// impure version
const validateCred = arr => arr.reverse().reduce((acc, x) => acc.concat(x), []);
// pure version
const validateCred = arr => arr.reduce((acc, x) => acc.concat(x), []).reverse();
Yes, we pass an array as an argument using call/apply method. In your code when you are using arr.pop() it gets converted to number/string depending upon what type of array you specified, I specified below integer value so checkableArr is now integer so because of this you are getting an error.
Corrected code is here. Just replace in your code like:
let checkableArr = arr; //arr.pop();

Removing elements with Array.map in JavaScript

I would like to filter an array of items by using the map() function. Here is a code snippet:
var filteredItems = items.map(function(item)
{
if( ...some condition... )
{
return item;
}
});
The problem is that filtered out items still uses space in the array and I would like to completely wipe them out.
Any idea?
EDIT: Thanks, I forgot about filter(), what I wanted is actually a filter() then a map().
EDIT2: Thanks for pointing that map() and filter() are not implemented in all browsers, although my specific code was not intended to run in a browser.
You should use the filter method rather than map unless you want to mutate the items in the array, in addition to filtering.
eg.
var filteredItems = items.filter(function(item)
{
return ...some condition...;
});
[Edit: Of course you could always do sourceArray.filter(...).map(...) to both filter and mutate]
Inspired by writing this answer, I ended up later expanding and writing a blog post going over this in careful detail. I recommend checking that out if you want to develop a deeper understanding of how to think about this problem--I try to explain it piece by piece, and also give a JSperf comparison at the end, going over speed considerations.
That said, **The tl;dr is this:
To accomplish what you're asking for (filtering and mapping within one function call), you would use Array.reduce()**.
However, the more readable and (less importantly) usually significantly faster2 approach is to just use filter and map chained together:
[1,2,3].filter(num => num > 2).map(num => num * 2)
What follows is a description of how Array.reduce() works, and how it can be used to accomplish filter and map in one iteration. Again, if this is too condensed, I highly recommend seeing the blog post linked above, which is a much more friendly intro with clear examples and progression.
You give reduce an argument that is a (usually anonymous) function.
That anonymous function takes two parameters--one (like the anonymous functions passed in to map/filter/forEach) is the iteratee to be operated on. There is another argument for the anonymous function passed to reduce, however, that those functions do not accept, and that is the value that will be passed along between function calls, often referred to as the memo.
Note that while Array.filter() takes only one argument (a function), Array.reduce() also takes an important (though optional) second argument: an initial value for 'memo' that will be passed into that anonymous function as its first argument, and subsequently can be mutated and passed along between function calls. (If it is not supplied, then 'memo' in the first anonymous function call will by default be the first iteratee, and the 'iteratee' argument will actually be the second value in the array)
In our case, we'll pass in an empty array to start, and then choose whether to inject our iteratee into our array or not based on our function--this is the filtering process.
Finally, we'll return our 'array in progress' on each anonymous function call, and reduce will take that return value and pass it as an argument (called memo) to its next function call.
This allows filter and map to happen in one iteration, cutting down our number of required iterations in half--just doing twice as much work each iteration, though, so nothing is really saved other than function calls, which are not so expensive in javascript.
For a more complete explanation, refer to MDN docs (or to my post referenced at the beginning of this answer).
Basic example of a Reduce call:
let array = [1,2,3];
const initialMemo = [];
array = array.reduce((memo, iteratee) => {
// if condition is our filter
if (iteratee > 1) {
// what happens inside the filter is the map
memo.push(iteratee * 2);
}
// this return value will be passed in as the 'memo' argument
// to the next call of this function, and this function will have
// every element passed into it at some point.
return memo;
}, initialMemo)
console.log(array) // [4,6], equivalent to [(2 * 2), (3 * 2)]
more succinct version:
[1,2,3].reduce((memo, value) => value > 1 ? memo.concat(value * 2) : memo, [])
Notice that the first iteratee was not greater than one, and so was filtered. Also note the initialMemo, named just to make its existence clear and draw attention to it. Once again, it is passed in as 'memo' to the first anonymous function call, and then the returned value of the anonymous function is passed in as the 'memo' argument to the next function.
Another example of the classic use case for memo would be returning the smallest or largest number in an array. Example:
[7,4,1,99,57,2,1,100].reduce((memo, val) => memo > val ? memo : val)
// ^this would return the largest number in the list.
An example of how to write your own reduce function (this often helps understanding functions like these, I find):
test_arr = [];
// we accept an anonymous function, and an optional 'initial memo' value.
test_arr.my_reducer = function(reduceFunc, initialMemo) {
// if we did not pass in a second argument, then our first memo value
// will be whatever is in index zero. (Otherwise, it will
// be that second argument.)
const initialMemoIsIndexZero = arguments.length < 2;
// here we use that logic to set the memo value accordingly.
let memo = initialMemoIsIndexZero ? this[0] : initialMemo;
// here we use that same boolean to decide whether the first
// value we pass in as iteratee is either the first or second
// element
const initialIteratee = initialMemoIsIndexZero ? 1 : 0;
for (var i = initialIteratee; i < this.length; i++) {
// memo is either the argument passed in above, or the
// first item in the list. initialIteratee is either the
// first item in the list, or the second item in the list.
memo = reduceFunc(memo, this[i]);
// or, more technically complete, give access to base array
// and index to the reducer as well:
// memo = reduceFunc(memo, this[i], i, this);
}
// after we've compressed the array into a single value,
// we return it.
return memo;
}
The real implementation allows access to things like the index, for example, but I hope this helps you get an uncomplicated feel for the gist of it.
That's not what map does. You really want Array.filter. Or if you really want to remove the elements from the original list, you're going to need to do it imperatively with a for loop.
Array Filter method
var arr = [1, 2, 3]
// ES5 syntax
arr = arr.filter(function(item){ return item != 3 })
// ES2015 syntax
arr = arr.filter(item => item != 3)
console.log( arr )
You must note however that the Array.filter is not supported in all browser so, you must to prototyped:
//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license
if (!Array.prototype.filter)
{
Array.prototype.filter = function(fun /*, thisp*/)
{
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
var res = new Array();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
{
var val = this[i]; // in case fun mutates this
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}
And doing so, you can prototype any method you may need.
TLDR: Use map (returning undefined when needed) and then filter.
First, I believe that a map + filter function is useful since you don't want to repeat a computation in both. Swift originally called this function flatMap but then renamed it to compactMap.
For example, if we don't have a compactMap function, we might end up with computation defined twice:
let array = [1, 2, 3, 4, 5, 6, 7, 8];
let mapped = array
.filter(x => {
let computation = x / 2 + 1;
let isIncluded = computation % 2 === 0;
return isIncluded;
})
.map(x => {
let computation = x / 2 + 1;
return `${x} is included because ${computation} is even`
})
// Output: [2 is included because 2 is even, 6 is included because 4 is even]
Thus compactMap would be useful to reduce duplicate code.
A really simple way to do something similar to compactMap is to:
Map on real values or undefined.
Filter out all the undefined values.
This of course relies on you never needing to return undefined values as part of your original map function.
Example:
let array = [1, 2, 3, 4, 5, 6, 7, 8];
let mapped = array
.map(x => {
let computation = x / 2 + 1;
let isIncluded = computation % 2 === 0;
if (isIncluded) {
return `${x} is included because ${computation} is even`
} else {
return undefined
}
})
.filter(x => typeof x !== "undefined")
I just wrote array intersection that correctly handles also duplicates
https://gist.github.com/gkucmierz/8ee04544fa842411f7553ef66ac2fcf0
// array intersection that correctly handles also duplicates
const intersection = (a1, a2) => {
const cnt = new Map();
a2.map(el => cnt[el] = el in cnt ? cnt[el] + 1 : 1);
return a1.filter(el => el in cnt && 0 < cnt[el]--);
};
const l = console.log;
l(intersection('1234'.split``, '3456'.split``)); // [ '3', '4' ]
l(intersection('12344'.split``, '3456'.split``)); // [ '3', '4' ]
l(intersection('1234'.split``, '33456'.split``)); // [ '3', '4' ]
l(intersection('12334'.split``, '33456'.split``)); // [ '3', '3', '4' ]
First you can use map and with chaining you can use filter
state.map(item => {
if(item.id === action.item.id){
return {
id : action.item.id,
name : item.name,
price: item.price,
quantity : item.quantity-1
}
}else{
return item;
}
}).filter(item => {
if(item.quantity <= 0){
return false;
}else{
return true;
}
});
following statement cleans object using map function.
var arraytoclean = [{v:65, toberemoved:"gronf"}, {v:12, toberemoved:null}, {v:4}];
arraytoclean.map((x,i)=>x.toberemoved=undefined);
console.dir(arraytoclean);

Categories