JavaScript Operators and Expressions

Introduction

Welcome to the "JavaScript Operators and Expressions" lab. In this hands-on session, you will learn about the fundamental building blocks of JavaScript programming: operators and expressions. Operators are special symbols used to perform operations on values (operands), and an expression is any unit of code that resolves to a value.

You will start with basic arithmetic operators like addition, subtraction, multiplication, and division. Then, you will explore how the addition operator can also be used to combine strings, a process known as concatenation. Finally, you will learn about the convenient increment operator. By the end of this lab, you will be able to perform basic data manipulation in JavaScript.

Use addition operator on numbers

In this step, you will learn how to use the addition operator (+) to perform addition on numbers. This is one of the most common arithmetic operations.

Your lab environment is already set up with an index.html file and a script.js file inside the ~/project directory. We will write all our JavaScript code in the script.js file.

First, locate the script.js file in the file explorer on the left side of your screen. Click on it to open it in the editor.

Now, add the following code to script.js. This code declares two number variables, adds them together, and uses console.log() to print the result to the browser's developer console.

// Step 1: Addition
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
console.log("The sum is:", sum);

After adding the code, save the file by pressing Ctrl+S.

To see the output, navigate to the Web 8080 tab at the top of the interface. Then, open the developer console by pressing F12 or right-clicking on the page, selecting "Inspect", and then clicking the "Console" tab. You should see the message The sum is: 15.

Apply subtraction and multiplication operators

In this step, you will apply the subtraction (-) and multiplication (*) operators. These work just like the addition operator but perform different calculations.

Continue editing the ~/project/script.js file. Add the following lines of code below your existing code to calculate the difference and product of the same two numbers.

// Step 2: Subtraction and Multiplication
let difference = num1 - num2;
console.log("The difference is:", difference);

let product = num1 * num2;
console.log("The product is:", product);

Save the file again (Ctrl+S). Refresh the Web 8080 tab (you can use the refresh button within the tab). The developer console will now show the results for addition, subtraction, and multiplication.

Implement division and modulus operators

In this step, we will explore the division (/) and modulus (%) operators. The division operator performs standard division, while the modulus operator returns the remainder of a division. This is useful for tasks like determining if a number is even or odd.

Add the following code to the end of your ~/project/script.js file.

// Step 3: Division and Modulus
let quotient = num1 / num2;
console.log("The quotient is:", quotient);

let remainder = num1 % 3; // Using 3 to get a non-zero remainder
console.log("The remainder of 10 divided by 3 is:", remainder);

Save the file and refresh the Web 8080 tab. Check the console to see the new output for division and the remainder. You should see that the quotient is 2 and the remainder is 1.

Concatenate strings using plus operator

In this step, you'll see a different use for the + operator: string concatenation. When used with strings, the + operator joins them together to create a new, longer string.

Let's create two string variables and concatenate them. Add this code to the end of ~/project/script.js.

// Step 4: String Concatenation
let firstName = "Hello";
let lastName = "World";
let fullName = firstName + " " + lastName;
console.log(fullName);

In the example above, we are joining firstName, a space " ", and lastName to form a complete phrase.

After saving the file, refresh the Web 8080 tab. The console will now display the concatenated string: Hello World.

Increment variable with ++ operator

In this final step, you will learn about the increment operator (++). This is a unary operator, meaning it works on a single operand. It's a convenient shorthand for adding 1 to a numeric variable, which is a very common operation in loops and counters.

Add the following code to the end of ~/project/script.js to see it in action.

// Step 5: Increment Operator
let counter = 0;
counter++; // This is equivalent to counter = counter + 1;
console.log("The counter value is:", counter);

Save the file one last time and refresh the Web 8080 tab. The console will show the final value of the counter, which should be 1.

Summary

Congratulations on completing this lab!

In this lab, you have learned the fundamentals of JavaScript operators and expressions. You practiced using:

• Arithmetic operators for basic math: + (addition), - (subtraction), * (multiplication), / (division), and % (modulus).
• The + operator for string concatenation to join text together.
• The ++ increment operator as a shortcut to increase a number's value by one.

These operators are essential building blocks in JavaScript and are used in virtually every program. You are now ready to tackle more complex logic and functionality in your future projects.