cft

The JavaScript Nobody Told You About

Let the geek inside you win!


user

Shivam Bhasin

a year ago | 4 min read

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; // fastarr.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

Upvote


user
Created by

Shivam Bhasin

Simplifying things since childhood. Writes about JavaScript, application development, and self-help.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles