JavaScript Variables and Scope: A Complete Beginner’s Guide with Examples

#variables #scope #javascript #newbie

Introduction

Starting with JavaScript? One of the first things to master is how variables function and where they’re accessible in your code. Variables store information that your program uses, and their scope determines where you can effectively use them.

In this article, we’ll break down two key concepts:

Variables in JavaScript
Scope in JavaScript

We'll also include simple examples to help you understand how things work in real code.

Variables in JavaScript

What Is a Variable?

A variable is simply a named placeholder used to store a piece of information in your code. You can think of it as a box that holds information, like a number, text, or even more complex data.

Example:

let name = "Wisdom";

Here, "name" is a variable that stores the string "Wisdom."

Key Concepts of Variables

Name: The unique name you give to a variable (like 'name' or 'age').
Value: The data stored in the variable (e.g., "Wisdom" or 30).
Type: The specific form of data stored in a variable, such as **characters, numbers, or logical values.
Assignment: The act of storing a value into a variable using ‘=’.
Mutability: Variables can be changed later (unless declared with const).

Declaring Variables

JavaScript provides three keywords to declare variables:

var:

Function-scoped or globally scoped.
Can be redeclared and reassigned.

Example:

var x = 5;
var x = 20; // No error

let:

Block-scoped (within {}).
Can be reassigned but not redeclared in the same scope.

Example:

let y = 10;
y = 15; // OK
// let y = 20; // Error if in the same block

const:

Block-scoped.
Cannot be reassigned or redeclared.

Example:

const c = 30;
// c = 40; // Error: Assignment to constant variable

Rules for Naming Variables

Must start with a letter, _, or $.
Cannot start with a number.
Are case-sensitive (myName ≠ , myname).
Use descriptive names for better readability (e.g., userName, totalScore).

Scope in JavaScript

What Is Scope?

The term scope in JavaScript describes where in your program a variable can be used. JavaScript includes three types of scope:

Global Scope
If you define a variable outside of any function or code block, it’s in the global scope and can be accessed throughout your entire program.

let name = "I'm global";

function goGlobal() {
console.log(name); // Very much accessible here}

goGlobal();
console.log(name); // Still accessible here

Local (Function) Scope

Variables declared inside a function are only accessible within that function.

Example:

function greet() {
let message = "Hello Wisdom";
console.log(message); // Effective!
}

greet();
// console.log(message); // Error: message is not defined

Block Scope

Variables declared with let or const inside a block (like if, for, or {}) are limited to that block.

Example:

if (true) {
let block = "I'm inside the block";
console.log(block); // Effective!
}

Remark: var does not respect block scope. It's on
ly function-scoped.

Conclusion

Understanding how variables and scope work in JavaScript is essential to writing clean and bug-free code. With this knowledge, you'll be able to structure your programs more effectively and avoid unexpected behavior due to variable conflicts.

Happy coding!

You can reach out to me via LinkedIn