Back to Basics: Operators, Operators, Operators

Back to Basics: Operators, Operators, Operators:

 

This series discusses the building blocks of JavaScript. Whether you’re new to the language, you’re preparing for a technical interview, or you’re hoping to brush up on some key JS concepts, this series is for you.

Today’s post is about operators. In this post, I’ll go over some of the most common operators you’ll come across in JavaScript, but it’s by no means an exhaustive list. At the bottom of this post, you can find a link to the MDN documentation, which has information on other kinds of JavaScript operators.

What is an operator?

In JavaScript, an operator is a way to compare or assign values, or perform operations. There are many different types of operators.

There are binary operators, unary operators, and a ternary operator in JavaScript. “Binary” means that there are two values, or operands, involved, with one coming before the operator, and one coming after the operator. An example of a binary operator is 1 + 2. In this example, 1 and 2 are the operands, and + is the operator.

A “unary” operator means that there is only one operand. The operand is either before the operator, or after the operator. An example of a unary operator is x++(don’t worry if you’re unfamiliar with this syntax, we’ll talk about below).

The “ternary” operator in JavaScript involves three operands. It’s used as a shortened version of an if...else statement, and is therefore also known as a “conditional” operator. An example of a ternary operator is num >= 0 ? "Positive" : "Negative". In this example, the three operands are num >= 0"Positive", and "Negative", and the operators that separate them are ? and :.

Assignment operators

An assignment operator is a binary operator. It assigns a value to the left operand based on the value of the right operand.

The most common assignment operator is =, as in a = b. In this example, a is the left operand, and it’s assigned the value of b, which is the right operand.

There are also compound assignment operators. Compound assignment operators typically combine assignment and arithmetic operators in a shortened version. For example, a += b is a shortened version of a = a + b.

Below is a table of some of the most common assignment operators:

Operator name Shortened operator Longform version Example
Assignment operator a = b a = b x = 4;
Addition operator a += b a = a + b x += 4;
Subtraction assignment a -= b a = a – b x -= 4;
Multiplication assignment a *= b a = a * b x *= 4;
Division assignment a /= b a = a / b x /= 4;
Remainder assignment a %= b a = a % b x %= 4;

Let’s see some examples of the above operators:

let x = 10;
console.log((x += 3)); // x = 10 + 3 -> x = 13

let y = 8;
console.log((y -= 3)); // y = 8 - 3 -> y = 5

let z = 3;
console.log((z *= 3)); // z = 3 * 3 -> z = 9

let m = 6;
console.log((m /= 3)); // m = 6 / 3 -> m = 2

let n = 7;
console.log((n %= 3)); // n = 7 % 3 -> n = 1

Comparison operators

comparison operator is a binary operator. It compares the two operands, and returns true or false depending on the comparison.

One comparison operator is less than, or <. For example, 1 < 2 would return true, because 1 is less than 2.

When comparing two values of different types, JavaScript does something called type conversion. This means that if you’re comparing a string with an integer, for example, JavaScript will try to convert the string into a number so that the values can actually be compared. There are two comparison operators that don’t do type conversion: strict equal, ===, and strict not equal, !==. Strict equal and strict not equal do not convert values of different types before performing the operation.

Below is a table of comparison operators in JavaScript:

Operator name Operator symbol Operator function Example
Equal == Returns true if the operands are equal, and false if the operands are not equal. 4 == "4"(returns true)
Not equal != Returns true if the operands are not equal, and false if the operands are equal. 4 != "5"(returns true)
Strict equal === Returns true if the operands are of the same type and are equal, and false if the operands are the same type and are not equal or are different types. 4 === 4(returns true)
Strict not equal !== Returns true if the operands are the same type but are not equal or are different types, and false if the operands are of the same type and are equal. 4 !== "4"(returns true)
Greater than > Returns true if the left operand is greater than the right operand, and false if the left operand is less than or equal to the right operand. 4 > 3(returns true)
Greater than or equal >= Returns true if the left operand is greater than or equal to the right operand, and falseif the left operand is less than the right operand. 4 >= "4"(returns true)
Less than < Returns true if the left operand is less than the right operand, and false if the left operand is greater than or equal to the right operand. 4 < "5"(returns true)
Less than or equal <= Returns true if the left operand is less than or equal to the right operand, and false if the left operand is greater than the right operand. 4 <= 7(returns true)

Let’s see some examples of the above operators:

let x = 5;
let y = 2;
let z = 7;
let m = "5";
let n = "6";

x == m; // 5 == "5" -> true
x != y; // 5 != 2 -> true
x === z; // 5 === 7 -> false
x !== m; // 5 !== "5" -> true
x > y; // 5 > 2 -> true
x >= z; // 5 >= 7 -> false
x < n; // 5  true
x <= m; // 5  true

Arithmetic operators

An arithmetic operator can be a binary or unary operator. As a binary operator, it takes two numerical values as the operands, performs an arithmetic operation, and returns a numerical value. As a unary operator, it takes one numerical value, performs an operation, and returns a numerical value.

One arithmetic operator is the plus sign, +, which is used to add two numbers. For example, 4 + 6 would return 10. Below is a table of some of the arithmetic operators in JavaScript:

Operator name Operator symbol Operator function Example
Addition + Binary operator. Returns the result of adding two operands. 4 + 6 returns 10
Subtraction - Binary operator. Returns the result of subtracting one operand from another. 5 - 2 returns 3
Multiplication * Binary operator. Returns the result of multiplying two operands. 3 * 4 returns 12
Division / Binary operator. Returns the result of dividing one operand by another. 9 / 3 returns 3
Remainder % Binary operator. Returns the integer remainder of dividing one operand by another. 10 % 3 returns 1
Increment ++ Unary operator. Adds 1 to the operand. If it comes before the operand (++z), it returns the value of the operand afteradding 1. If it comes after the operand (z++), it returns the value of the operand before adding 1. If z = 4++z returns 5, and z++ returns 4.
Decrement Unary operator. Subtracts 1 from the operand. If it comes before the operand (--z), it returns the value of the operand after subtracting 1. If it comes after the operand (z--), it returns the value of the operand before subtracting 1. If z = 4--z returns 3, and z-- returns 4.
Exponentiation ** Binary operator. Returns the result of raising one operand to the power of the other operand. 5 ** 2 returns 25

Let’s see some examples of the above operators:

let x = 3;
let y = 5;
let z = 6;
let a = 2;
let b = 7;

console.log(x + y); // 3 + 5 -> 8
console.log(y - x); // 5 - 3 -> 2
console.log(x * z); // 3 * 6 -> 18
console.log(z / x); // 6 / 3 -> 2
console.log(y % x); // 5 % 3 -> 2
console.log(a++); // 2
console.log(--b); // 6
console.log(y ** x); // 5 * 5 * 5 -> 125

Logical operators

logical operator can be a binary operator or a unary operator. As a binary operator, it typically takes two Boolean values, evaluates them, and returns a Boolean value.

The unary logical operator in JavaScript is the logical NOT. It takes one operand and evaluates if it can be converted to the Boolean value true.

Below is a table of logical operators in JavaScript:

Operator name Operator symbol Operator function Example
Logical AND && Returns true if both operands are true, and returns false if at least one of the operands is false. true && true (returns true) true && false(returns false)
Logical OR || Returns true if at least one operand is true, and returns false if both operands are false. `true
Logical NOT ! Returns false if the operand can be converted to true, and returns true if the operand cannot be converted to true. !true (returns false) !false (returns true)

Let’s see some examples of the above operators:

true && true; // true
true && false; // false
false && false; // false

true || true; // true
true || false; // true
false || false; // false

!true; // false
!false; // true

String operators

string operator is a binary operator. It takes two strings and combines them into a single string using +, which in this case is called the concatenation operator. String concatenation means combining two string values together.

An example of a string operator is console.log("Happy " + "birthday"), which console logs the string "Happy birthday".

There is also a shortened version of the string operator, which is +=. For example:

let string1 = "birth";
let string2 = "day";
console.log(string1 += string2) // "birthday"

Ternary (conditional) operator

conditional operator, or ternary operator, is used with three operands. It’s used to evaluate if a condition is true, and then returns one of two values depending on that.

The ternary operator is structured like the following:

condition ? expressionIfTrue : expressionIfFalse

Ternary operators are discussed at length in this post.

This post just went over some of the more common operators you’ll use and come across in JavaScript. There are many more operators, including bitwise operators and relational operators, and I encourage you to learn more about them in the MDN documentation here.

from Tumblr https://generouspiratequeen.tumblr.com/post/641576006627590144

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s