JavaScript String, Comparison, and Other Operators

String operators in JavaScript mainly involve concatenation using the + operator. When used with strings, the + operator concatenates the operands, converting them to strings if necessary. Let's look at some examples:

let greetings = "Hi";
console.log(greetings + " " + "Alice"); // Output: Hi Alice

let sentence = "Happy New Year ";
let newSentence = sentence + 10191;
console.log(newSentence); // Output: Happy New Year 10191
console.log(typeof newSentence); // Output: string

In the above examples, we concatenate strings using the + operator. If one of the operands is not a string, JavaScript automatically converts it to a string before concatenation.

JavaScript comparison operators are used to check the equality or inequality of values. These operators return a boolean value (true or false) based on the comparison result. Let's explore the commonly used comparison operators:

Equality Operators

Equality operators (=== and ==) are used to check if two values are equal. The === operator checks for strict equality, meaning both the value and the type must be the same. The == operator checks for equality after type coercion.

console.log(10 === 5); // Output: false
console.log(10 === 10); // Output: true
console.log("10" === 10); // Output: false
console.log(10 == "10"); // Output: true

Inequality Operators

Inequality operators (!== and !=) are used to check if two values are not equal. Similar to equality operators, !== checks strict inequality, while != checks inequality after type coercion.

console.log(10 !== 5); // Output: true
console.log(10 !== 10); // Output: false
console.log(10 != "10"); // Output: false
console.log("10" != "10"); // Output: false

Relational Operators

Relational operators (>, <, >=, <=) compare two values and return true if the condition is met.

console.log(10 > 5); // Output: true
console.log(10 < 5); // Output: false
console.log(10 >= 10); // Output: true
console.log(10 <= 5); // Output: false

JavaScript provides several other operators for various purposes. Let's briefly discuss some of them:

typeof Operator

The typeof operator returns the data type of its operand.

let year = 10191;
console.log(typeof year); // Output: number
console.log(typeof false); // Output: boolean

instanceof Operator

The instanceof operator checks whether an object is an instance of a particular type.

let names = ["Patti", "Bob"];
let name = names[0];
console.log(names instanceof Array); // Output: true
console.log(name instanceof Array); // Output: false

delete Operator

The delete operator removes a property from an object.

let user = {
     name: "Alice",
     age: 38
};
console.log(user.age); // Output: 38
delete user.age;
console.log(user.age); // Output: undefined

Conditional (Ternary) Operator

The conditional operator (? :) is a ternary operator that evaluates a condition and returns one of two expressions based on whether the condition is true or false.

console.log(true ? "Alice" : "Bob"); // Output: Alice
console.log(false ? "Alice" : "Bob"); // Output: Bob

Understanding the precedence and associativity of operators in JavaScript is crucial for writing correct and efficient code. Let's delve deeper into how these properties determine the order of operations in expressions.

Precedence

Precedence refers to the priority of operators in an expression. JavaScript assigns each operator a numerical value to indicate its precedence. Operators with higher precedence are evaluated first. If two operators have the same precedence, their associativity comes into play to determine the order of evaluation.

For example, in the expression a + b * c, the * operator has a higher precedence than the + operator. Therefore, b * c is evaluated first, and then the result is added to a.

Associativity

Associativity determines the order of evaluation when operators with the same precedence appear consecutively in an expression. Operators can be left-associative or right-associative.

• Left-associative: Operations are evaluated from left to right.
• Right-associative: Operations are evaluated from right to left.

For instance, in an expression with left-associative operators like a + b - c, the addition (+) and subtraction (-) operators have the same precedence. They are evaluated from left to right.

Operator Precedence Table

Let's take a closer look at the operator precedence table provided:

Precedence	Operator	Associativity	Symbol
14	Grouping	n/a	( … )
13	Field access		… . …
12	Function call		… ( … )
11	Postfix increment	n/a	… ++
	Postfix decrement	n/a	… --
10	Logical NOT		! …
	Unary plus		+ …
	Unary negation		- …
	Prefix increment		++ …
	Prefix decrement		-- …
	typeof		typeof …
	delete		delete …
9	Exponentiation		… ** …
8	Multiplication		… * …
	Division		… / …
	Remainder		… % …
7	Addition		… + …
	Subtraction		… - …
6	Less than		… < …
	Less than or equal		… <= …
	Greater than		… > …
	Greater than or equal		… >= …
	instanceof		… instanceof …
5	Equality		… == …
	Inequality		… != …
	Strict Equality		… === …
	Strict Inequality		… !== …
4	Logical AND		… && …
3	Logical Or		… || …
2	Conditional (ternary)		… ? … : …
1	Assignment		… = …
			… += …
			… *= …
			… and other assignment operators

In the table:

• Precedence: Indicates the priority of the operator. Higher numbers indicate higher precedence.
• Operator: Specifies the operator.
• Associativity: Indicates the direction of evaluation for operators with the same precedence.
• Symbol: Represents the symbol used for the operator.

Example

Let's revisit the example provided:

let a = 10;
let b = a + 2 * 3;
let c = a + 2 < 20 - 15;
console.log(a); // Output: 10
console.log(b); // Output: 16
console.log(c); // Output: false

In this example:

• b = a + 2 * 3: Multiplication (*) has a higher precedence than addition (+). Therefore, 2 * 3 is evaluated first, resulting in 6, which is then added to a, resulting in 16.
• c = a + 2 < 20 - 15: Both addition and subtraction operators have the same precedence, but addition is evaluated before comparison. So, a + 2 is calculated first, then 20 - 15, and finally, the comparison is made.

Understanding precedence and associativity helps ensure that expressions are evaluated correctly, leading to accurate program behavior.