One is the == operator, and the other is the === operator.

But what are the differences between the two and when you should choose which?

Well, if you read this blog post till the end, you’re going to discover exactly that.

The Equal-To Operator

The first and most common operator is the equal-to aka the == operator.
It allows you to compare two values with each other and receive a Boolean as a result.

Example:

const name = "Jack";
console.log(name == "Jack"); // This should print out 'true'.

The operator takes two values, one on the left and one on the right.

But there’s a caveat with this operator. And that it doesn’t matter if the values are not of the same Datatype.

Example:

const num = 1;
console.log(num == "1"); // It would still print out 'true'.

But why is that?

Well, the equals-to-operator checks both values loosely. Meaning that it won’t care if both data types are not the same. All that matters is that the value provided has the same character.

This is not the case with the next operator.

The strict-equality operator

Just like the equal-to operator, it checks if both values are the same and if that’s the case. It will either return true or false.

But here’s where this operator is different.

For starters, the operator uses three = characters. ===

Instead of ‘loosely’ comparing the two values, it will strictly compare them.

This means that the datatypes of both values must be the same as well as the values.

Example:

const num = 1;
console.log(num === "1"); // Now, it would print out 'false'

This feature allows you to write safer code and more accurate code that’s also easier to read.

But how can I choose which?

Personally, it depends on your preference as a developer. I’ve seen many people use the == operator and others use the === operator.

It also depends on how strict you want your code to be.

Although I do have to mention that the === operator allows for more concise and safer code because it will prevent errors like trying to manipulate a number value while it’s a string. (Like in the example shown above.)

So that was the post. You should now have a clear understanding of what the differences are and when to choose which.

Let me know in the comments down below if you found this post helpful.

Oh and remember, your dream career is just one step away!

Michiel Out!

Btw, I recently opened a FREE giveaway where 5 lucky winners will receive two weeks of video materials for FREE, from my JavaScript Mastery Blueprint.

It’s a must-have for anyone who wants to become a professional JavaScript developer.

You can join here: https://michielarkema.com/jsmb-giveaway

The post What’s The Difference Between The equal-to & The strict-equality Operator In JavaScript? appeared first on Michiel Arkema's Blog.

That’s why if you read this blog post till the end, you are going to discover exactly how to use the Local Storage API to it’s fullest potential.

A while ago, I was working on a personal web application project that used normal HTML, CSS, and JavaScript on the front end. And PHP on the back end. I don’t remember exactly what I was creating anymore, but it required heavy use of saving user input data.

At the time I thought it was the best idea to use a MySQL database to store all the data, so I created the corresponding tables, wrote the queries, and started testing the application. Everything worked fine but I quickly discovered the data I was saving, was pretty useless for my database because all I used it for was to show it on the screen of the client.

So I started to search for an alternative and I came across a web page called javascript.info and which listed a special page referencing the Local Storage API.

The Local Storage API, as the name suggests, allows developers to store individual data on the client’s browser. So that only that specific client, can access that piece of data. Even if the user closes the browser or restarts his/her entire computer, the data will still persist.

Once I read the page, my ADHD brain got super hyped and I immediately started to code it into my web application, tested it, and saw that it worked amazingly.

So now, let’s take a quick look at the strategy of what you can do with the Local Storage API

• Adding data to the storage
• Retrieving data from the storage
• Removing data from the storage

Adding data to the storage

The first part of course is adding data to the storage so let’s do that now.

Adding data is done by a method called ‘setItem’. It takes both a key and value.

localStorage.setItem("country", "The Netherlands");

Once added, the data will now stay persistent even if we would close our browser or restart our entire computer.

Retrieving data from the storage

In the example above, I mentioned that we add data by using a key and a value. The reason for this is that once we want to retrieve a specific value, we use its designated key to retrieve it.

const country = localStorage.getItem("country");
console.log(country); // This should print out "The Netherlands"

Now we aren’t entirely dependent on using the ‘getItem’ method. We can also access the key by accessing it as an object.

const country = localStorage.country;
console.log(country); // This should print out "The Netherlands"

Pretty neat ha?

Removing data from the storage

Obviously, a data storage is is not complete without being able to remove data.

localStorage.removeItem("country");

Just like with retrieving the data, we can also remove it by using object like access.

delete localStorage.country;

Note

Both the key and value can only be of the string data type. This means that if you add a number, it will automatically be converted to a string.

And in the case that you want to store a list, object, or table. It would be best if you converted it to JSON before adding it to the storage. You do that as follows…

const numbers = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
localStorage.setItem("numbers", JSON.stringify(numbers));

So that’s it for this post, I hope you learned something from it and that it was clear enough for you to understand.

Feel free to leave a comment behind telling how useful it was for you, or maybe you even have some extra information that you would like to share.

Don’t forget, your dream career is just one step away!

Michiel Out!

Oh and btw, I’m currently opening 5 FREE spots in my brand new coaching program where I take complete beginners and turn them into coding beasts. So if you want to claim that exclusive spot, click the link down below.

https://michielarkema.com/software-developer-accelerator

The post How To Use The Local Storage API In JavaScript appeared first on Michiel Arkema's Blog.