Javascript is Funny 😹

Wierd !! JavaScript !!

Javascript is loved by many of the developers all around the world. It is backed by one off the biggest community in internet. ECMA launched many new features, solve many off the loopholes but there is something which can't be fixe now.

Let's blow our mind with this wierd behaviour of javascript and understanding logic behind it.

1. Addition of Empty Array's

[] + []
// Output: ''

The expression [ ] + [ ] in JavaScript utilizes the + operator, which is overloaded to perform both arithmetic addition and string concatenation. When the operator is used with non-numeric operands, JavaScript attempts to convert these operands to strings and concatenate them.

Let's break down the expression:

1. [ ] represents an empty array.
2. When the + operator is used with objects (arrays are objects in JavaScript), JavaScript attempts to convert these objects to primitive values for the operation. The default behavior for converting an array to a primitive value results in the array being converted to a string.
3. The string representation of an empty array [ ] is an empty string "".
4. Therefore, when you try to concatenate two empty strings ("" + ""), the result is still an empty string "".

2. Comparing Array

[] == []
// Output: false

This is because arrays are objects in JavaScript, and when you compare objects using the == (equality) operator, the comparison checks for reference equality, not value equality.

Here's a breakdown:

1. Each [] creates a new array object in memory.
2. Even though both arrays are empty and appear identical, they are separate objects stored at different memory locations.
3. When you compare these two arrays using ==, JavaScript checks whether the references (memory locations) of these two objects are the same.
4. Since the two array objects are stored at different memory locations, their references are different.
5. Therefore, [] == [] evaluates to false because their references do not match, despite the arrays being structurally identical.

TIP : In JavaScript, if you want to check if two arrays have the same values (value equality), you need to compare the elements of the arrays manually or use a function/library that does this comparison for you.

3. Addition of Array's with Values

[1, 2, 3] + [4, 5, 6]
// Output: '1,2,34,5,6'

Drawing from our earlier explanation of why [] + [] prints an empty string '', let's apply a similar logic to understanding why [1, 2, 3] + [4, 5, 6] prints '1,2,34,5,6'.

When you see the expression [1, 2, 3] + [4, 5, 6] in JavaScript:

1. Each array [1, 2, 3] and [4, 5, 6] is converted into its string representation before the concatenation. The string representation of an array is obtained by joining its elements with commas. So, [1, 2, 3] becomes '1,2,3' and [4, 5, 6] becomes '4,5,6'.
2. Now, you're effectively doing '1,2,3' + '4,5,6'. In string concatenation, the + operator simply joins the strings end-to-end without adding any additional separators.
3. The result of this concatenation is '1,2,34,5,6', where the two string representations are joined together exactly at the point where one ends and the other begins, leading to the 3 and 4 appearing next to each other without a comma in between.

4. Adding strings with prefix

'foo'+ +'bar'
// Output: 'fooNaN'

The expression 'foo' + +'bar' in JavaScript may seem a bit tricky at first, but let's break it down to understand why it prints 'fooNaN'.

1. 'foo': This part is a string literal. Nothing complicated here.
2. +'bar': This might look unusual if you haven't seen it before. The + before 'bar' is a unary plus operator, which tries to convert its operand into a number. Since 'bar' is a string that doesn't represent a numeric value, trying to convert 'bar' into a number results in NaN (Not-a-Number), which is JavaScript's way of indicating that the value is not a valid number.
3. 'foo' + NaN: Now we are concatenating the string 'foo' with NaN. In JavaScript, when you use the + operator with a string and any other type, the other type is converted to a string, and then the two strings are concatenated. So, NaN gets converted to the string 'NaN', and then 'foo' is concatenated with 'NaN'.
4. The final result is 'fooNaN', which is the concatenation of 'foo' and the string representation of NaN.

5. Typeof NaN

typeof NaN
// Output: 'number'

Yes, in JavaScript, typeof NaN indeed prints 'number'. This might seem counterintuitive at first because NaN stands for "Not-a-Number". However, NaN is a special value that represents a computational error or an undefined or unrepresentable value in numerical calculations. Despite its name, NaN is considered a numeric data type in JavaScript.

Here's a brief explanation:

1. NaN is a property of the global object, and it's a value that represents a "Not-a-Number" value. It's what's returned when you try to perform a mathematical operation that doesn't result in a specific number.
2. typeof operator: When used, typeof returns a string indicating the type of the unevaluated operand. The possible types it can return are: "undefined", "object", "boolean", "number", "bigint", "string", "symbol", and "function".
3. When you apply typeof to NaN, the JavaScript engine recognizes NaN as a value of the type "number" because NaN is technically a numeric data type, despite it representing an error or undefined numerical result.

Therefore, typeof NaN results in 'number', indicating that NaN is categorized under the "number" type in JavaScript's type system.

6. NaN must be instance of Number, Right ?

NaN instanceof Number
// Output: false

The expression NaN instanceof Number evaluates to false because of how the instanceof operator works and the nature of NaN in JavaScript.

1. NaN: As previously mentioned, NaN is a special numeric value representing "Not-a-Number". It's a primitive value, not an object.
2. Number: This is a built-in JavaScript constructor function used to create number objects when called with the new keyword (e.g., new Number(123)). When Number is used without new, it converts its argument to a number, but doesn't create a new object.
3. instanceof Operator: The instanceof operator tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object. It's used to check if an object is an instance of a specific constructor function.

Now, putting these together:

• NaN is a primitive value, not an object, so it doesn't have a prototype chain. Number, on the other hand, is a constructor function that can create number objects, but NaN itself is not created by the Number constructor; it's just a special value that's part of the Number type.
• Because NaN is not an object and was not created using the Number constructor, NaN instanceof Number evaluates to false. instanceof is meant to be used with objects to check their prototype chain against a constructor function's prototype, which doesn't apply in the case of NaN, a primitive value.

Hence, despite NaN being a numeric type (typeof NaN yields "number"), it is not an instance of the Number object, which is why NaN instanceof Number evaluates to false.

Really JavaScript is badass

'b' + 'a'+ + 'd' + 'a' + 's' + 's'

i mean 🍌🍌🍌

baNaNass

Conclusion🧳

Javascript might be confusing sometime but it's blazing fast and easy for beginners to learn.

Happy coding! 🧑‍💻