Javascript Variables

In JavaScript, variables are used to store and manipulate data. They are declared using the var, let, or const keyword, and they can hold various types of values. Variables enable you to store various types of information, such as numbers, strings, objects, and more, and use them throughout your program.

Here’s a deeper look into variables in JavaScript, including variable declaration, naming rules, and scope:

Variable Declaration:
In JavaScript, you can declare variables using the var, let, or const keywords.

var: Historically used for variable declaration, but it has some scope-related quirks. It’s globally scoped or function-scoped, not block-scoped.

var age = 25; // Declaring a variable 'age' and assigning a value of 25 to it

Try it Yourself »

let: Introduced in ECMAScript 6 (ES6) and preferred over var. It’s block-scoped, which means it’s confined to the nearest enclosing block.

let name = "John"; // 'name' variable with a string value

Try it Yourself »

const: Also introduced in ES6, used for declaring constants. Like let, it’s block-scoped, but you can’t reassign its value after declaration.

const isStudent = true; // 'isStudent' variable with a boolean value

Variable Naming Rules:
– Variable names can contain letters, digits, underscores (_), and dollar signs ($).
– Variable names must start with a letter, underscore, or dollar sign.
– Variable names are case-sensitive (myVar is different from myvar).
– Avoid using JavaScript reserved words (e.g., let, if, else, function) as variable names.
– Use descriptive names that convey the purpose of the variable.

Variable Scope:
Scope defines where a variable is accessible within your code. JavaScript has three types of scope:

Global Scope: Variables declared outside any function or block have global scope and are accessible throughout the code.

Function Scope: Variables declared within a function have function scope, meaning they are only accessible within that function.

Block Scope: Introduced with let and const, variables declared inside a block (e.g., inside a loop or if statement) have block scope, which confines their accessibility to that block.


// Global Scope
var globalVar = "I'm global!";

function exampleFunction() {
// Function Scope
var localVar = "I'm local to exampleFunction!";
console.log(localVar); // Outputs: I'm local to exampleFunction!

if (true) {
// Block Scope
let blockVar = "I'm local to this block!";
console.log(blockVar); // Outputs: I'm local to this block!

// 'blockVar' is not accessible here

console.log(globalVar); // Outputs: I'm global!
// console.log(localVar); // Error: localVar is not defined
// console.log(blockVar); // Error: blockVar is not defined

Try it Yourself »

JavaScript has a concept called “hoisting,” where variable declarations are moved to the top of their scope during compilation. This means you can use a variable before it’s officially declared, but it’s best practice to declare variables before using them to avoid confusion.

Imagine you’re a teacher grading papers. You go through all the papers first to see what questions are being asked. You note the questions, but you don’t grade the answers yet. Then you go back and start grading the answers.In JavaScript, during the first pass (compilation), the interpreter looks at all the variable and function declarations and notes them down. It doesn’t assign values to variables or execute functions yet. Then, in the second pass (execution), it assigns values and executes the code.

console.log(name); // undefined
var name = "John";
console.log(name); // John

During the first pass, JavaScript sees the var name; declaration and notes it. It doesn’t know the value yet, so it’s like “undefined.” In the second pass, it assigns the value “John” to name.

Function Hoisting:

Think of function hoisting as if you’re preparing a list of all the functions you’ll need before starting to use them. You list the functions’ names and what they do, and then you actually use the functions.

greet(); // Hello!
function greet() {

During the first pass, JavaScript notes the function greet and what it does. In the second pass, you can use the function and it says “Hello!”

Key Points:
– Hoisting is like preparing a plan before doing the actual work.
– Declarations (like var and functions) are noted during the first pass and used in the second pass.
– It helps JavaScript work even if you use things before declaring them.
– Understanding hoisting helps you write code more confidently and avoid surprises.

Understanding variables, their types, and scopes is crucial for writing effective JavaScript code. It helps you manage data and control the flow of your program.

3 thoughts on “Javascript Variables

  1. Thankyou sir for provide code editor platform.
    It’s really helping me for instant execute the code and learn easily.
    Thankyou so much sir.

Leave a Reply

Your email address will not be published. Required fields are marked *