No announcement
 

Variables and Constants

In JavaScript, variables and constants are used to store and manipulate data. They serve as containers that hold different types of values, such as numbers, strings, objects, arrays, and more. Variables can have their values changed, while constants remain immutable after their initial assignment. Understanding variables and constants is fundamental to JavaScript programming and enables developers to work with data dynamically.

JavaScript Variables:

Variables in JavaScript are declared using the var, let, or const keywords. Before ES6 (ECMAScript 2015), var was the primary keyword used to declare variables. However, let and const were introduced in ES6 to provide better scoping rules and to prevent inadvertent reassignments of values.

Using var: The var keyword has a function-level scope, meaning variables declared with var are accessible within the entire function in which they are declared. If declared outside of any function, they become global variables, accessible throughout the entire script.

Example:

var.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Variables Example</title>
</head>
<body>

<!-- JavaScript Variables -->
<h2>JavaScript Variables:</h2>
<script>
function exampleVar() {
  var x = 10; // Function-level scope
  if (true) {
    var y = 20; // Function-level scope
  }
  console.log(x); // Output: 10
  console.log(y); // Output: 20
}

exampleVar();
console.log(x); // Error: x is not defined (out of scope)
console.log(y); // Output: 20 (accessible as global variable)
</script>

</body>
</html>

Output
10 20 Uncaught ReferenceError: x is not defined 20

Using let:

The let keyword was introduced to address the scoping issues of var. Variables declared with let have block-level scope, meaning they are only accessible within the block in which they are declared.

Example:

let.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript let Example</title>
</head>
<body>

<!-- JavaScript let -->
<h2>JavaScript let:</h2>
<script>
function exampleLet() {
  let x = 10; // Block-level scope
  if (true) {
    let y = 20; // Block-level scope
  }
  console.log(x); // Output: 10
  console.log(y); // Error: y is not defined (out of scope)
}

exampleLet();
console.log(x); // Error: x is not defined (out of scope)
</script>

</body>
</html>

Output
10 Uncaught ReferenceError: y is not defined Uncaught ReferenceError: x is not defined

JavaScript Constants:

Constants, declared using the const keyword, are like variables, but once their value is assigned, it cannot be changed. They provide a way to ensure that a particular value remains constant throughout the program's execution, preventing accidental reassignment.

Example:

constants.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Constants Example</title>
</head>
<body>

<!-- JavaScript Constants -->
<h2>JavaScript Constants:</h2>
<script>
function exampleConst() {
  const PI = 3.14; 
  PI = 3.1415; // Constant cannot be reassigned. Error: Assignment to constant variable
}

exampleConst();
</script>

</body>
</html>

Output
Uncaught TypeError: Assignment to constant variable