Skip to main content

JavaScript Precedence Operations

Operator precedence in JavaScript determines the order in which operators are evaluated in an expression. This is important because it can affect the final result of the expression.

JavaScript has a set of rules for operator precedence that dictate which operators are evaluated first. Here are some of the most commonly used operators in JavaScript, listed in order of their precedence (highest to lowest):

The Grouping operator: ()​

Parentheses are used to group expressions and force evaluation of the expression inside the parentheses first.

let result = (3 + 2) * 4;
console.log(result); // 20

In this example

  • The grouping operator is used to group the addition expression (3 + 2) together before it is multiplied by 4.

  • Without the grouping operator, the expression would be evaluated from left to right.

    Resulting in a different result:

let result = 3 + 2 * 4;
console.log(result); // 11

In this case:

  • The multiplication operator has a higher precedence than the addition operator, so 2 * 4 is evaluated first, resulting in 8, which is then added to 3 to produce 11.

The Member Access: . and []​

Used to access object properties and array elements respectively.

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
};

console.log(person.firstName); // "John"
console.log(person["lastName"]); // "Doe"

In this example:

  • We have an object called person with three properties: firstName, lastName, and age.

  • We can access the values of these properties using both the dot notation and the square bracket notation.

  • When using the square bracket notation, we enclose the property name in quotes and use it as an index to access the property, like this: person['lastName'].

  • This([]) notation is generally preferred when the property name contains special characters or is a variable that is not known until runtime.

let propertyName = "age";
console.log(person[propertyName]); // 30

The New Expression: new​

Creates an instance of an object.

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.fullName = function () {
    return this.firstName + " " + this.lastName;
  };
}

let john = new Person("John", "Doe");
console.log(john.fullName()); // "John Doe"

In this example

  • We define a constructor function called Person that takes two arguments: firstName and lastName.

  • Inside the constructor function, we create three properties of the object using the this keyword: firstName, lastName, and a function called fullName.

  • To create an instance of the Person object, we use the new operator followed by the Person constructor function and the arguments 'John' and 'Doe'.

  • This(new) creates a new object with the firstName and lastName properties set to 'John' and 'Doe', respectively.

The Increment and Decrement: ++, -- -​

increases or decreases a variable value by 1.

let x = 5;
let y = ++x;
console.log(x); // 6
console.log(y); // 6

The Typeof: typeof​

Returns the type of a value.

console.log(typeof "Hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (note: this is a bug in JavaScript)
console.log(typeof {}); // "object"
console.log(typeof function () {}); // "function"

The Logical NOT: !​

Negates a boolean value.

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

Multiplication, Division, and Remainder: *, /, %​

Performs arithmetic operations on numbers.

console.log(2 * 3); // 6
console.log(10 / 2); // 5
console.log(10 % 3); // 1

The Addition and Subtraction: +, -​

Performs arithmetic operations on numbers.

console.log(2 + 3); // 5
console.log(10 - 2); // 8

The Relational Operators: <, <=, >, >=​

Compares values and returns a boolean.

console.log(2 < 3); // true
console.log(3 > 5); // false
console.log(10 <= 10); // true
console.log(5 >= 7); // false

The Equality Operators: ==, !=, ===, !==​

Compares values for equality and returns a boolean.

console.log(2 === 2); // true
console.log(2 === "2"); // false (the types are different)
console.log(true === 1); // false (the types are different)

The Logical AND: &&​

Returns true if both operands are true.

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

The Logical OR: ||​

Returns true if at least one operand is true.

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

The Conditional Operator: ? :​

Returns one of two values based on a condition.

let x = 5;
let y = x > 3 ? "x is greater than 3" : "x is not greater than 3";
console.log(y); // "x is greater than 3"

The Assignment Operators: =, +=, -= etc.​

Assigns a value to a variable.

let x = 5;
x += 3; // equivalent to x = x + 3
x -= 2; // equivalent to x = x - 2
x *= 4; // equivalent to x = x * 4
x /= 2; // equivalent to x = x / 2
x %= 3; // equivalent to x = x % 3
x **= 2; // equivalent to x = x ** 2
x <<= 2; // equivalent to x = x << 2
x >>= 1; // equivalent to x = x >> 1
x >>>= 1; // equivalent to x = x >>> 1
x &= 3; // equivalent to x = x & 3
x |= 5; // equivalent to x = x | 5
x ^= 2; // equivalent to x = x ^ 2