JavaScript is a little weird!!

Hey Folks, Hope you're all doing great.

Today, I wanted to talk about some weird things that are really really weird about Javascript language and not only in JS, some of them are also applicable in other programming languages.

Let's start with the basics.

What is Javascript?

Well, Javascript is a scripting language that conforms to the ECMAScript standard. And you know, its initial release was built in only ten days back in December, 1995.

What I was talking about.

But Js is a little bit wierd and it doesn't always behave the way you might think and does not produce the expected output.

Note: Even senior JS developers don't use some of these syntax'es. This post is just for showing how quirky js can get.

Talk is cheap, show me the code

Here you go,

if(0.2+0.1 == 0.3){
  console.log("Foo");
}else{
  console.log("bar");
}

Output: bar
Try to expect the output, you might say it will log out "Foo". But that's the catch, if you do something like this you can see why it logs "bar".

That's just the problems with the programming languages not particularly with js. Programming languages lacks the base 10 accuracy. Let's see what I mean.

console.log(0.2+0.1);   //0.30000000000000004

So obviously, 0.30000000000000004 is not equals to 0.3

Okay, the next one.

console.log([,].length);  //1

So, the array has 2 elements, right? One before the comma and one after that (Even though they are empty). But JS treats this as only 1 element. In Js, until and unless you pass the value to the last position (after the last comma) of the array, it will not treat this as a value and will not insert it into the array but that's not the case with the other positions.
The last comma is called the trailing comma
And you will find it everywhere in the JS code, like

const example = {
    foo: "foo",
    bar: "bar", // 👈🏻 here you can see a trailing comma
};

Here's the example.

console.log([1,2,].length);  //2
console.log([,,3].length);   //3

Here, when you pass nothing in the last position, the array's length is 2 but when you pass only the last position it still counts all the other values.

One More
We all at one or the other point in time of our coding journey used increment operator.
Let's look at that in JS.

console.log(++1);  //Error
console.log(++true);  //Error

Well, to be honest, it's giving an error not because of JS, but due to the fact that we are trying to mutate an already defined value.

You might say that increment operator might not exists in Js. But let me tell you that the syntax is absolutely correct.

let foo=1;
console.log(++foo);  //2
let bar = true;
console.log(++bar);  //2 

This is a valid syntax but it only works with variables.
And this is not the case with Js only, it works the same way with Java, C and many more programming languages.

The last one

console.log((10,2));  //2
console.log((2+1,3+1,1));  //1
console.log((2-1,3*1,1+1));  //2

The comma operator evaluates its operands, from left to right, but returns only the last operand.

The definitely last one

const arr1 = ["a","b","c"];
const arr2 = [1,2,3];
console.log(arr1+arr2);  // a,b,c1,2,3

This happens because when you try to concat two array's, they will first get converted into strings and are then concatenated.

If you really need to concat two arrays, you should use the "spread" operator.

const arr1 = ["a","b","c"];
const arr2 = [1,2,3];
console.log([...arr1 , ...arr2 ]);  //[ 'a', 'b', 'c', 1, 2, 3 ]

Final Thoughts

So, I think you all might agree with me on the fact that js is a little funny language and does not works the same we think it does.

If you think Js is not wierd enough, please let me know in the comments below and I will probably make another post about the more quirks that Js has.

Okay, so that's Umang Mittal signing off.