Operators

So Many Operators! JavaScript operators are symbols or keywords used to perform operations values. They allow you to manipulate data and make decisions in your JavaScript code. You have already used the typeof keyword operator and the = assignment of value symbol, but there are a lot more operators! In this section, we will focus on Arithmetic, Comparison, and Logical Operators.

Arithmetic Operators¶

These operators perform basic mathematical operations, for numeric calculations, and also to join strings together.

// Arithmetic Operators 
5 + 3; // 8 
10 - 4; // 6 
6 * 7; // 42 
20 / 5; // 4 
15 % 4; // 3 
0++; // 1 
10--; // 9 
5 + 3; // 8 
100 - 25; // 75 
3 * 4; // 12

Arithmetic Operators with Strings:

• Concatenation with + Operator: The most common arithmetic operation with strings is concatenation, achieved using the + operator. When used between strings, it concatenates or joins them. For example, "Hello " + "World" results in "Hello World".

• Other Arithmetic Operators: Operations like -, *, /, etc., on strings typically result in NaN (Not a Number), as these operations don't have a logical string equivalent. For example, "Hello" - "World" results in NaN.

  ```javascript
  // Arithmatic Operator Usage With Strings and Type Cohersion 
  "Hello, " + "world!"; // result is "Hello, world!" 
  "JavaScript" + " is" + " fun"; // result is "JavaScript is fun" 
  "3" + "5"; // result is "35" (concatenation, not addition) 
  "abc" * 3; // result is NaN (Not-a-Number) 
  "abc" + 123; // result is "abc123" (number is converted to a string) 
  "Hello, " + true; // result is "Hello, true" (the boolean is converted to a string)
  ```

Comparison Operators¶

Comparison operators compare values and return a Boolean (true or false). They are used to make decisions and control the flow of your code. You will study flow control in the next module.

// Comparison Operators 
5 == 10; // false 
5 != 10; // true 
 
5 === 10; // false 
5 !== 10; // true 
 
5 == '5'; // true 
5 != '5'; // false 
 
5 === '5'; // false 
5 !== '5'; // true 
 
5 > 10; // false 
5 < 10; // true 
 
5 >= 10; // false 
5 <= 10; // true

Comparison Operators with Strings:

• Alphabetical Ordering: Comparison operators (<, >, <=, >=) are used to compare strings based on standard lexicographical ordering, using Unicode values. This means strings are compared alphabetically, and character by character. For example, "Apple" < "Banana" evaluates to true because "Apple" comes before "Banana" in alphabetical order. "A" comes before "B" in the alphabet and in Unicode.

  Unicode is a universal character encoding standard that provides a unique number for every character, regardless of the platform, program, or language. This comprehensive system is designed to represent text in all the written languages of the world, as well as many symbols, emojis, and historic scripts. Unicode covers a vast range of characters and assigns each one a code point, which is a number in the format U+XXXX, where "XXXX" represents a hexadecimal value. For instance, the Unicode value for the uppercase letter "A" is U+0041 and "B" is represented by the code point U+0042. This standardization allows for the consistent encoding, representation, and handling of text, ensuring that digital text is accessible and consistent across different systems and devices. JavaScript strings are Unicode-based, allowing them to include characters from virtually any writing system.

• Equality Operators: The == and === operators can be used to check if two strings are exactly the same. For instance, "Hello" === "Hello" results in true.

• Case Sensitivity: It's important to note that these comparisons are case-sensitive, meaning "a" and "A" are considered different (with "A" typically coming before "a" in Unicode order).

In summary, while arithmetic operations with strings are limited to concatenation, comparison operators open up a broad range of possibilities, allowing for alphabetical sorting and ordering based on Unicode values. This flexibility makes string manipulation in JavaScript both powerful and convenient.

// Comparison Operators Usage With Strings 
"apple" == "banana"; // false 
"apple" != "banana"; // true 
"apple" === "banana"; // false 
"apple" !== "banana"; // true 
"apple" > "banana"; // false 
"apple" < "banana"; // true 
"apple" >= "banana"; // false 
"apple" <= "banana"; // true
 

Logical Operators¶

Logical operators are used to combine or manipulate Boolean values. They include AND (&&), OR (||), and NOT (!) to make logical decisions in your code.

/ Logical AND (&&) 
true && true; // true 
true && false; // false 
false && true; // false 
false && false; // false 
 
// Logical OR (||) 
true || true; // true 
true || false; // true 
false || true; // true 
false || false; // false 
 
// Logical NOT (!) 
!true; // false 
!false; // true 
 
// Combining Logical Operators 
(true && true) || (false && true); // true 
(true || false) && !(false || true); // false

Now let's look at some code examples that combine many of these operators:

let a = 10; 
let b = 5; 
 
// Combining Arithmetic and Comparison Operators 
let result = (a + b) > 15; // false, because 10 + 5 is not greater than 15

let c = 4; 
let d = 10; 
 
// Check if both a squared is less than 25 and b is not equal to 10 
let result = (c * c < 25) && (d !== 10); // false

let x = 7; 
let y = 3; 
 
// Expression combining arithmetic, comparison, and logical operators 
let expressionResult = ( (x * y) < 20 ) || ( (x - y) > 2 ); 
console.log(expressionResult); // true

let score = 85; 
 
// Nested use of comparison and logical operators 
let isPass = (score >= 50) && ( (score % 10 === 0) || (score % 10 === 5) ); 
console.log("Pass status:", isPass); // Pass status: true

let x = 8; 
let y = 3; 
 
// Check if the sum of x and y multiplied by y is greater than the difference squared 
let complexCondition = (x + y) * y > (x - y) * (x - y); // true

let num = 45; 
 
// Check if num is divisible by 5 and greater than 30 
let check = (num % 5 === 0) && (num > 30); // true

JAVASCRIPT

let value = 75; 
let limit1 = 50; 
let limit2 = 100; 
 
// Check if value is more than limit1 and less than half of limit2 
let inRange = (value > limit1) && (value < limit2 / 2); // false

let age = 20; 
let minAge = 18; 
 
// Check if age is greater than or equal to minAge and age is an even number 
if ((age >= minAge) && (age % 2 === 0)) { 
   console.log("Age is even and above the minimum age."); 
} else { 
   console.log("Condition not met."); 
}

Practice Problems¶

Objective: Write JavaScript code to evaluate som values using arithmetic, comparison, and logical operators.

1. Declare two variables, x and y, and assign them integer values. Example: let x = 5; let y = 7;

2. Choose an arithmetic operation for x. It could be squaring it, doubling it, etc. Example: Square x.

3. Choose a comparison operation for y. It could be checking if y is greater than, less than, or equal to a certain value. Example: Check if y is greater than 10.

4. Use a logical operator (&& or ||) to combine the conditions from steps 2 and 3. Example: Use logical AND (&&) to combine the conditions.

5. Write the final expression that combines the arithmetic operation on x, the comparison operation on y, and the logical operator. Example: (x * x < 30) && (y > 10)

6. Store the result of the expression in a variable and log the result to the console. Example: let result = (x * x < 30) && (y > 10); console.log(result);

7. Add a comment describing what the code is checking. Example: // Check if x squared is less than 30, and also check if y is greater than 10. Answer:

// Initialize variables 
let x = 5; 
let y = 7; 
 
// Check if x squared is less than 30 and y is greater than 10 
let result = ( (x * x) < 30 ) && (y > 10); // Replace with your expression 
console.log(result); // false

Practice With AI¶

Use the prompt below to get even more practice problems from any Large Language Model / AI of your choice:

Act as my JavaScript tutor. I am a beginner learning about arithmetic, comparison, and logical operators in JavaScript for the first time. Generate 10 practice problems that involve using these operators based on the extracurricular interest or hobby of [insert your interest or hobby here]. Only provide the problem statements, not the answers.

🎉🎉🎉 Congrats, you've completed your third lesson! When you're ready, you can move on to the next lesson. 🎉🎉🎉