Master your keywords

We have seen how to run our first line of JavaScript with the iconic “Hello World!” that every CS student knows. Now we'll get into the different types of keywords we have on JavaScript and some best practices around them.

JavaScript Keywords

As most people know, JavaScript is known for its flexibility, like how it allows us to declare variables in different ways. While this is true, each keyword (var, let, and const) has it's own unique quirks and is best for different use cases.

Understanding the differences between these keywords will help us write cleaner, more reliable code and I'll be doing my best to teach you about each keyword’s behavior, usage and scope, with examples to see them in action.

Key concepts

Before I start explaining what each of JavaScript's keywords do I'll start by explaining some of the core concepts needed to understand the following part.

Hoisting: this is JavaScript’s behavior of moving a variable or function declaration to the top of the scope during the compilation phase.

Scope: This refers to the context in which a variable is accessible. In JavaScript we have 3 scopes:

• Global: it is declared outside of any function and block and can be accessed from anywhere in your code including functions and blocks.
• Function: it is declared inside a function and is only available within it.
• block: it is declared within a pair of curly braces {} such as a for, while or if statements and is only available within cet block.

Initialization: this is when a variable is assigned it's first value.

Mutability: defines whether or not the value assigned to the variable can be changed.

That's it! now that we have those concepts in place we can start getting to know the different keywords in JavaScript.

var, let, and const: JavaScript's big 3

First up, let’s talk about declaring variables. Think of a variable as a little box where you can store almost anything, numbers, words, entire objects. Now, when declaring variables, we can use any of our 3 keywords. here's how each works and how they are different from each other.

Var

Ah, the old school one. This is the one I started using when I first learned JavaScript, it has been around since the very beginning. But here's the thing, it’s a bit… quirky.

For starters it gets “hoisted” to the top of its scope and it is initialized as undefined which tends lo lead to weird behaviors if you're not careful enough. for example:

console.log(myVar); 
// undefined
var myVar = 10;

Weird, right? You can see it before it’s even defined! this is one of the reasons why var, while being the oldest of the bunch is also left out to be used mostly on legacy applications that still use it. Don't take me wrong, I know there are some ways you can still use var, like when you require function scope, like this case for example:

function funcScopedLoop() {
  for (var i = 0; i < 3; i++) {
  	// do something
  }
  console.log(i); 
  // ✅ prints 3
}

instead of

function funcScopedLoop() {
  for (let i = 0; i < 3; i++) {
  	// scoped to loop only
  }
  console.log(i); 
  // ❌ ReferenceError
}

Once again a really niche thing now a days, just as any other implementation of var but hey, there are still reasons you may want to use it.

Additionally, variables declared using var are mutable, so the value of this variable can be updated over time.

Let

As far as scope goes, let is block scoped so it will only exists within the block it was declared in, it is also hoisted to the top of the block it was declared in BUT, unlike var, it is not initialized by default. Meaning if you try to access it before its declaration you will get a ReferenceError.

Introduced in ES6 (2015 update), let is the new kid on the block that quickly became everyone's favorite.

console.log(myLet); // error
let myLet = 5;
console.log(myLet); // 5

But how is this different from using var, is it only the hoisting that changes? well not quite, as I mentioned before, var is function scoped which means there is only one instance shared across one function which can generate issues in let's say loops with a timeout. here is an example:

for (var i = 0; i < 3; i++) {
	setTimeout(() => {
    		console.log(var i: ${i});
	}, 1000);
}
// Output after 1 second:
// var i: 3
// var i: 3
// var i: 3

Now if we use let for this instance we would have something like this:

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
  	console.log(let i: ${i});
  }, 1000);
}
// Output after 1 second:
// let i: 0
// let i: 1
// let i: 2

As we can see, let came as a more versatile and safer option to let, hence why it became the preferred keyword to use.

const

When you hear "const", think "constant." It means you can’t reassign the value of the variable after you set it.

Consts are, like let, also block-scoped and they too get hoisted but not initialized by default. This means that, just like variables declared using let, you will get an error trying to access them before they are declared. now what is the key difference you ask? const variables are not able to mutate so their value remains the same the whole time.

This makes const perfect for declaring static data that won't chagne but is repeated constantly like a specific timeout span, a default value for a variable or if working with api calls it is perfect for storing things like the base url used.

const BASE_URL = "https://api.thecoderaccoons.com/v1";
// A function that fetches user data from the API
async function fetchUser(userId) {
	try {
    	const response = await fetch(${BASE_URL}/users/${userId});
        const data = await response.json();
        console.log("User Data:", data);
    } catch (error) {
    	console.error("Error fetching user:", error);
    }
}
fetchUser("12345");

An additional thing to keep in mind regarding consts is that while they are not mutable, this doesn't apply to the data within an object, so the data within the object can still be updated, even if the keyword used is const, just as the following example.

const user = {name: "Code Raccoons", role: "Developer"};

console.log(user.name); // Code Raccoons
// ✅ We can still modify properties:

user.role = "Code Whisperer";
console.log(user.role); 
// Code Whisperer

// ❌ But we can't reassign the whole object:
user = { name: "Trash Panda" }; 
// ❌ TypeError

Bonus to remember:

Next Up

With this you're now one step closer to building your first application, in the next article I'll go through the different types that you can use in JavaScript.

‍