JavaScript is one of the most popular programming languages in 2022 and likely many more years to come. Learn the worse part of it to become a better developer.

---

1. Concatenation between string and number

1 + 2 + "3"

Demystify

33 . First we have 3 as the first + works as a normal mathematical operation and then 3 + "3", the second + plays the role of concatenation.

---

2. Concatenation between null and number

null + 0

Demystify

It returns 0 because in this operation null is converted to 0.

---

3. array is a sub-type of object

Demystify

Sure, but looping through an object is a bit different from looping through an array and in this regard [{}, {}], as you might guess, is the best way to construct a huge collection in JavaScript.

---

4. The rescure of ...rest operator

const array = ["hello", "World"];
console.log({...array})

Demystify

You can convert an array to object using ...rest operator. The output will be :

[object Object] { 0: "hello", 1: "World" }

---

5. typeof might give you a surprise sometimes

const a = new Array();
console.log(typeof a) //"object"

const b = [];
console.log(typeof b) //"object"

Demystify

const a = new Array();
console.log(typeof a) //"object"

const b = [];
console.log(typeof b) //"object"

The first way to initiate an array is not deemed as a best practice.

---

6. What's the output?

setTimeout(callback, 0)

Demystify

The callback insde the function setTimeout will only be triggered AFTER all synchronous code has been executed, no matter how many mini-second you set here, meaning it does not surely run after 0 second.

---

7. There is no "class" at all when evaluated by typeof

class a { }
console.log(typeof a) // "function"

function b(){}
console.log(typeof b) //"function"

Demystify

The long story short: There is no "class" in JavaScript if you use typeof operator. But who cares?

---

8. Thanos does not understand the code

Math.min(); // -> Infinity
Math.max(); // -> -Infinity
Infinity > -Infinity; // -> true

Demystify

Note that Math.max() is not the same thing as Number.MAX_VALUE. And hence, as you might see, the following code returns true:

Math.min() > Math.max(); //true

---

9. true or false, that is the question!

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

Demystify

As 1 < 2 returns true and so true < 3 also returns true. On the second line, 3 > 2 return true, but true > 1 gives us false.

---

10. sort() does not always sort!

let collections = [9, 13, 3, 20, 49, 10];
console.log(collections.sort()) //[10, 13, 20, 3, 49, 9]

Demystify

This is not a bug. The native JavaScript method sort() converts the list of elements in the array given into strings. It then compares the UTF-16 values and sorts the list based on these UTF-16 values.You might note that the list sorted according to the first digit, so 13 is less than 9 because 1 < 9.

---

11. The magic does not end

console.log(true + true === 2); //true
console.log(true - true === 0); //true

Demystify

Both return true.

But console.log(true === 1)// false because here both type and value are taken into account.

---

12. The magic does not end

console.log(true + true === 2); //true
console.log(true - true === 0); //true

Demystify

You might see that the operator == only compares the value while === takes both value and type into consideration.

If you write "10" == 10, then we get true but "10" === 10 returns false.

console.log("10" == 10)//true
console.log("10" === 10)//false

---

13. The magic does not end with +

[1, 2, 3] + [4, 5, 6]

Demystify

"1,2,34,5,6". When the plus sign (+) is used between two different features/functions in a single context, it might behave quite strangely like above. We know it (+) holds two functions: a mathematical operation and for concatenating string.

---

14. Comparison in JavaScript is odds

console.log(null == 0); //false
console.log(null ===0); //false
console.log(null >  0); //false
console.log(null >= 0); //true

Demystify

silence is golden

---

15.

Math.max() < Math.min() //true

Demystify

Math.min(number1, number2) and Math.max(number1, number2) allow us to find the smallest and the largest number in a collection, let say.

But if we do not pass any parameter into the function then by default Math.min(); // -> Infinity and Math.max(); // -> -Infinity.

---

16.

Math.max() < Math.min() //true

Demystify

Math.min(number1, number2) and Math.max(number1, number2) allow us to find the smallest and the largest number in a collection, let say.

But if we do not pass any parameter into the function then by default Math.min(); // -> Infinity and Math.max(); // -> -Infinity.

---

17

0.1 + 0.2; // -> 0.30000000000000004
0.1 + 0.2 === 0.3; // -> false

Demystify

This one is very famous and the cause rooted in the floating-point math which you might find in any other programming languages, one way or another.

So you should not blame JavaScript for this one

---

18.

console.log(NaN === NaN); //false

Demystify

The code returns false. So I have nothing to say, just memorize it and avoid any particular bugs caused by.

---

19.

console.log(typeof NaN)//"number"

Demystify

NaN means "Not a number" but its typeof is "number". Go crazy!!!

---

20.

console.log(typeof []) //object

Demystify

It is said that array is a sub-type of object in JS. So the code above returns "object".

FYI: console.log(typeof {})// "object"

How to fix that? Go with Array.isArray(isObjectorArray)

---

21.

null is an object, "but"

Demystify

Let write some more code: console.log(typeof null), // "object". console.log(typeof undefined) // "undefined".

OMG, console.log(null instanceof Object); // false

---

22.

you can even declare a variable without any functional keyword such as "var", "let", or "const".

Demystify

So technically there are four ways to declare a variable:

1. no keyword,
2. var (not recommended),
3. const (highly recommended)
4. let (when you want to change the value)

---

23.

variable without any functional word in the beginning is terribly bad and "var" keyword is also unfortunately terrible.

Demystify

Given the fact that we can re-declare a variable if it has been initially declared with "var". Say,

var x = 10;
var x = 12;
console.log(x) //12

It is therefore highly recommended not to use "var" in any case.

---

24.

"b" + "a" + + "a" + "a" === "baNaNa"

Demystify

The code above returns true. Yes hell! "NaN" in the right "baNaNa" simply means "Not a number".

Note that in JS, the plus sign (+) can be used as an operator (for number) and for concatenating (for string).