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 by4
.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 in8
, which is then added to3
to produce11
.
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
, andage
.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
andlastName
.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 thePerson
constructor function and the arguments'John'
and 'Doe'.This(
new
) creates a new object with thefirstName
andlastName
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