The JavaScript Nobody Told You About

I’ve used JVM languages like Java and Kotlin for most of my college life. Ironically, my first job right after college was as a ReactJS developer. The language that I feared and ran away from in the past 4 years was now in front of me. The reason I was afraid of JavaScript is mostly because of why you’re here too. It’s not easy to understand why it works the way it works.

Almost 1.5 years down the line, I feel more confident now, and hopefully, you’ll too after reading this. Here I’ve pointed out some mysteries which I’m pretty sure you never thought existed in JavaScript.

Falsy values

undefined, null, 0, false, NaN, ‘’ are all falsy values. You probably already knew this but did you know that an empty string is false too?

See below.

console.log('' == false); // true
console.log('' === false); // false

Filter function

You must have used the filter function a lot on arrays. Here’s a tip if you want to filter falsy values in an array. Just provide Boolean inside the filter function.

const arr = [1,4,undefined,null,9,NaN,10,''];
console.log(arr.filter(Boolean)); // [1,4,9,10]

Sort function

What do you know about the sort function in JavaScript? It sorts the array, right? Well, not exactly.

const arr = [1,2,20,10,8];
arr.sort(); // [1, 10, 2, 20, 8]
arr.sort((a,b) => a-b); //[1,2,8,10,20]

Output in line 2 above doesn’t look like a sorted array. Why? It’s because when we call the sort method without arguments, JavaScript converts the elements of the array to string and then sorts them alphabetically. Crazy? I know.

Swapping

Many times I had a use case to swap two elements inside an array or just two variables. I used to write a utility function for that but here’s a JavaScript’y way of doing this.

Inside arrays
let arr = [1,2,3,4,5];
[arr[4],arr[0]] = [arr[0],arr[4]];
console.log(arr); //[5,2,3,4,1]
Just two variables
let a = 10, b = 20;
[a,b] = [b,a];
console.log(a,b); // 20 10

This is the power of destructuring in JavaScript. Although I was using destructuring for a long time, never thought of it like this.

Trim function

In many programming languages, we have a trim method on strings that removes any whitespace in the string. But with JavaScript trim doesn’t remove all whitespaces in your string. See below.

" shivam bhasin  ".trim(); // "shivam bhasin"
"shivam bhasin".trim(); // "shivam bhasin"

It removes all the leading and trailing whitespaces from your string but not all. This was confusing for me because of my experience with strings in Java.

Push function

I use the push method a lot in my code. Though I recently got to know that we can also merge arrays using push.

const a = [1,2];
const b = [3,4];
a.push(b); // [1,2,[3,4]] not merged
Array.prototype.push.apply(a,b); // [1,2,3,4] merged

In line 4 above, the merged array will be in variable a.

isNaN function

isNaN is again one of the most used methods in JavaScript. It checks whether a given argument is a number or not. But it behaves differently for empty strings and filled strings. See below.

isNaN(1); // false
isNaN(""); // false
isNaN("a"); // true
isNaN("1"); // false

Line 1 is probably clear to you, 1 is a number, hence it returned false. But in line 2, JavaScript treats an empty string as 0, which is a number and hence fails the NaN test. Line 3 should also be clear as ‘a’ is a string therefore not a number. Again, in line 4 “1” is a string but JavaScript internally parses it to a number 1 and hence it fails the NaN test. Weird, right? After knowing this I started using parseInt() on the arguments before passing them to the isNaN function.

Dynamic keys to objects

Sometimes I had to assign dynamic keys to my objects based on an API response, or some calculation. Here’s how we can do that.

const a = "age";
const b = {
     name: 'shivam',
     [a]: 22, // this will become age: 22 at runtime
};

Splice and Slice

After almost 3 months I realized that slice and splice are different methods in JavaScript. Lol, I know. Here’s how they behave differently.

slice(s,e);
Here s is the starting index and end is the end index of the new array which will be a sub-array of the original array. Note that the original array will not be changed when using slice.
splice(i,n);
Here i denotes the starting index and n denotes the number of items to be removed starting from index i. Note that splice will alter the original array.

Floating point numbers

This one is almost unbelievable but stay with me. The addition of floating numbers behaves very weirdly in JavaScript. See below.

console.log(0.1+0.2 === 0.3); // false

This is because 0.1+0.2 gives 0.30000000000000004 which is not equal to 0.3. Also,

console.log(9007199254740992 + 1); // 9007199254740992  
console.log(9007199254740992 + 2); // 9007199254740994

This looked weird until I came to know that all JavaScript numbers are floating points represented internally in 64-bit binary according to the IEEE 754 standard. You can read more about it here.

typeOf Operator

typeOf is a unary operator which returns a string denoting the primitive type of the variable. As we know that JavaScript is mostly objects, so in most cases, this returns object . Here are a few weird exceptions.

typeOf NaN; // 'number'

typeOf NaN is a number that seems weird but NaN is technically a numeric data type. However, it is a numeric data type whose value cannot be represented using actual numbers. See below.

const nan1 = 2*'a'; // NaN
const nan2 = 4*'b'; // NaN
nan1 === nan2; // false

In the example above, both nan1 and nan2 are not equal which means they hold some value. It’s just that value can’t be represented in numbers therefore they are NaN. See another exception,

typeOf null; // 'object'

Kudos if you’ve made it here. Most people end up way before this. But the more you know about it the more you realize how the world’s number one programming language works.

Here’s a parting tip for you.

Primitive operations > Methods

If you want to make your code even faster, then try to use primitive operations instead of making method calls. Use VanillaJS wherever you can and it will make your code fast during runtime. See below.

const min = Math.min(a,b); // slow
const min = a<b? a: b; // fast
arr.push(x); // slow
arr[arr.length] = x; // fast

Hope you’ve learned something new today. Comment down below how many of these you knew already. Also, comment if there’s something you think should be on this list.

Let the geek inside you win!

More content at plainenglish.io