20 Killer JavaScript One-Liners That’ll Save You Hours of Coding 🤯🔥

But i think using filter method to delete an element is heavy process as filter method returns a new array , suppose you are performing this action on 1000 Dom elements, it means if you remove 1 element using filter, other 999 element will rerender
On the other hand using splice method will remove the element from the original array directly

Makes you sound like a pirate reading that second line of code! Arrrrrr!

It deletes an element lol 😂😂

Oh boy, this is gonna be fun. First of all, re-formatting the code a bit will make it a lot more readable:

Object.values(
  (
    {
      [arr.indexOf('C')]:arr,
      ...arr
    } = arr,
    arr
  )
)

Starting from the outside, Object.values does what it says on the tin and returns the values of the object, so it's safe to assume whatever happens on the inside will return an object mapping some values to the array items except for the one to be deleted.

The inner pair of braces is a bit weird. I haven't checked this with the documentation, but from the looks of it, the form (exp_1, expr_2) will evaluate two expressions and return only the latter, so this block could be somewhat reshaped into something along these lines:

    {
      [arr.indexOf('C')]:arr,
      ...arr
    } = arr
    return arr

if it was a function. So the code applies some de-structuring magic to the array, then hands it back to Object.values as mentioned above.

Now, for the de-structuring part, here's where the real magic happens.

The first access of arr inside square braces is just accessing the array for reading; it gets the index of the element to be deleted. The second two occurrences of arr can be thought of as "writing" access, as in these are making changes to the variable.

Looking at the components here:

({...foo} = bar) is a weirder way of writing foo = {...bar} but using destructuring. So what's happening there, on its own, is arr = {...arr}, meaning we get an array-like object copy of arr.

({[0]: foo} = [1, 2, 3]) is equivalent to foo = [1, 2, 3][0]

At this point, I'm still struggling to wrap my head around what actually happens here, but with a bit of testing, it looks like the rhs of the de-structuring assignment doesn't have to be the same variable, which makes for a much simpler example:

({[0]: arr, ...arr} = [1, 2, 3], arr)

This somehow results in the object {1: 2, 2: 3}.

After some more testing, it looks like the first arr in this expression can be any other variable:

({0: _, ...arr} = [1, 2, 3], arr)

Which now makes it a lot more obvious what's going on. The key 0 (in my example) is being de-structured into some throw-away variable, then the remaining key-value pairs are de-structured into arr. In the original code, this "throw-away" variable just happens to also be arr to save up on a let and to make the code a bit more confusing.

So, what ultimately happens is:

1. The index of the value to delete is calculated
2. The array is de-structured into a throw-away variable (key from 1.) and into arr (other keys)
3. arr is passed into Object.values, returning all values of the array except the one to be deleted in the form of a new array.

There you go :)

Agreed, which makes it all the more useful to know that it's classified as one in JS anyway (and in fact by most other software and runtimes too, due to the IEEE 754 standard for floating-point arithmetic).

The isFinite global function (spec, MDN) might come in handy next time you need to validate a numerical type.

Yes

Well, in JS it is a number.
maybe calling it Infinity was a poor choice 😉

Infinity is a number in math. I think it's set this way for internal reasons, but outside of programming infinity is a number

You're treating NaN as a constant, which is not. Makes a lot of sense once you understand what NaN is. When you do an operation that results in NaN, its failure is not exactly the same as the other. Imagine doing an operation manually and you'll understand that it's never equals the other and there are more ways to reach that result, making it always different. This blog post is good to know more: ntgard.medium.com/why-nan-nan-3d41...

Infinity is not reverse NaN, they are pretty different. Infinity behaves as a property (or constant), which is the highest number (or lowest in case of negative infinity).

Infinity > Infinity // false

That is a very solid and comprehensive article! Whilst not new knowledge to me, I believe people who might not be as familiar with this subject should have no problems following along!

Thanks for sharing it here

There are also BigInts

You misunderstand. I merely listed some common pitfalls that newcomers often seem to run into, and provided a link to further details.

What a hateful and abusive response. Completely uncalled for and gained you nothing.
I wish you a more joyful and happy day tomorrow.

Thanks for the heads up. Fixed!