JavaScript Variables and Data Types

Introduction

Welcome to the world of JavaScript! In this lab, you will learn about two of the most fundamental concepts in programming: variables and data types. Variables are like containers that store information, and data types define what kind of information a variable can hold.

We will cover:

• Declaring variables using the let keyword.
• Working with three basic data types: String (text), Number (numeric values), and Boolean (true/false).
• Using the console.log() function to display output.
• Checking a variable's data type with the typeof operator.

By the end of this lab, you will have a solid foundation for working with data in JavaScript.

Declare variable with let keyword

In this step, you will learn how to declare a variable in JavaScript. We use keywords to declare variables, and one of the most common is let. The let keyword indicates that you are creating a new variable that can be reassigned later.

First, find the script.js file in the file explorer on the left side of the WebIDE. Click on it to open it in the editor.

Now, add the following line of code to script.js to declare a variable named message.

let message;

This line tells the JavaScript engine to reserve a space in memory for a variable called message. It doesn't have a value yet, which means its value is undefined by default.

Assign string value to variable

Now that you've declared a variable, let's give it a value. We'll start with the String data type. A string is a sequence of characters used to represent text. In JavaScript, strings are enclosed in single quotes (') or double quotes (").

We use the assignment operator (=) to assign a value to a variable. You can declare and assign in two separate steps, but it's more common to do it on a single line.

Modify your script.js file to declare the message variable and assign it a string value in one line. Replace the existing code with the following:

let message = "Hello, LabEx!";

This single line both creates the message variable and stores the text "Hello, LabEx!" inside it.

Assign number value and log to console

Next, let's explore the Number data type. This type is used for all numeric values, including integers (like 10) and decimal numbers (like 3.14).

In this step, you will also learn to use console.log(). This is a built-in JavaScript function that prints information to the browser's developer console. It's an essential tool for checking the values of your variables and debugging your code.

Add the following lines to the end of your script.js file. This will create a new variable userCount and print its value to the console.

let userCount = 100;
console.log(userCount);

To see the output, click on the Web 8080 tab at the top of the LabEx interface. Right-click on the page, select "Inspect", and then click the "Console" tab in the developer tools panel that appears. You should see the number 100 printed in the console.

Use boolean true or false in variable

The third fundamental data type we'll cover is the Boolean. A boolean can only have one of two values: true or false. Booleans are the foundation of logic and decision-making in programming.

Let's declare a boolean variable. Add the following lines to the end of your script.js file to create a variable named isComplete and log its value.

let isComplete = true;
console.log(isComplete);

Now, go back to the Web 8080 tab and look at the console. You will see the new output true printed below the 100 from the previous step.

Check variable type with typeof operator

Sometimes you need to know what kind of data is stored in a variable. JavaScript provides the typeof operator for this purpose. It returns a string indicating the type of the operand.

In this final step, you will use typeof to inspect the data type of each variable you have created. Add the following lines to the end of your script.js file.

console.log(typeof message);
console.log(typeof userCount);
console.log(typeof isComplete);

After adding the code, switch to the Web 8080 tab and refresh the page if necessary. Check the console. You will now see the data type for each variable printed out.

The expected output in the console will be:

string
number
boolean

Summary

Congratulations on completing this lab! You have taken your first steps into JavaScript programming by learning about variables and fundamental data types.

In this lab, you have learned how to:

• Declare variables using the let keyword.
• Assign values to variables using the assignment operator (=).
• Work with three essential data types: String, Number, and Boolean.
• Use console.log() to inspect values and debug your code.
• Use the typeof operator to determine a variable's data type.

These concepts are the building blocks for writing any JavaScript application. As you continue your learning journey, you will build upon this foundation to create more complex and interactive programs.