Js Variables Let, Var, Const
Introduction to Js Variables
In JavaScript, variables are fundamental elements that allow you to store and manage data in your programs. They act as containers for holding various types of values, such as numbers, text, or objects. Variables give your code flexibility and the ability to work with changing information.
In JavaScript, you can declare variables using three different keywords: var
, let
, and const
. Each keyword has its own scope and behavior when it comes to variable declaration and assignment. Here's how you can use each of them:
Here's how you declare variables using let
and const
:
let score = 100;
const playerName = "Alice";
let isGameOver = false;
console.log(playerName + " has a score of " + score);
In this example, the variables score
, playerName
, and isGameOver
store different types of data and can be used throughout the code to manage and display information.
Variables can hold various data types, including:
- Numbers: Used for numeric values.
- Strings: Used for text values, enclosed in single or double quotes.
- Booleans: Represents true or false values.
- Objects: Complex data structures that can hold multiple values and functions.
- Arrays: Ordered lists of values.
- Null: Represents the intentional absence of any value.
- Undefined: Represents a declared variable without an assigned value.
Let
Let: Introduced in ES6 (ECMAScript 2015), let
allows you to declare block-scoped variables. This means the variable's scope is limited to the block (portion of code within curly braces) where it's defined, like loops or conditionals. Unlike var
, variables declared with let
are not hoisted, ensuring they are only accessible after they are declared. The value of a let
variable can be changed after initialization.
Variable declared with 'let' is block-scoped.
function letExample() {
let y = 10;
if (true) {
let y = 20; // This creates a new 'y' variable in the block scope
console.log(y); // Output: 20
}
console.log(y); // Output: 10 (variable in the function scope is unchanged)
}
letExample();
Var
Var: This is the oldest way to declare variables. Variables declared with var
are function-scoped, meaning they are accessible within the function they are defined in or as global variables if declared outside of any function. The variable's value can be reassigned, and it's also hoisted (moved to the top of the scope during compilation).
function varExample() {
var x = 10;
if (true) {
var x = 20; // This reassigns the same 'x' variable
console.log(x); // Output: 20
}
console.log(x); // Output: 20 (variable is modified in the block scope)
}
varExample();
Const
const: Also introduced in ES6, const
is used to declare variables that remain constant after their initial assignment. Like let
, const
also has block-level scope. Once assigned, a const
variable cannot be re-assigned to a new value, making it suitable for values that should remain unchanged. Note that for objects and arrays declared with const
, their properties or elements can still be modified, but the reference to the object or array cannot be changed.
Variable declared with const
is also block-scoped, and its value cannot be re-assigned
function constExample() {
const z = 10;
if (true) {
const z = 20; // This creates a new 'z' variable in the block scope
console.log(z); // Output: 20
}
console.log(z); // Output: 10 (variable in the function scope is unchanged)
}
constExample();
In summary:
- Use
var
if you need a variable with a global or function scope and want to allow re-declarations. - Use
let
when you want a variable with block-level scope and the ability to reassign its value. - Use
const
when you want a variable with block-level scope that holds a constant value after assignment, preventing re-assignment.
Conclusion
Modern best practices encourage using let
and const
over var
due to their clearer scoping rules and better predictability, which leads to more maintainable and bug-free code.
Remember that choosing meaningful variable names improves code readability. Variables should be named based on their purpose to make your code self-explanatory.