JavaScript Variables: Declaration, Initialization, and Assignment
Table of Contents
JavaScript Variables: Declaration, Initialization, and Assignment
Learn about JavaScript variables and how to declare, initialize, and assign values to them. Understand the differences between var, let, and const keywords. Get insights into naming conventions, scoping, and best practices.
In JavaScript, a variable is a named container that holds a value. It is used to store data that can be accessed and manipulated throughout your code. JavaScript variables are dynamic, meaning they can hold different types of values, and their values can change during the execution of the program.
How you can declare a variable in JavaScript:
var myVariable;
In the example above, myVariable is the name of the variable.
The var keyword is used to declare the variable.
However, starting from ECMAScript 6 (ES6), you can also use the let and const keywords to declare variables.
Example:
let myVariable; // Declares a variable that can be reassigned. const myConstant = 10; // Declares a variable that cannot be reassigned.
Variables declared with var and let can be reassigned with new values, whereas variables declared with const are read-only and cannot be reassigned after they are initialized.
You can also assign an initial value to a variable when declaring it:
Example:
var myVariable = 42; let anotherVariable = "Hello!"; const PI = 3.14159;
In JavaScript, variables are dynamically typed, which means they can hold values of any type, such as numbers, strings, booleans, objects, arrays, or even functions.
Example:
var myNumber = 42;
var myString = "Hello, World!";
var myBoolean = true;
var myObject = { name: "John", age: 25 };
var myArray = [1, 2, 3, 4, 5];
var myFunction = function() {
console.log("Hello from a function!");
};
How to output the vaules of Vraiable?
To access the value stored in a variable, you simply refer to the variable by its name:
console.log(myNumber); // Output: 42 console.log(myString); // Output: Hello, World! console.log(myBoolean); // Output: true
How to Change the vaule of a variable?
You can also change the value of a variable by assigning a new value to it:
Example:
myNumber = 10; myString = "Goodbye!"; myNumber 20; console.log(myNumber); // Output: 20 console.log(myString); // Output: Goodbye!
Variables play a crucial role in JavaScript programming as they allow you to store and manipulate data dynamically throughout your code.
Rules to name Variable in JavaScript:
When naming variables in JavaScript, you need to follow certain rules and conventions. Here are the rules for naming variables in JavaScript:
1-Variable names must begin with a letter (a-z, A-Z) or an underscore (_) character.
Examples of valid variable names:
myVariable, _privateVariable
2-Subsequent characters in variable names can be letters, numbers (0-9), or underscores (_).
Examples of valid variable names:
myVariable2, total_count, user_name
3-JavaScript is case-sensitive, so myVariable and myvariable are considered different variables.
Examples of valid variable names:
myVariable, myvariable
4-Avoid using reserved keywords as variable names.
Reserved keywords are predefined words in JavaScript that have special meanings and purposes.
Examples of reserved keywords in JavaScript include:
var, let, const, if, for, function, etc.
5-Use descriptive and meaningful names for your variables.
This improves code readability and makes it easier to understand the purpose of the variable.
Examples of meaningful variable names:
firstName,
numberOfStudents,
isLoggedIn
6-Camel case is commonly used for variable names.
In camel case, the first word starts with a lowercase letter, and subsequent words are capitalized.
Examples of variable names in camel case:
myVariable, totalItemCount
7-Avoid using single-character variable names, except in cases where their purpose is clear and well-known (e.g., i for loop counters).
Example of a well-known single-character variable name: i
Here are some examples that demonstrate valid and invalid variable names:
Valid variable names:
var firstName;
var _privateVariable;
var myVariable2;
var total_count;
var numberOfStudents;
Invalid variable names:
var 1stPlace; // Starts with a number.
var my-variable; // Contains a hyphen (-).
var function; // Reserved keyword.
By following these rules and conventions, you can create meaningful and readable variable names in JavaScript.
Ways to declare a variable in JavaScript:
In JavaScript, there are multiple ways to declare variables.
The three most common ways are using the var, let, and const keywords. Here’s an explanation of each:
How declare a variable in JavaScript Using var?
- The var keyword is the oldest way to declare variables in JavaScript.
- It has function scope or global scope, depending on where it is declared.
Example:
var myVariable = 10;
The var keyword allows you to redeclare and reassign the variable within its scope.
Using var:complete code in html
Here’s an example of how you can use the var keyword to declare and use variables in JavaScript within an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Using var in JavaScript</title>
<script>
// JavaScript code
var myVariable = 10;
function myFunction() {
var localVar = "Hello!";
console.log(localVar);
}
console.log(myVariable);
myFunction();
</script>
</head>
<body>
<!-- HTML content -->
<h1>Using var in JavaScript</h1>
</body>
</html>
Explanation:
1-In the example above, we have an HTML file containing a <script> tag where we write our JavaScript code.
2-We declare a variable named myVariable using the var keyword and assign it the value of 10.
3-We also define a function called myFunction that declares a local variable named localVar using var and assigns it the value “Hello!”.
4-The function logs the value of localVar to the console.
5-Outside the function, we log the value of myVariable to the console.
6-Then, we call myFunction() to execute the function and observe the logged output.
Note that the script is placed within the <head> tag for simplicity, but you can also place it before the closing </body> tag to ensure the HTML content is loaded before executing the JavaScript code.
When you open this HTML file in a web browser and check the browser’s developer console, you should see the output:
10
Hello
This demonstrates the usage of the var keyword to declare variables and access them within JavaScript code embedded in an HTML file.
How declare a variable in JavaScript Using let?
Using let:
- The let keyword was introduced in ECMAScript 6 (ES6).
- It provides block scope for variables, which means the variable is only accessible within the block where it is defined.
Example:
let myVariable = 10;
Unlike var, let allows you to reassign the variable, but you cannot redeclare it within the same block scope.
Using let:complete code in html
Here’s an example of how you can use the let keyword to declare and use variables in JavaScript within an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Using let in JavaScript</title>
<script>
// JavaScript code
let myVariable = 10;
function myFunction() {
let localVar = "Hello!";
console.log(localVar);
}
console.log(myVariable);
myFunction();
</script>
</head>
<body>
<!-- HTML content -->
<h1>Using let in JavaScript</h1>
</body>
</html>
Explanation:
1-In this example, we have an HTML file with the JavaScript code embedded within a <script> tag.
2-We declare a variable named myVariable using the let keyword and assign it the value of 10.
3-We define a function called myFunction that declares a local variable named localVar using let and assigns it the value “Hello!”.
4-The function logs the value of localVar to the console.
5-Outside the function, we log the value of myVariable to the console.
6-Then, we call myFunction() to execute the function and observe the logged output.
7-Similar to the previous example, the script can be placed within the <head> or before the closing </body> tag, depending on your requirements.
When you open this HTML file in a web browser and check the browser’s developer console, you should see the output:
10
Hello!
This demonstrates the usage of the let keyword to declare variables with block scope and access them within JavaScript code embedded in an HTML file.
How declare a variable in JavaScript Using const?
Using const:
- The const keyword is also introduced in ES6.
- It declares a read-only, constant variable that cannot be reassigned after its initialization.
- It also has block scope like let.
Example:
const myVariable = 10;
With const, you must assign a value to the variable when declaring it, and you cannot assign a new value to it later.
It’s important to choose the appropriate declaration keyword based on your needs. If the value of the variable will remain constant throughout the program, use const. If you need to reassign the variable, use let. If you are working with legacy code or have specific requirements, you can still use var, but it’s generally recommended to use let or const for better scoping and readability.
Here’s a summary of the ways to declare a variable in JavaScript:
- var: Function-scoped or globally-scoped variable, allows redeclaration and reassignment.
- let: Block-scoped variable, allows reassignment but not redeclaration within the same block scope.
- const: Block-scoped constant variable, cannot be reassigned after initialization.
Choose the appropriate declaration style based on your specific requirements and coding best practices.
Using const:complete code in html
Here’s an example of how you can use the const keyword to declare and use variables in JavaScript within an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Using const in JavaScript</title>
<script>
// JavaScript code
const myVariable = 10;
function myFunction() {
const localVar = "Hello!";
console.log(localVar);
}
console.log(myVariable);
myFunction();
</script>
</head>
<body>
<!-- HTML content -->
<h1>Using const in JavaScript</h1>
</body>
</html>
This demonstrates the usage of the const keyword to declare read-only, constant variables and access them within JavaScript code embedded in an HTML file.
Difference between let and var: complete code in html
Here’s an example that demonstrates the difference between let and var in JavaScript within an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Difference between let and var in JavaScript</title>
<script>
// JavaScript code
var x = 10;
let y = 20;
if (true) {
var x = 30;
let y = 40;
console.log("Inside if block - var x:", x); // Output: Inside if block - var x: 30
console.log("Inside if block - let y:", y); // Output: Inside if block - let y: 40
}
console.log("Outside if block - var x:", x); // Output: Outside if block - var x: 30
console.log("Outside if block - let y:", y); // Output: Outside if block - let y: 20
</script>
</head>
<body>
<!-- HTML content -->
<h1>Difference between let and var in JavaScript</h1>
</body>
</html>
Explanation:
1-In this example, we have an HTML file with the JavaScript code embedded within a <script> tag.
2-We declare a variable x using var and assign it the value of 10.
3-We also declare a variable y using let and assign it the value of 20.
4-Inside an if block, we again declare a variable x using var and assign it the value of 30.
5-We also declare a variable y using let and assign it the value of 40.
6-We log the values of x and y inside the if block, as well as outside the if block.
When you open this HTML file in a web browser and check the browser’s developer console, you should see the output:
Inside if block – var x: 30
Inside if block – let y: 40
Outside if block – var x: 30
Outside if block – let y: 20
The key difference between var and let is how they handle scoping.
With var, variables have function scope or global scope.
In the example, both x variables are part of the same scope, so redeclaring var x inside the if block modifies the outer x variable as well.
On the other hand, let introduces block scope. In the example, let y inside the if block creates a new variable with block scope, separate from the outer y variable. Modifying the let y inside the if block does not affect the outer y variable.
This demonstrates that let is useful for creating variables with block scope and avoiding unintended variable modifications, while var has function or global scope and allows redeclaration within the same scope.
It’s important to choose the appropriate declaration keyword based on the desired scoping behavior and your specific requirements.
JavaScript variable intialization:
In JavaScript, you can initialize a variable at the time of declaration by assigning it an initial value.
Initializing a variable means providing an initial value to the variable when it is created.
Here’s an example:
var myVariable = 42;
let anotherVariable = “Hello, World!”;
const PI = 3.14159;
Explanation:
1-In the example above, we have three variables: myVariable, anotherVariable, and PI.
2-Each variable is declared using the var, let, or const keyword, followed by the variable name, an equal sign (=), and the initial value assigned to the variable.
3-myVariable is initialized with the value 42, which is a number.
anotherVariable is initialized with the string “Hello, World!”.
4-PI is initialized with the value 3.14159, and since it is declared with const, it cannot be reassigned later.
4-Initializing variables at the time of declaration is not mandatory.
5-You can also declare variables without assigning an initial value, and later assign a value to them.
For example:
var myVariable;
myVariable = 10; // Assigning a value later
Explanation:
1-In this case, the variable myVariable is first declared without an initial value, and then the value 10 is assigned to it later in the code.
2-Initializing variables at the time of declaration is useful when you know the initial value that the variable should have, as it provides clarity and avoids potential errors caused by using uninitialized variables.
JavaScript variable assignment
In JavaScript, variable assignment is the process of assigning a new value to a variable. Once a variable is declared, you can assign different values to it at different points in your code.
Here’s an example:
var myVariable = 42; // Variable declaration and initialization
myVariable = 10; // Variable assignment, changing the value
console.log(myVariable); // Output: 10
Explanation:
1-In the example above, we declare a variable myVariable and initialize it with the value 42 using the var keyword. Later, we assign a new value of 10 to the myVariable variable using the assignment operator (=).
2-Finally, we log the value of myVariable to the console, which outputs 10 because the variable has been reassigned.
You can assign a new value to a variable as many times as needed throughout your code:
var x = 5;
console.log(x); // Output: 5
x = 7;
console.log(x); // Output: 7
x = “Hello”;
console.log(x); // Output: Hello
Explanation:
1-In this example, we assign the value 5 to the variable x, then reassign it to 7, and finally reassign it again to the string “Hello”.
2-Each assignment replaces the previous value, allowing the variable to hold different types of values.
It’s important to note that when you assign a new value to a variable, the old value is overwritten. If you want to perform operations using the existing value of a variable, you’ll need to include that in your assignment:
var y = 10; y = y + 5; // Incrementing y by 5 console.log(y); // Output: 15
In this example, the value of y is incremented by 5 using the previous value of y plus 5. The result, 15, is then assigned back to y.
Variable assignment is a fundamental concept in JavaScript that allows you to store and update values as your code executes.
complete code in html
Here’s an example of variable assignment in JavaScript within an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Variable Assignment in JavaScript</title>
<script>
// JavaScript code
var myVariable = 42; // Variable declaration and initialization
myVariable = 10; // Variable assignment, changing the value
console.log(myVariable); // Output: 10
</script>
</head>
<body>
<!-- HTML content -->
<h1>Variable Assignment in JavaScript</h1>
</body>
</html>
Explanation:
1-In this example, we have an HTML file with the JavaScript code embedded within a <script> tag.
2-We declare a variable myVariable using the var keyword and initialize it with the value 42.
3-Later, we assign a new value of 10 to the myVariable variable using the assignment operator (=).
4-Finally, we log the value of myVariable to the console.
When you open this HTML file in a web browser and check the browser’s developer console, you should see the output:
10
This demonstrates the concept of variable assignment in JavaScript within an HTML file.
The variable can be reassigned with a new value using the assignment operator (=), replacing the previous value.
Application: simple calculator
Here’s an example of a simple application that utilizes the concept of variable assignment in JavaScript within an HTML file.
In this example, we create a basic calculator that performs addition, subtraction, multiplication, and division operations:
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<script>
// JavaScript code
function calculate() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var operator = document.getElementById("operator").value;
var result;
if (operator === "+") {
result = num1 + num2;
} else if (operator === "-") {
result = num1 - num2;
} else if (operator === "*") {
result = num1 * num2;
} else if (operator === "/") {
result = num1 / num2;
}
document.getElementById("result").innerHTML = "Result: " + result;
}
</script>
</head>
<body>
<!-- HTML content -->
<h1>Simple Calculator</h1>
<input type="number" id="num1" placeholder="Enter a number">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" id="num2" placeholder="Enter another number">
<button onclick="calculate()">Calculate</button>
<p id="result"></p>
</body>
</html>
Explanation:
1-In this example, we have an HTML file that contains JavaScript code embedded within a <script> tag.
2-The JavaScript code defines a calculate() function that performs calculations based on the user’s input.
3-We retrieve the values of the input fields (num1 and num2) using document.getElementById() and parse them as floating-point numbers using parseFloat(). The operator is obtained from a <select> element with an id of operator.
4-We use conditional statements (if, else if) to determine the selected operator and perform the appropriate calculation based on the values of num1 and num2. The result is stored in the result variable.
5-Finally, we update the contents of the <p> element with an id of result using document.getElementById().innerHTML to display the calculated result.
When you open this HTML file in a web browser, you’ll see a simple calculator interface.
Enter two numbers, select an operator, click the “Calculate” button, and the result will be displayed below.
This example demonstrates how variable assignment can be used in building simple applications, in this case, a calculator that performs calculations based on user input.
Quiz with answers
multiple-choice quiz with answers about the lesson on JavaScript variables:
1-Which keyword is used to declare variables in JavaScript?
a) var
b) let
c) const
Answer: a) var
2-Which keyword is used to declare a read-only variable in JavaScript?
a) var
b) let
c) const
Answer: c) const
3-What are the naming rules for JavaScript variables?
a) Start with a letter or underscore
b) Can start with a number
c) Spaces are allowed
Answer: a) Start with a letter or underscore
4-Which variable declaration has block scope in JavaScript?
a) var
b) let
c) const
Answer: b) let
5-Can a variable be reassigned with a new value in JavaScript?
a) Yes
b) No
Answer: a) Yes
6-What is the difference between let and const in JavaScript?
a) let allows reassignment, while const variables are read-only.
b) let has block scope, while const has function scope.
c) let is used for numbers, while const is used for strings.
Answer: a) let allows reassignment, while const variables are read-only.
7-Which of the following variable names is invalid in JavaScript?
a) myVariable
b) 123variable
c) _privateVariable
Answer: b) 123variable
8-What happens if you declare a variable without initializing it in JavaScript?
a) It will cause an error.
b) The variable will have an initial value of null.
c) The variable will have an initial value of undefined.
Answer: c) The variable will have an initial value of undefined.
9-Which of the following is an example of dynamic typing in JavaScript variables?
a) let x = 42;
b) let x = “Hello”;
c) let x = true;
Answer: b) let x = “Hello”;
10-What is the scope of a variable declared with var in JavaScript?
a) Block scope
b) Function scope
c) Global scope
Answer: b) Function scope
11-What is the difference between let and var in terms of scope?
a) let has block scope, while var has function scope.
b) let has function scope, while var has block scope.
c) Both let and var have block scope.
Answer: a) let has block scope, while var has function scope.
12-Which of the following is true about variables declared with const?
a) They cannot be reassigned after initialization.
b) They can only store string values.
c) They have global scope.
Answer: a) They cannot be reassigned after initialization.
13-What is the purpose of assigning an initial value to a variable during declaration?
a) It is a mandatory requirement in JavaScript.
b) It helps to improve code readability.
c) It prevents the variable from being accessed.
Answer: b) It helps to improve code readability.
14-Which of the following is an example of a valid variable name in JavaScript?
a) my-variable
b) 123variable
c) _privateVariable
Answer: c) _privateVariable
15-What is the difference between let and const in terms of reassignment?
a) Both let and const can be reassigned.
b) Only let can be reassigned.
c) Only const can be reassigned.
Answer: b) Only let can be reassigned.
16-What happens if you try to access a variable that has not been declared?
a) It will throw an error.
b) It will automatically initialize the variable.
c) It will assign undefined to the variable.
Answer: a) It will throw an error.
17-Which of the following is an example of a primitive data type in JavaScript?
a) Object
b) Array
c) Number
Answer: c) Number
17-What is the difference between let and var regarding hoisting?
a) Both let and var variables are hoisted to the top of their scope.
b) Only let variables are hoisted to the top of their scope.
c) Only var variables are hoisted to the top of their scope.
Answer: c) Only var variables are hoisted to the top of their scope.
19-What is the result of dividing a number by 0 in JavaScript?
a) It will throw an error.
b) It will return 0.
c) It will return Infinity.
Answer: c) It will return Infinity.
20-Which keyword is used to declare a variable without assigning an initial value?
a) var
b) let
c) const
Answer: a) var
21-What is the scope of a variable declared with let or const in JavaScript?
a) Block scope
b) Function scope
c) Global scope
Answer: a) Block scope
22-Which keyword is used to declare a variable that cannot be reassigned after initialization?
a) var
b) let
c) const
Answer: c) const
23-Which of the following is NOT a valid JavaScript variable naming convention?
a) camelCase
b) snake_case
c) kebab-case
Answer: c) kebab-case
24-What happens if you declare a variable with the same name using var multiple times within the same function?
a) It creates multiple variables with the same name.
b) It throws an error.
c) It overwrites the previous value of the variable.
Answer: c) It overwrites the previous value of the variable.
25-Which of the following is NOT a valid way to declare and initialize a variable in JavaScript?
a) var x = 10;
b) 10 = x;
c) const y = “Hello”;
Answer: b) 10 = x;
The first video: