Variables and Data Types in JavaScript
Objective
In this tutorial, you will learn how to create variables in JavaScript, understand different data types, and how to display the values stored in these variables on the web page and in the console.
Step 1: What are Variables?
Variables are like containers that store data. You can put different types of data into variables, such as numbers, text, or even more complex objects.
Step 2: Declaring Variables
In JavaScript, you can declare variables using var, let, or const. Here’s a simple explanation of each:
var: Used in older JavaScript code; it has function scope.let: Modern way to declare variables; it has block scope (preferred overvar).const: Used to declare variables that cannot be reassigned (constant values).
Syntax:
let variableName = value;Step 3: Understanding Data Types
JavaScript variables can hold different types of data. The most common data types are:
- Numbers: Represent numerical values (e.g.,
5,3.14). - Strings: Represent text, enclosed in quotes (e.g.,
"Hello",'World'). - Booleans: Represent true/false values (e.g.,
true,false).
Step 4: Writing and Executing Code
Example 1: Declaring Variables and Displaying Them
Create a New HTML File:
- Open your text editor and create a new file. Name it
variables.html. - Copy and paste the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Variables</title>
</head>
<body>
<h1>JavaScript Variables and Data Types</h1>
<p id="number"></p>
<p id="text"></p>
<p id="pi"></p>
<p id="isJavaScriptFun"></p>
<script>
let number = 42; // Number data type
let text = "Hello, World!"; // String data type
const pi = 3.14; // Constant value
let isJavaScriptFun = true; // Boolean data type
console.log(number);
console.log(text);
console.log(pi);
console.log(isJavaScriptFun);
// Displaying the variables on the web page
document.getElementById("number").textContent = "Number: " + number;
document.getElementById("text").textContent = "Text: " + text;
document.getElementById("pi").textContent = "Value of Pi: " + pi;
document.getElementById("isJavaScriptFun").textContent = "Is JavaScript fun? " + isJavaScriptFun;
</script>
</body>
</html>Save and Open in Browser:
- Save the file and open it in your browser.
- You should see the values of the variables displayed directly on the webpage.
- Open the browser console (Right-click on the page, choose “Inspect”, then go to the “Console” tab) to see the output of
console.log().
Explanation of the Code:
let number = 42;: A variablenumberis declared and assigned the value42.let text = "Hello, World!";: A variabletextis declared and assigned the string"Hello, World!".const pi = 3.14;: A constantpiis declared and assigned the value3.14. Since it’s a constant, you cannot change this value later in the code.let isJavaScriptFun = true;: A boolean variableisJavaScriptFunis declared and assigned the valuetrue.document.getElementById("number").textContent = "Number: " + number;: This line sets the text content of the paragraph with the IDnumberto display the value of the variablenumber.
Step 5: Experimenting
- Change Values: Try changing the values of the variables and see how it affects the output both on the webpage and in the console.
- Add New Variables: Add more variables with different data types and display them using
console.log()and by adding new paragraphs to the HTML.
Common Data Types:
Here are a few more examples of data types in JavaScript:
let myName = "John Doe"; // String
let age = 18; // Number
let isStudent = true; // Boolean
let height = null; // Null (no value)
let weight; // Undefined (no value assigned)Step 6: Summary
- You learned how to declare variables using
let,var, andconst. - You learned about basic data types in JavaScript: numbers, strings, and booleans.
- You practiced displaying the values stored in variables using
console.log()and displaying them on the webpage using JavaScript.
