When semicolon isn't optional in JavaScript

#webdev #javascript #programming #beginners

Original article: wtfcodes.com

TL;DR: In JavaScript, semicolons are optional at the end of statements, but there are specific cases where omitting them can lead to unexpected behavior or errors.

Without semicolon:

In the following example, I am trying to access an element in an array using idx variable and console log if the number is even or odd.
And since semicolon is optional in JavaScript, I have not used any semicolon at the end of the statement.

const array = [1, 2, 3, 4, 5, 6]
const idx = 2
const num = array[idx]
(num && num % 2 === 0)
            ? console.log("Even")
      : console.log("Odd")

Everything seems fine, right?
But wait, we got errors in the console.

With semicolon:

Now let's add semicolons at the end of the statements.

const array = [1, 2, 3, 4, 5, 6];
const idx = 2;
const num = array[idx];
(num && num % 2 === 0)
            ? console.log("Even")
      : console.log("Odd");

And look that, Everything works fine now!

And look that, Everything works fine now!

So WTF?

The deal breaker line here is const num = array[idx]. Because it is followed by (num && num % 2 === 0) ? console.log("Even") : console.log("Odd");

Why? Lets say our array contained functions that returns a number.

const fn1 = () => 1
const fn2 = () => 2
const fn3 = () => 3
const fn4 = () => 4
const fn5 = () => 5

const array = [ fn1, fn2, fn3, fn4, fn5 ]
const idx = 2
const num = array[idx]

console.log(num) //Output: function fn3() {}

It logs function fn3() {} in the console.
But we want num to be the return value of the function. So we need to call the function like this: const num = array[idx]() that way we are calling fn3 num will be the return value of the function.

const num = array[idx]()

console.log(num) //Output: 3

Since fn3 doesn't take any arguments, its deosnt matter if we pass any argument or not the function will still return the same value.
And we could also call the function in the next line and it will still work the same way.

//It doen't matter what we pass as argument
//Since fn3 doesn't take any argument, it will still return the same value
const num = array[idx]
(Math.random() > .5 ? 1 : 0)

console.log(num) //Output: 3

Did you catch it?

In our first example we were accidentally performing a function call on array[idx] which is a number and not a function, which is obviously wrong.
But when we add a semicolon at the end of the statement: const num = array[idx] the statement ends and the next line is treated as a new statement and not a function call.

const array = [1, 2, 3, 4, 5, 6]
const idx = 2
const num = array[idx]; //the semicolon ends the statement
//So the next line is treated as a new statement and not a function call
(num && num % 2 === 0)
            ? console.log("Even")
      : console.log("Odd")

Thank you for reading!

If you enjoyed this article, please consider sharing it with others.
You can support me on Buy Me a Coffee.
If you have any feedback or suggestions, feel free to reach out to me on Twitter.

DEV Community