We Keep Coding

[].slice.call() pattern in javascript [duplicate]

This question already has answers here:
Explanation of [].slice.call in javascript?
(9 answers)
Closed 1 year ago.
Bootstrap 5 Javascript examples sometimes show code like:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
Why isn't this just:
var collapseElementList = document.querySelectorAll('.collapse')
What is [].slice.call() doing exactly? I don't understand why you'd slice on an empty array, and then I have no idea what call is doing there. What would be the problem with the obvious way to do this, the second way above?

querySelectorAll returns a NodeList, which is a collection, but not an array.
[].slice.call turns an array-like collection into an array proper. It will allow you to use array methodss on it, eg:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'));
const textsOfCollapsedElements = collapseElementList.map(elm => elm.textContent);
Otherwise, if you don't convert it to an array first, you won't be able to use array methods on it.
It's probably most important for forEach. Newer browsers support NodeList.prototype.forEach, but it hasn't been with us that long. In contrast, Array.prototype.forEach has existed forever. So turning the collection into an array allows for forEach to be called on it, even on obsolete browsers that don't support NodeList.prototype.forEach.

It's an idiom for turning anything array-ish (in this case a DOM NodeList) into a real Array by exploiting the fact that Array::slice can work on anything that's iterable and has a .length property.
The modern idiom is Array.from(...).

How to merge two arrays at run time [duplicate]

This question already has answers here:
Why Doesn't Array Concatenation Work in Javascript? [closed]
(3 answers)
Closed 2 years ago.
I am getting below like values at runtime. Below is for only example. I will have same array structure at runtime. I want to merge them.
let finalSearchResult =[];
data [{"a":1000,"a":1000001,"a":10000002,"D":5000000}]
data [{"P":1000,"Q":1000001,"R":10000002,"S":5000000}]
finalSearchResult.concat(finalSearchResult,data);
but its not working. When I am printing finalSearchResult its coming as null.

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
please refer to:
Array.prototype.concat documentation
Therefore:
finalSearchResult = finalSearchResult.concat(data);
Will be the correct way to concat the arrays.

How javascript sorts arrays with the same property? [duplicate]

This question already has answers here:
Sort array items and preserve order of same elements
(5 answers)
Closed 3 years ago.
If the two elements have the same property value on which we sort the array then how javascript order them i mean if you have this array for example :
let array = [{id:0,name:"sam",age:"20"},
{id:0,name:"john",age:"21"},
{id:1,name:"fred",age:"30"}]
let's suppose that i want to sort this array by id ascending then how can i know which one will appear first :
{id:0,name:"sam",age:"20"}
OR
{id:0,name:"john",age:"21"}

Up until now the Array.prototype.sort was not a stable sort because there was no mentioning for it in the spec so actually there was no guaranty for a stable (consistent) order.
Though recently, the spec has changed and the V8 engine implemented it as a stable sort.

I realized after answering that this is a duplicate. See my answer to the dupetarget. Briefly: As of ES2019, Array#sort is stable, so in your example "sam" will remain before "john". Prior to ES2019, that wasn't necessarily true, they could have had their order reversed.

What does ‘...’ in JavaScript do? [duplicate]

This question already has answers here:
What "..." means in Javascript (ES6)? [duplicate]
(1 answer)
Spread Syntax vs Rest Parameter in ES2015 / ES6
(11 answers)
Closed 4 years ago.
I’m new to coding and slef teaching JavaScript.
My task I was set was to identify the largest value in an array.
My soloition works, but I needed the ‘...’ for it to work properly.
My question is, what does the ‘...’ in the last line actually mean/do?
function createAnArr(){
let myArr = prompt("Enter your numbers separated by commas:").split(",");
return myArr;
}
console.log(Math.max(...createAnArr()));

'...' it means it will be able to take any number of arguments of the respective scope
'...': The spread operator is used for array construction and destructuring, and to fill function arguments from an array on invocation. A case when the operator spreads the array (or iterable object) elements.
more details you can see here

Javascript function parameters as an array [duplicate]

This question already has answers here:
How does the Math.max.apply() work?
(5 answers)
Closed 7 years ago.
Say for example I want the largest number out of an array of numbers.
var numbers = [54,34,76,33,87,12,76,92,44,93,23];
I want to be able to use Math.max() to find the largest number without using eval.
So, I want to be able to pass an array of parameters to a function. The array's length can change, so Math.max(numbers[0],numbers[1]...) won't work.
Is there any way I can do this?

You can use the .apply() method:
var max = Math.max.apply(Math, numbers);
The .apply() method is a property of Function.prototype and so is available on all function instances. Its first argument is used as the value of this in the function to be called, and the second argument should be an array that will be used as the list of parameter values.
In my example above I used Math as the value for this, because that's what this will be in a typical invocation of Math.max, but (on my installation of Firefox at least) Math.max.apply(null, numbers); works too.