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 inNaN
(Not a Number), as these operations don't have a logical string equivalent. For example,"Hello" - "World"
results inNaN
.```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 totrue
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 intrue
. -
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.
-
Declare two variables,
x
andy
, and assign them integer values. Example:let x = 5; let y = 7;
-
Choose an arithmetic operation for
x
. It could be squaring it, doubling it, etc. Example: Squarex
. -
Choose a comparison operation for
y
. It could be checking ify
is greater than, less than, or equal to a certain value. Example: Check ify
is greater than 10. -
Use a logical operator (
&&
or||
) to combine the conditions from steps 2 and 3. Example: Use logical AND (&&
) to combine the conditions. -
Write the final expression that combines the arithmetic operation on
x
, the comparison operation ony
, and the logical operator. Example:(x * x < 30) && (y > 10)
-
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);
-
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. 🎉🎉🎉