JavaScript Variables

In JavaScript, a variable serves as a specifically named storage area that contains a value, which may encompass various data types, including numbers, strings, objects, and more. You can declare a variable using the keywords var, let, or const.

• ✅ Variables as Placeholders for unknown values: They can be utilized in situations where the actual values they signify are not determined at the time the code is authored.
• ✅ Variables as Code Clarifies: They can enhance the readability of your code, making its intent more apparent.

Rules of Naming Variables in JavaScript

There are some rules while declaring a JavaScript variable (also known as identifiers).

• ✅ Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
• ✅ After the first letter, we can use digits (0 to 9), for example, value1.
• ✅ JavaScript variables are case-sensitive; for example, x and X are different variables.

Declaring Variables in JavaScript

In JavaScript, you have the option to utilize either the "var" or "let" keywords for the purpose of declaring a variable. There are three distinct approaches to variable declaration in JavaScript:

Using var keyword

In JavaScript, the declaration of variables was historically accomplished with the var keyword. However, its usage has diminished in modern programming practices because of various issues related to scope and complex behaviors.

var a = "Example";

console.log(a);

Using let keyword

Variables that possess block scope are defined utilizing the let keyword. These variables are accessible exclusively within the block where they are declared in a JavaScript function.

let a = 20;

console.log(a);

Using const keyword

Constant variables serve the purpose of preventing changes, meaning their value remains fixed after their initial declaration. In JavaScript, these variables are denoted by the const keyword.

const p = "Example";

console.log(p);

JavaScript Variable Data Types

Different types of data can be stored in JavaScript variables. These are the primary types:

• ✅ String: Strings represent text values.
• ✅ Number: The number represents numerical values.
• ✅ Boolean: True or false is represented by boolean.
• ✅ Undefined: A declared variable without a value given to it.
• ✅ Null: It indicates a purposefully empty value.
• ✅ Object: Key-value pairs are represented by objects.
• ✅ Array: A collection of values is represented by an array.

Types of Variables

Variables are categorized based on their functionality and the values they hold. In scenarios where a single value needs to be accessed repeatedly throughout the program, a global variable should be utilized; in contrast, for instances requiring temporary storage within a specific function, a local variable is more appropriate. In JavaScript, there are two principal types of variables:

• ✅ Local variable
• ✅ Global variable

JavaScript Local Variable

In JavaScript, local variables are defined within the curly braces {} or within a function. These variables are only accessible in the scope of the function or the block in which they were created.

Local variables that share the same identifier can be utilized across various functions or code blocks. Once a function has been executed, the local variables defined within it are removed from memory.

Example 1

myfunction();



function myfunction(){

    //Local variable

    let word = "Example";

    console.log(word);

}



console.log(word);

Output:

Example

ReferenceError: word is not defined

Example 2

mydemo1();

mydemo2();

let word;

function mydemo1(){

    //Local variable

    let word = "Example";

    console.log(word);

}

function mydemo2(){

    //Local variable

    let word = "Example";

    console.log(word);

}

console.log(word);

Output:

Example

Example

undefined

JavaScript Global Variable

In JavaScript, global variables are defined outside of any functions and can be accessed from any location within the script, including within those functions.

Example:

The following example illustrates the functioning of global variables.

Example

var Grade = "B";

// Declaring global variable outside the function

myFunction();

// Global variable accessed from 

// Within a function

function myFunction() {

    console.log("global value of Grade is: ", Grade);

}

// Changing value of global

// Variable from outside of function

{

    Grade = "A";

    console.log("local value of Grade is: ", Grade);

}

Output:

lobal value of Grade is:  B

local value of Grade is:  A

The Best Ways to Use JavaScript Variables

Use these best practices for writing JavaScript variable code:

• ✅ Use let and const: Avoid using var to avoid scope-related problems by using let and const instead.
• ✅ Use meaningful variable names: Select names that are descriptive and help the reader understand the code.
• ✅ Use the camelCase naming convention: JavaScript variables should be named using the camelCase format (myVariableName as an example).
• ✅ Use const: when the variable should not change or unwanted modifications should be avoided.
• ✅ Declare variables at the start of a block: the variable declaration is used to improve readability and prevent problems with hoisting.
• ✅ Clear the global variables: use local variables whenever feasible to avoid unforeseen changes.

Conclusion

In JavaScript, variables play a crucial role in the storage and manipulation of data within a program. To write code that is both efficient and free of errors, it is essential to grasp the concepts of variable definition, scope, hoisting, and best practices. By following the guidelines and recommended practices outlined in this tutorial, learners can enhance their programming skills and establish a strong foundation in JavaScript.