Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Various ways to define a variable in JavaScript
In this article, we will learn about the various ways to define and declare variables in javascript, and how we can use them to implement state management in our applications.
In javascript, variables can be thought of as containers that hold values, and which can be retrieved later on in the application. There are several ways to define a variable, each with its own syntax and use cases.
Let’s understand different methods of doing so with the help of some examples to understand the concept better.
Example 1: Using the var keyword
The “var” variable has function scope, which means it is accessible within the function where it is defined or globally if defined outside of any function.
In this example, the variables' name and age are defined using the var keyword. They are accessible within the sayHello() function and can also be accessed globally (outside the function) due to their global scope.
Filename - index.html
<html>
<head>
<title>Various ways to define a variable in JavaScript</title>
<script>
var name = "John";
var age = 25;
function sayHello() {
var message = "Hello, " + name + "! You are " + age + " years old.";
console.log(message);
}
sayHello();
</script>
</head>
<body>
<h1>Variable Example - var</h1>
</body>
</html>
Output
The result will like the image below.
Example 2: Using the let Keyword
Introduced in ECMAScript 2015 (ES6) version update, the let keyword provides block scope for variables, i.e they are limited to the scope of a block only (i.e., within curly braces) where they are declared.
In this example, the variables name and age are defined using let. They are accessible within the sayHello() function due to function scope, but they cannot be accessed outside the function because of block scope.
Filename - index.html
<html>
<head>
<title>Various ways to define a variable in JavaScript</title>
<script>
let name = "John";
let age = 25;
function sayHello() {
let message = "Hello, " + name + "! You are " + age + " years old.";
console.log(message);
}
sayHello();
</script>
</head>
<body>
<h1>Variable Example - let</h1>
</body>
</html>
Output
The result will like the image below.
Example 3: Using the const Keyword
The const keyword is used to define variables that are constants, meaning their value cannot be reassigned once initialized, but if the variable is an object or an array, its properties or elements can still be modified. Constants have block scope, like variables defined with let.
In this example, the variables PI and maxAttempts are defined as constants using the const keyword. The area variable within the calculateArea() function is also defined as a constant, ensuring it does not change within the function.
Filename - index.html
<html>
<head>
<title>Various ways to define a variable in JavaScript</title>
<script>
const PI = 3.14159;
const maxAttempts = 3;
function calculateArea(radius) {
const area = PI * radius * radius;
console.log("The area is: " + area);
}
calculateArea(5);
</script>
</head>
<body>
<h1>Variable Example - const</h1>
</body>
</html>
Output
The result will like the image below.
Conclusion
In conclusion, JavaScript gives us multiple ways to define variables, each with its own applications and use cases. It is, oftentimes, recommended to use let and const whenever possible to use the block scope and prevent unintended variable reassignments. We learned how to define variables in javascript using different methods and saw some examples explaining the same.
572 Views
