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.

Comments

[Jon Randy 🎖️]

Your increment operator example makes no sense - it is completely meaningless to use it on anything other than a variable... what are you going to increment if trying to apply it to a fixed value?

The 0.2 + 0.1 problem is present in an awful lot of languages. It's a problem with floating point numbers, not JavaScript.

Also not sure why you think the comma operator is 'weird' - that's just how it works. What would you expect it to do?

[S3ntrail]

I heavily aggree with this reaction.

Regarding the 0.2 + 0.1. Jon is right. You should search this up if you want to have a detailed explanation of WHY it is not 0.3. (I find this quite fascinating of why it is happening)

But anyway, I genuinely think that every language is weird. But weird in its own way. We just have to put in the time and effort to learn and time will eventually come where you find out whether you like the language or not.

[matthew-salerno]

I agree that this is weird behavior, but I think (with the exception of the comma operator) this is pretty standard if you come from any other language.

Floating point operations lack base 10 accuracy no matter the language, increment has traditionally been a side efect-full operation on a variable. The only language I can think of that treats extra commas as empty (the 'expected' behavior) is Verilog (arguably not a coding language). And yeah I'll concede the comma operator thing is weird, I would expect it to create a list-like object or a syntax error.

That being said I think this is a fun look at why languages are weird in general, and it's certainly something we all had to learn at one point. Thanks for sharing!

[Pacharapol Withayasakpunt]

Floating point operations lack base 10 accuracy no matter the language,

Not all, but a lot.

Also, Python does have Decimal class.

[Pacharapol Withayasakpunt]

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

I don't think this one work in any programming language. What would a predefined value be mutable?

#include <stdio.h>

int main() {
  printf("%d\n", ++1);
  return 0;
}

main.c: In function ‘main’:
main.c:5:18: error: lvalue required as increment operand
    5 |   printf("%d\n", ++1);
      | 

But of course this works.

#include <stdio.h>

int main() {
  int i = 1;
  printf("%d\n", ++i);
  return 0;
}

[tzwel]

another one that thinks js is weird and doesn't even bother to learn BASIC programming rules. how do you imagine incrementing to a boolean? how would that work? learn about floating point maths, seems like your knowledge is lacking, then write an article

[matthew-salerno]

Plenty of people learn by writing. And putting these articles out can help with that. Sure maybe there should be some kind of disclaimer about still being new, but I don't think it's appropriate to gate people off based on knowledge, as writing and blogging about these often abstract processes in plain speak is an important step in the process of learning for some.

[tzwel]

this is plain misinformation, and beginner programmers could really think that javascript is bad because of those nonexistent issues

[Pacharapol Withayasakpunt]

Incrementing to a boolean isn't a normal thing to do in the first place; but the exact result depends on Boolean implementation.

Otherwise, a lot of things depend on the parser, e.g. what browser are you using; if the standard isn't written.

[umangm05]

Thanks everyone for your time commenting on my first post and indicating what exactly is wrong. I appreciate your ideas and make suitable changes.

[Emmanuel Aiyenigba]

What's your point exactly, Umang. Every language has their limitations but the things you wrote here are not limitations.