Variables in Javascript

Variables in Javascript

A beginner's guide to understanding variables in Javascript

WTH are variables you say 🤔?

Variable is how you store reusable data. Programmers name a variable in order to reuse it, update it and keep track of the data.

In this article we'll talk cover the following!

🔹Naming a variable

🔹Declaring a variable

🔹Scopes in Javascript

🔹Differences between var and let

Interesting right? Well buckle up!

Naming a variable:

Your variable name should be simple, unique and identify the variable and the data it holds! Follow these rules when naming a variable.

🔹Variable names are case sensitive i.e foobar is different from FOOBAR.

🔹Variable name should begin with underscore(_), letter or dollar signs($).

🔹Variable name should not contain spaces.

🔹Certain words should not be used as variable names, because they have other meanings within JavaScript. check out this link for the list of reserved words in Javascript here ⬇️

developer.mozilla.org/en-US/docs/Web/JavaSc..

Also it is advisable to follow these practices to keep your variable names readable and achieve clean code.

🔹Pick a style for naming when you're using more than one word e.g camelCasing = fooBar or using underscore(_) = foo_bar. Both works fine!

🔹 Don't shorten your variable name. variable names must be descriptive enough to understand at a later date! Example: "cntxt" -> "context", "btn" -> "button"

No matter what format you choose remember them and be consistent with it. it is not forbidden to name them all upper, all lower, all snake, all camel case.

Declaring a Variable:

A variable can be declared using the "var" keyword. Example:

var fullName;

Also a value can be assigned to the variable upon declaration. Example:

var fullName;
fullName = "Bello Ololade";

It's also possible to declare and assign a value to a variable on thesame line. Example:

var fullName = "Bello Ololade";

easy right? 😆

Also you can declare multiple variables in a single statement. Example

var lastName = "Bello", firstName = "Ololade";

Now, let's talk about scope🙂

Scope determines accessibility of Variables from different part of your code.

in Javascript we have 3 different types of scope:

Block scope:

Curly braces({}) are used to denote the block scope in Javascript, so any variable declared within these curly braces are block scoped and will not be accessible outside the blocks.

{
   var firstName = "Ololade";
} //Block scope
Function scope:

A variable declared inside a function will not be accessible outside the function, this variable is said to be function scoped.

function register () {
   var firstName = "Ololade";
} //function scope

Both Function scope and Block scope are termed collectively as "Local scope". Variables declared inside them can only be accessed inside the function or the block.

Global scope:

when a variable is declared globally, it means it is accessible from anywhere is your code. Global scopes are not within any function or blocks.

var firstName = "Ololade";
    //Global scope
let firstName = "Ololade";
    //Global scope
const firstName = "Ololade";
    //Global scope

Difference between var, let and const keyword

ES6 introduced two important new JavaScript keywords:

let and const.

const:

variables declared with const keyword must be initialized immediately and cannot be modified later.

const fullName = "Bello Ololade";
fullName = "Bello Ayomide";
console.log(fullName); //"Uncaught Type Error: Assignment to constant variable"

This will throw an error "Uncaught Type Error: Assignment to constant variable". Which means you cannot override the const variable.

Now that's that. Let's talk about

let and var

The main difference between var and let is that var variables are function scoped while let variables are block scoped.

Example:

var age = 22;
if(age === 22){
  let fullName = "Bello Ololade";
  console.log(fullName);  //Expected output: "Bello Ololade"
}

console.log(age); //Expected output: 22
console.log(fullName);  //Uncaught ReferenceError: fullName is not defined

The console throws an error that says "fullName is not defined"

Conclusion

We've learned about variables in JavaScript. Hope you find it useful and also stay tuned for upcoming articles on JavaScript. Thank you.