JavaScript Operators

20 January, 2023

Contributors

ShowwcaseHQ

@showwcasehq

Operators

There are several types of operators in JavaScript, including:

Arithmetic operators: These operators perform arithmetic on numbers, such as addition (+), subtraction (-), multiplication (*), and division (/).
Comparison operators: These operators compare two values and return a boolean value based on the comparison, such as equal to (==), not equal to (!=), greater than (>), and less than (<).
Logical operators: These operators perform logical operations, such as AND (&&), OR (||), and NOT (!).
Assignment operators: These operators assign a value to a variable, such as equal (=), addition assignment (+=), and subtraction assignment (-=).
Conditional (ternary) operator: This operator is used to perform a conditional operation, where a value is assigned based on a given condition. It is written as a question mark ? followed by a colon : .
Spread operator: This operator is used to spread an array's elements or object's elements in places where multiple elements or variables are expected. It is written as three dots (...).
Rest operator: This operator gathers multiple elements or variables into an array. It is written as three dots (...) preceded by an ellipsis.
Unary operators operate on a single operand, such as negation (-) and increment (++).
Binary operators: These operators operate on two operands: addition (+) and subtraction (-).

Arithmetic Operators in Javascript

In JavaScript, there are several arithmetic operators that can be used to perform arithmetic on numbers:

Addition (+): This operator adds two numbers together.
Subtraction (-): This operator subtracts one number from another.
Multiplication (*): This operator multiplies two numbers together.
Division (/): This operator divides one number by another.
Modulus (%): This operator returns the remainder of the division of one number by another.
Increment (++): This operator increases a number by one.
Decrement (--): This operator decreases a number by one.

Here is an example of how these operators can be used in JavaScript:

let x = 5;
let y = 2;

console.log(x + y); // 7
console.log(x - y); // 3
console.log(x * y); // 10
console.log(x / y); // 2.5
console.log(x % y); // 1

x++;
console.log(x); // 6

y--;
console.log(y); // 1

Comparison Operators in Javascript

In JavaScript, several comparison operators can be used to compare two values and return a boolean value based on the comparison:

Equal to (==): This operator returns true if the values on either side of the operator are equal.
Not equal to (!=): This operator returns true if the values on either side of the operator are not equal.
Strict equal to (===): This operator returns true if the values on either side of the operator are equal and have the same type.
Strict not equal to (!==): This operator returns true if the values on either side of the operator are not equal or do not have the same type.
Greater than (>): This operator returns true if the value on the left side of the operator is greater than the value on the right side.
Less than (<): This operator returns true if the value on the left side of the operator is less than the value on the right side.
Greater than or equal to (>=): This operator returns true if the value on the left side of the operator is greater than or equal to the value on the right side.
Less than or equal to (<=): This operator returns true if the value on the left side of the operator is less than or equal to the value on the right side.

Here is an example of how these operators can be used in JavaScript:

let x = 5;
let y = '5';

console.log(x == y); // true
console.log(x != y); // false
console.log(x === y); // false
console.log(x !== y); // true
console.log(x > y); // false
console.log(x < y); // false
console.log(x >= y); // true
console.log(x <= y); // true

Logical Operators in Javascript

In JavaScript, three logical operators can be used to perform logical operations:

AND (&&): This operator returns true if the values on both sides of the operator are true.
OR (||): This operator returns true if the value on either side of the operator is true.
NOT (!): This operator returns the opposite of a boolean value. If the value is true, it returns false. If the value is false, it returns true.

Here is an example of how these operators can be used in JavaScript:

let x = true;
let y = false;

console.log(x && y); // false
console.log(x || y); // true
console.log(!x); // false
console.log(!y); // true

Logical operators are often used in combination with comparison operators and/or other logical operators to create complex boolean expressions.

Assignments Operators in Javascript

In JavaScript, several assignment operators can be used to assign a value to a variable:

Equal (=): This operator assigns a value to a variable.
Addition assignment (+=): This operator adds a value to a variable and assigns the result to the variable.
Subtraction assignment (-=): This operator subtracts a value from a variable and assigns the result to the variable.
Multiplication assignment (*=): This operator multiplies a variable by a value and assigns the result to the variable.
Division assignment (/=): This operator divides a variable by a value and assigns the result to the variable.
Modulus assignment (%=): This operator assigns the remainder of the division of a variable by a value to the variable.

Here is an example of how these operators can be used in JavaScript:

let x = 5;
let y = 2;

x += y;
console.log(x); // 7

x -= y;
console.log(x); // 5

x *= y;
console.log(x); // 10

x /= y;
console.log(x); // 5

x %= y;
console.log(x); // 1

Assignment operators are often used to update the value of a variable concisely. For example, the code x += y is equivalent to x = x + y.

JavaScript Conditional (ternary) operator

In JavaScript, the conditional (ternary) operator is a shorthand way of performing a conditional operation, where a value is assigned based on a given condition. It is written as a question mark ? followed by a colon :.

Here is the syntax for the conditional operator:

condition ? value1 : value2

If condition is true, the operator returns value1. If condition is false, the operator returns value2.

Here is an example of how the conditional operator can be used in JavaScript:

let x = 5;
let y = 2;

let max = (x > y) ? x : y;
console.log(max); // 5

In this example, the conditional operator compares the values of x and y and assigns the greater value to the max variable. If x is greater than y, max is assigned the value of x. If y is greater than x, max is assigned the value of y.

The conditional operator is often used as a shorthand way of writing an if-else statement. For example, the code above is equivalent to the following if-else statement:

let x = 5;
let y = 2;

let max;
if (x > y) {
  max = x;
} else {
  max = y;
}
console.log(max); // 5

JavaScript Spread Operator

In JavaScript, the spread operator (written as three dots: ...) is used to spread the elements of an array or object in places where multiple elements or variables are expected.

Here is an example of how the spread operator can be used with an array:

let numbers = [1, 2, 3];

console.log(...numbers); // 1 2 3

let moreNumbers = [4, 5, 6];

let allNumbers = [...numbers, ...moreNumbers];
console.log(allNumbers); // [1, 2, 3, 4, 5, 6]

function sum(x, y, z) {
  return x + y + z;
}

console.log(sum(...numbers)); // 6

In this example, the spread operator is used to spread the elements of the numbers array in places where multiple elements are expected. It is also used to combine two arrays into a single array.

The spread operator can also be used with objects, like this:

let person = {
  name: 'John',
  age: 30
};

let newPerson = {
  ...person,
  gender: 'male'
};
console.log(newPerson); // { name: 'John', age: 30, gender: 'male' }

In this example, the spread operator is used to create a new object that contains all the properties of the person object and an additional property.

The spread operator is a useful tool for working with arrays and objects in JavaScript. It can be used to create a new array or object based on an existing one, or to spread the elements of an array or object in places where multiple elements or variables are expected.

JavaScript Rest Operator

In JavaScript, the rest operator (written as three dots: ... preceded by an ellipsis) is used to gather multiple elements or variables into an array.

Here is an example of how the rest operator can be used in a function definition:

function sum(...numbers) {
  let result = 0;
  for (let number of numbers) {
    result += number;
  }
  return result;
}

console.log(sum(1, 2, 3, 4, 5)); // 15

In this example, the rest operator gathers all the arguments passed to the sum function into an array called numbers. The function then iterates over the numbers array and calculates the elements' sum.

The rest operator can also be used in destructuring assignments:

let numbers = [1, 2, 3, 4, 5];

let [first, second, ...others] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(others); // [3, 4, 5]

In this example, the rest operator is used to assign the first two elements of the numbers array to the variables first and second, and the remaining elements to the others array.

The rest operator is a useful tool for working with arrays in JavaScript. It allows you to gather multiple elements or variables into an array and work with them as a single entity.

Unary Operators in Javascript

In JavaScript, unary operators are operators that operate on a single operand. There are several unary operators in JavaScript, including:

Negation (-): This operator negates a numeric value. For example, 5 negates the value 5 and returns -5.
Increment (++): This operator increases a numeric value by one. For example, x++ increases the value of x by one.
Decrement (--): This operator decreases a numeric value by one. For example, x-- decreases the value of x by one.
Logical NOT (!): This operator negates a boolean value. For example, !true returns false and !false returns true.
Typeof: This operator returns a string representing the value type. For example, typeof 5 returns 'number' and typeof 'hello' returns 'string'.

Here is an example of how these operators can be used in JavaScript:

let x = 5;

console.log(-x); // -5

console.log(x++); // 5
console.log(x); // 6

console.log(x--); // 6
console.log(x); // 5

console.log(!true); // false
console.log(!false); // true

console.log(typeof 5); // 'number'
console.log(typeof 'hello'); // 'string'

Binary Operators in Javascript

In JavaScript, binary operators operate on two operands. There are several binary operators in JavaScript, including:

Addition (+): This operator adds two numeric values together. For example, 5 + 2 returns 7.
Subtraction (-): This operator subtracts one numeric value from another. For example, 5 - 2 returns 3.
Multiplication (*): This operator multiplies two numeric values together. For example, 5 * 2 returns 10.
Division (/): This operator divides one numeric value by another. For example, 5 / 2 returns 2.5.
Modulus (%): This operator returns the remainder of the division of one numeric value by another. For example, 5 % 2 returns 1.
Exponentiation (): This operator raises a numeric value to a power. For example, **5 ** 2 returns 25.
String concatenation (+): This operator concatenates two strings. For example, 'hello' + 'world' returns 'helloworld'.
Comparison (==, !=, ===, !==, >, <, >=, <=): These operators compare two values and return a boolean value based on the comparison.

Here is an example of how these operators can be used in JavaScript:

let x = 5;
let y = 2;

console.log(x + y); // 7
console.log(x - y); // 3
console.log(x * y); // 10
console.log(x / y); // 2.5
console.log(x % y); // 1
console.log(x ** y); // 25

let s1 = 'hello';
let s2 = 'world';

console.log(s1 + s2); // 'helloworld'

console.log(x == y); // false
console.log(x != y); // true
console.log(x === y); // false
console.log(x !== y); // true
console.log(x > y); // true
console.log(x < y); // false
console.log(x >= y); // true
console.log(x <= y); // false

Comma Operator in Javascript

In JavaScript, the comma operator (,) is used to separate multiple expressions in a single statement. The expressions are evaluated from left to right, and the value of the last expression is returned.

Here is an example of how the comma operator can be used in JavaScript:

let x = 5;
let y = 2;

let result = (x++, y++, x + y);

console.log(result); // 9

In this example, the comma operator separates three expressions: x++, y++, and x + y. The first two expressions increase the values of x and y by one, and the third expression calculates the sum of x and y. The value of the third expression, 9, is returned as the result of the overall expression.

The comma operator can include multiple expressions in places where a single expression is expected, such as an if statement or a loop. However, it is generally considered good practice to avoid using the comma operator in favor of using separate statements or combining multiple expressions into a single expression using parentheses

javascript

JavaScript Operators

Operators

Arithmetic Operators in Javascript

Comparison Operators in Javascript

Logical Operators in Javascript

Assignments Operators in Javascript

JavaScript Conditional (ternary) operator

JavaScript Spread Operator

JavaScript Rest Operator

Unary Operators in Javascript

Binary Operators in Javascript

Comma Operator in Javascript

More Articles