Tricky JavaScript: Part-2

Hi Guyzzz, Welcome back to the 2nd part of Ticky JavaScript. If you are new here please check out part 1. Link below ⏬

Tricky JavaScript: Part-1

Trailing commas in array

Do you know, you can create an array with no values in it, but just the commas? Read the code below.

let a = [, , ,];
a.length; // -> 3
a.toString(); // -> ',,'

Yes, this is valid.

Trailing commas (sometimes called “final commas”) can be useful when adding new elements, parameters, or properties to JavaScript code. If you want to add a new property, you can add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome.

for more information check out this link.

Trailing commas - JavaScript | MDN

Be careful while comparing the arrays.

You can not believe this, but array equality is the monster. just look at the below example and try it out.

[] == ''   // -> true
[] == 0    // -> true
[''] == '' // -> true
[0] == 0   // -> true
[0] == ''  // -> false
[''] == 0  // -> true

[null] == ''      // -> true
[null] == 0       // -> true
[undefined] == '' // -> true
[undefined] == 0  // -> true

This happens because of “==” (Abstract Equality Operator). The explanation is a bit difficult. Please read it carefully.

1. If x is null and y is undefined, return true.
2. If x is undefined and y is null, return true.
3. If Type(x) is Number and Type(y) is String, return the result of the comparison x == ! ToNumber(y).
4. If Type(x) is String and Type(y) is Number, return the result of the comparison ! ToNumber(x) == y.
5. If Type(x) is String and Type(y) is BigInt, return the result of the comparison y == x.
6. If Type(x) is Boolean, return the result of the comparison ! ToNumber(x) == y.
7. If Type(y) is Boolean, return the result of the comparison x == ! ToNumber(y).
8. If Type(x) is either String, Number, BigInt, or Symbol and Type(y) is Object, return the result of the comparison x == ToPrimitive(y).
9. If Type(x) is Object and Type(y) is either String, Number, BigInt, or Symbol, return the result of the comparison ToPrimitive(x) == y.

Directly add value at “Nth” place

let arr = []
arr[100] = 'value'

Is this even possible??? Yes, It Is. JavaScript directly sets the value to the “Nth” position. In this case in 100th position.

Then the question is, What will be the values of position before 100th?

The answer is undefined. It is as same as defining variables without initializing them.

let arr = []
arr[100] = 'value'
arr.length  // -> 100
arr[0]      // -> undefined
as same as
let a;
console.log(a)  // -> undefined

Math with “true” and “false"

Let’s do some math.

true + true;                          // -> 2
(true + true) * (true + true) - true; // -> 3

Yes, we can perform math operations on boolean values.

In JavaScript, the boolean value is coerced as a number. for “true” and “false” values it coerces as “1” and “0” respectively.

Comparison of three numbers

1 < 2 < 3; // -> true
3 > 2 > 1; // -> false

Isn’t is confusing, that both the expressions are logically correct and the same but JavaScript is giving different answers.

This is happing because of coercing values of “true” and “false” as “0” and “1” respectively.

Let’s understand this one by one.

expression : 1 < 2 < 3;
step 1 : (1 < 2) < 3
step 2 : true < 3
step 3 : 1 < 3        // true is coerce as 1
answer : true

The Second example:

expression : 3 > 2 > 1;
step 1 : (3 > 2) > 1
step 2 : true > 1
step 3 : 1 > 1     // true is coerce as 1
answer : false

Such examples help us to realize how tricky JavaScript is and We should learn such aspects of the language also.

That is it for this part. We will take a look at more such examples in the next part. Till then keep learning.