Javascript Operators

Mostly used operators in javascript are Assignment operators, Arithmetic operators, Comparison operators and Logical Operators.

Operands are parts of instruction which which are manipulated by operators.

Assignment operators are used to assign values or properties. Values may be of any datatype including functions.

const myArray = [3, "apple", 4, 12];
const pi = 3.14;
const x = y = 5;  // const x = (y = 5); y must be defined before.

Arithmetic operators [ + , — , / , * and % ] takes numbers as operands to operate. All operators first coerces operands to numbers except Addition Operator sometimes concatenates.

let a = 4; let b = 99; let c = 33;

let sum = a+b+c;  // All are added and assigned to sum;
let added = String(a)+b+c; // All are concatenated.
let diff = b-c;   // It substract right operand from left
let mult = a*b;
let remainder = b%a // It divides b by a and returns remainder

Comparison operators [ > , < , == , === , != and !== ] take two operands to compare and return Boolean. In loose comparison, Javascript try to coerce different datatypes into common one then compare it. In strict comparison javascript also perform datatype check.

// >[Greater than] operator returns true if left operand is greater than right one else return false.
// < [Less than] operator returns true if left operand is less than right one
console.log(3 > 3); // false
console.log(5 > 3); // true

let a = 3;
let b = "3";
a == b; // true    a != b // false
a === b; // false    a !== b // true
// Strict comparison avoid type coercion issue.

Logical Operators operates on Booleans. It coerces to boolean datatype which sometimes creates confusion causing short circuit.

OR checks from left to right, for each operand it converts to Boolean and if any found true it returns operand, else return last operand.

Get Sagar Kumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

AND checks from left to right, for each operand it converts to Boolean and if any found false return operand, else return last operand.

! converts operand to Boolean and return inverse.

// Note: Precedence of AND is higher than OR.
let myName = "" || "SK" || 55 || "abcd" // myName is referenced "SK" now
let myAge = NaN || "" || 0 || false || null || undefined // myAge is referenced to undefined

let myName = "abcd" && "pqrs" && 22 && [] && "" && {} // myName is referrenced to " "
let myName = "abcd" && "pqrs" && 22 && [] && {} // myName is now {}

Some less used Important Operators

Optional Chaining operator [?.] returns undefined if reference is null.

const user = {
  name: "Alice",
};
console.log(user.address.street);  // TypeError
console.log(user?.address?.street); // undefined
console.log(user?.address?.street ?? "No Address Provided"); // No Address Provided
// Generally it is used to avoid Errors from Missing data from API

New operator creates instance of constructor.

const user1 = new User('Alice');
// new creates a new object    // links new object to constructor prototype
// Binds this to object         // Returns new Object

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car("Eagle", "Talon TSi", 1993);

console.log(car1.make); // Expected output: "Eagle"

Increment/ Decrement operator increases or decreases operand by one.

let x = 3;
const y = x++;      // y is assigned 3 then added 1
console.log(`x:${x}, y:${y}`);  // output: "x:4, y:3"

let a = 3;
const b = --a;
console.log(`a:${a}, b:${b}`);  // output: "a:4, b:2"

The delete operator is used to remove property from Object. It returns true if the property it’s targeting is gone (or if it never existed).

const employee = {
  firstName: "Maria",
  lastName: "Sanchez",
};
delete employee.firstName;  // delete object[property]
console.log(employee.firstName);  // Expected output: undefined
// Note: It can't delete objects, variables defined with var, let and const and non configurable properties and return false.