Variables and Scopes in Javascript

Variables and Scopes in Javascript

var πŸ₯Š let πŸ₯Š const && Functional πŸ₯Š Block πŸ₯Š Global

Β·

6 min read

INTRODUCTION

4+ Free Intro & Hello animated GIFs and Stickers - Pixabay

A variable is a named container in computer programming that holds a value. It can be used to store and manipulate data within the program. The value stored in a variable can be of any data type, such as a number, string, array, or object. The name of the variable is used to reference the stored value, and the value can be accessed and modified as needed. Variables are defined using specific keywords in programming languages. In JavaScript, the 'var', 'let', and 'const' is used to define the variable, these are specific keyword to store any data.

NOMENCLATURE TO WRITE VARIABLES

3 Spiderman GIFs | Tenor

In JavaScript, variable names follow a specific naming convention, also known as naming rules or naming syntax. These conventions ensure that variables are easy to read and understand, and also prevent naming conflicts.

Here are the rules to define a Variable :

  1. Variable names must start with a letter, underscore (_), or a dollar sign ($).

  2. Variable names cannot start with a number.

  3. Variable names can contain letters, numbers, underscores, and dollar signs.

  4. Variable names are case-sensitive, so "ourVar" and "OurVar" are considered two different variables.

Different Cases to Write Variables

TYPEFACE OR FONT |δ½ εˆ†εΎ—ζΈ…ζ₯šε—οΌŸ

In JavaScript, variable names can be written in different cases, such as lowercase, UPPERCASE, camelCase, or PascalCase

  1. lowercase: All letters in the variable name are in lowercase. For example: "ourvariable"

  2. UPPERCASE: All letters in the variable name are in uppercase.For example: "OURVARIABLE"

  3. camelCase: The first letter of the first word is in lowercase, and the first letter of each subsequent word is in uppercase. For example: "ourVariable"

  4. PascalCase: The first letter of each word is in uppercase. For example: "OurVariable"

It is better to use camelCase to write variables in JavaScript because it makes our code well structured and more readable, and always remember to write the variable name that defines the stored value in it.


Before Jumping Into Different Types Of Variables In JavaScript.

Let Me Introduce Different Types Of Scopes In JavaScript

animated-light-bulb-gif-30 | Animated clipart, Gif photo, Motion design  animation

In JavaScript, there are three types of scope: global scope, function scope, and block scope.

Global 🌍 Scope:

  1. In JavaScript, the global scope refers to the root scope of the program, which is the topmost level of the scope chain. Variables and functions declared outside of any function or block are considered to be in the global scope and are accessible from anywhere in the program.

    Let's see an example

     let x = 01 ;
     function ourX(){
     console.log(x) // Here , x is accessible
     }
     console.log(x) // 01
     ourX()         // 01
    

    In the above example, x is a global variable as it is declared outside of any block or in any function that's why it is accessible anywhere in the program.

    As it is accessible in function 'x' and also in a global environment.

Function πŸ› οΈ Scope:

In JavaScript, a function creates a new scope, which is a container for variables and functions. Variables declared within a function are only accessible within that function, and are separate from variables declared outside of the function.

  1. Let's see an example

     function ourX(){
     let x = 12345 ;
     console.log(x)
     }
     console.log(x)  // Reference Error , x is not accessible outside functional scope
     ourX() // 12345
    

    Block πŸ”’ Scope:

    Block scope in JavaScript refers to the ability to create a block of code within which a variable can only be accessed and used within that block. This is different from the global scope, where a variable can be accessed and used anywhere within the code.

    Let's see an example

     if(true){
     let x = 45 ; 
     console.log(x) // output : 45
     }
     console.log(x) // Reference Error : x is not defined (it is not accessible )
    

VAR πŸ₯Š LET πŸ₯Š CONST

VAR

πŸ‘‰ It is one of the ways to declare variables in JavaScript, but after introducing 'let' and 'const', the usage of 'var' decreased.

πŸ‘‰ Variables declared with 'var' keywords, has functional scope, which means that they can only be accessible within the function in which they are declared.

πŸ‘‰ Variables declared outside the function, is called global variable, they can be accessed from anywhere in the program.

πŸ‘‰Variables declared with 'var' keyword can be reassigned to a new value

Let's understand this concept with an example

var a = 45 ; // This variable is accessible anywhere as it is global variable
function addingAB(){
var b = 45 ; // This variable is only accessible within this function 
b = 50 ; // Reassigned the value of b
console.log(a+b);
}

console.log(b) // Undefined : b is only accessible in addingAB() function
addingAB()     // Output : 95

LET

πŸ‘‰ 'let' variable was introduced in ECMA Script 6, this variable is a block-scoped variable

πŸ‘‡ Block Scope

πŸ‘‰The block of code is defined by curly braces { }

πŸ‘‰The variable declared in the block scope is only accessible inside the block.

πŸ‘‰ This 'let' variable can be only accessible inside the block it is defined.

πŸ‘‰ 'let' variable value can be reassigned

Let's understand this concept with an example

{
let a = 90 ; 
a = 180 ; // we can reassign a  βœ…βœ…βœ…
console.log(a) // Output : 180 
}
console.log(a) // Reference Error : a is not defined , as a only accessible inside the block

CONST

πŸ‘‰ 'const' variable was introduced in ECMA Script 6, this variable is a block-scoped variable.

πŸ‘‰ This 'const' variable can be only accessible inside the block it is defined.

πŸ‘‰ 'const' variable value cannot be reassigned.

Let's understand this concept with an example

{
const a = 90 ; 
// a = 45 (cannot be reassigned) ❌❌
console.log(a) // Output : 90 
}
console.log(a) // Reference Error : a is not defined , as a only accessible inside the block

That's The Wrap!

You're welcome! I'm glad I could help you with your blog on variables and scopes in JavaScript. Understanding how to use let, const, and var, and how to control the accessibility and lifespan of variables is essential for writing maintainable and organized code. I hope your readers find the information helpful and informative. If you have any other questions or need further clarification, feel free to ask.

If you have understood the concepts of variables and scopes in JavaScript, please leave a like and comment to let me know. Your feedback is valuable and helps me to improve my content. Thank you for reading and happy coding


Β