JavaScript Operators 

// JavaScript Logical Operators - Detailed Explanation and Best Practices

// Logical AND (&&) Operator
// The && operator returns true if both operands are true. If one of them is false, it returns false.

const isAdult = true;
const hasID = true;

const canEnterClub = isAdult && hasID; // true because both conditions are true

// Best Practice: Use short-circuit evaluation to check for null or undefined before accessing properties.
const user = { name: 'Alice' };
const userName = user && user.name; // 'Alice', user is not null/undefined

// Logical OR (||) Operator
// The || operator returns true if at least one of the operands is true. If both are false, it returns false.

const hasDriverLicense = false;
const hasPassport = true;

const canTravel = hasDriverLicense || hasPassport; // true because one condition is true

// Best Practice: Use || to provide default values.
const inputName = '';
const defaultName = inputName || 'Guest'; // 'Guest', because inputName is falsy (empty string)

// Logical NOT (!) Operator
// The ! operator negates the value of its operand. If the operand is true, it returns false and vice versa.

const isRaining = false;
const isSunny = !isRaining; // true because !false is true

// Best Practice: Use double negation (!!) to convert a value to a boolean.
const value = 'some text';
const isValueTruthy = !!value; // true because 'some text' is truthy

// Combined Logical Operators
// You can combine logical operators to form complex logical expressions.

const isWeekend = true;
const isHoliday = false;
const canRelax = (isWeekend || isHoliday) && !hasWork;

// canRelax is true because it's weekend and no work.

// Best Practice: Use parentheses to make complex expressions readable.
const age = 25;
const hasParentalConsent = false;
const canWatchMovie = (age >= 18 || hasParentalConsent) && !isRestricted;

// canWatchMovie is true because age is 25 (>= 18) and not restricted.

// Short-Circuit Evaluation
// Logical operators use short-circuit evaluation, meaning they stop evaluating as soon as the result is determined.

const result = false && (console.log('This will not log'), true); // false
const output = true || (console.log('This will not log'), false); // true

// Best Practice: Avoid side effects in logical expressions for clarity and maintainability.

// Common Pitfalls and Tips
// - Avoid using logical operators for control flow (if-else) to maintain readability.
const value1 = true && true; // Use explicit if statements for control flow instead
if (isAdult && hasID) {
  console.log('You can enter the club');
}

// - Remember that non-boolean values are coerced to boolean in logical expressions.
// Truthy values include: non-zero numbers, non-empty strings, objects, arrays, etc.
// Falsy values include: 0, '', null, undefined, NaN, false.
const emptyArray = [];
const nonEmptyArray = [1, 2, 3];
console.log(!emptyArray); // false, because emptyArray is truthy
console.log(!nonEmptyArray); // false, because nonEmptyArray is truthy

// - Use logical operators to simplify conditions and avoid deeply nested if-else structures.

const hasAdminAccess = true;
const isOwner = false;

if (hasAdminAccess || isOwner) {
  console.log('You have access');
} else {
  console.log('Access denied');
}

// Summary:
// - && returns true if both operands are true.
// - || returns true if at least one operand is true.
// - ! negates the value of its operand.
// - Use short-circuit evaluation for efficiency and default values.
// - Keep logical expressions readable and maintainable.

/*
  JavaScript Bitwise Operators - Detailed Explanation and Examples

  Bitwise operators treat their operands as a set of 32 bits (binary digits),
  rather than as decimal, hexadecimal, or octal numbers. 
  They operate on each bit of a number's binary representation.

  Bitwise Operators:
  1. AND (&)
  2. OR (|)
  3. XOR (^)
  4. NOT (~)
  5. LEFT SHIFT (<<)
  6. SIGNED RIGHT SHIFT (>>)
  7. UNSIGNED RIGHT SHIFT (>>>)

  Best Practices:
  - Ensure operands are integers.
  - Use bitwise operators for performance-critical code.
  - Be cautious with large numbers as JavaScript bitwise operations are done on 32-bit integers.
  - Avoid using bitwise operators with floating-point numbers.
*/

// 1. AND (&)
// Sets each bit to 1 if both bits are 1.
let a = 5; // 0101 in binary
let b = 3; // 0011 in binary
let andResult = a & b; // 0001 in binary (1 in decimal)
console.log(`AND Operation: ${a} & ${b} = ${andResult}`); // Output: AND Operation: 5 & 3 = 1

// 2. OR (|)
// Sets each bit to 1 if one of the bits is 1.
let orResult = a | b; // 0111 in binary (7 in decimal)
console.log(`OR Operation: ${a} | ${b} = ${orResult}`); // Output: OR Operation: 5 & 3 = 7

// 3. XOR (^)
// Sets each bit to 1 if only one of the bits is 1.
let xorResult = a ^ b; // 0110 in binary (6 in decimal)
console.log(`XOR Operation: ${a} ^ ${b} = ${xorResult}`); // Output: XOR Operation: 5 ^ 3 = 6

// 4. NOT (~)
// Inverts all the bits.
let notResult = ~a; // 1010 in binary (-6 in decimal, due to two's complement representation)
console.log(`NOT Operation: ~${a} = ${notResult}`); // Output: NOT Operation: ~5 = -6

// 5. LEFT SHIFT (<<)
// Shifts bits to the left and fills 0 on voids left as a result.
let leftShiftResult = a << 1; // 1010 in binary (10 in decimal)
console.log(`Left Shift Operation: ${a} << 1 = ${leftShiftResult}`); // Output: Left Shift Operation: 5 << 1 = 10

// 6. SIGNED RIGHT SHIFT (>>)
// Shifts bits to the right and fills the leftmost bits based on the original number's sign bit.
let rightShiftResult = a >> 1; // 0010 in binary (2 in decimal)
console.log(`Right Shift Operation: ${a} >> 1 = ${rightShiftResult}`); // Output: Right Shift Operation: 5 >> 1 = 2

// 7. UNSIGNED RIGHT SHIFT (>>>)
// Shifts bits to the right and fills the leftmost bits with 0, regardless of the sign bit.
let unsignedRightShiftResult = a >>> 1; // 0010 in binary (2 in decimal)
console.log(`Unsigned Right Shift Operation: ${a} >>> 1 = ${unsignedRightShiftResult}`); // Output: Unsigned Right Shift Operation: 5 >>> 1 = 2

/*
  Best Practices:
  - Always ensure that the operands used with bitwise operators are integers to avoid unexpected results.
  - Bitwise operators are particularly useful in low-level programming, such as graphics manipulation, 
    cryptography, and network programming.
  - When using bitwise operators, remember that JavaScript internally handles numbers as 32-bit signed integers.
  - Avoid using bitwise operators on floating-point numbers or numbers larger than 32 bits, as this can lead 
    to precision issues and unexpected results.
  - Use parentheses to ensure proper precedence and readability.
*/

// JavaScript String Operators

// 1. Concatenation Operator (+)
// The concatenation operator is used to combine two or more strings.
let str1 = "Hello";
let str2 = "World";
let concatenatedString = str1 + " " + str2; // "Hello World"
console.log(concatenatedString);

// Best Practice: Use template literals for better readability and performance when dealing with multiple concatenations.
// Example using template literals (introduced in ES6):
let templateString = `${str1} ${str2}`; // "Hello World"
console.log(templateString);

// 2. Assignment with Concatenation Operator (+=)
// This operator appends the right-hand string to the left-hand string.
let str3 = "Hello";
str3 += " World"; // "Hello World"
console.log(str3);

// 3. Comparison Operators (==, ===, !=, !==)
// These operators are used to compare two strings.

// Equality (==): Checks if two strings are equal (type conversion is performed).
console.log("Hello" == "Hello"); // true
console.log("Hello" == "hello"); // false

// Strict Equality (===): Checks if two strings are equal (no type conversion).
console.log("Hello" === "Hello"); // true
console.log("Hello" === "hello"); // false

// Inequality (!=): Checks if two strings are not equal (type conversion is performed).
console.log("Hello" != "hello"); // true

// Strict Inequality (!==): Checks if two strings are not equal (no type conversion).
console.log("Hello" !== "hello"); // true

// Best Practice: Use strict equality (===) and strict inequality (!==) to avoid type conversion issues.

// 4. String Methods
// There are several string methods that can be used to manipulate strings.

// length: Returns the length of the string.
let lengthOfString = str1.length; // 5
console.log(lengthOfString);

// toUpperCase(): Converts the string to uppercase.
let upperCaseString = str1.toUpperCase(); // "HELLO"
console.log(upperCaseString);

// toLowerCase(): Converts the string to lowercase.
let lowerCaseString = str2.toLowerCase(); // "world"
console.log(lowerCaseString);

// substring(start, end): Extracts characters from the string between start and end indices.
let subString = concatenatedString.substring(0, 5); // "Hello"
console.log(subString);

// slice(start, end): Similar to substring but allows negative indices.
let slicedString = concatenatedString.slice(0, 5); // "Hello"
console.log(slicedString);

// indexOf(substring): Returns the index of the first occurrence of the substring, or -1 if not found.
let indexOfWorld = concatenatedString.indexOf("World"); // 6
console.log(indexOfWorld);

// includes(substring): Checks if the string contains the specified substring.
let containsWorld = concatenatedString.includes("World"); // true
console.log(containsWorld);

// split(separator): Splits the string into an array of substrings.
let splitString = concatenatedString.split(" "); // ["Hello", "World"]
console.log(splitString);

// join(separator): Joins an array of strings into a single string.
let joinedString = splitString.join(", "); // "Hello, World"
console.log(joinedString);

// 5. Template Literals
// Template literals allow embedding expressions and multi-line strings.
let name = "John";
let greeting = `Hello, ${name}!`; // "Hello, John!"
console.log(greeting);

// Multi-line strings using template literals:
let multiLineString = `This is a string
that spans multiple
lines.`;
console.log(multiLineString);

// Best Practice: Prefer template literals over string concatenation for better readability and maintainability.

// Conclusion: Understanding and using these string operators and methods effectively can help you write more readable and maintainable JavaScript code.

/*
  The Conditional (Ternary) Operator is a shorthand way to write an if-else statement. 
  It has the following syntax:
  
  condition ? expressionIfTrue : expressionIfFalse;

  - condition: A boolean expression that evaluates to true or false.
  - expressionIfTrue: The expression to execute if the condition is true.
  - expressionIfFalse: The expression to execute if the condition is false.

  It's called "ternary" because it involves three parts.
*/

// Example 1: Basic Usage
let age = 20;
let canVote = age >= 18 ? 'Yes, you can vote.' : 'No, you cannot vote.';
console.log(canVote); // Output: Yes, you can vote.

/*
  Explanation: 
  The condition (age >= 18) is checked. 
  If it's true, 'Yes, you can vote.' is returned. 
  Otherwise, 'No, you cannot vote.' is returned.
*/

// Example 2: Nested Ternary Operators
let score = 85;
let grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : score >= 60 ? 'D' : 'F';
console.log(grade); // Output: B

/*
  Explanation:
  Here, we use nested ternary operators to assign a grade based on the score.
  This approach, however, can reduce readability if overused. It's often better to use if-else statements for complex conditions.
*/

// Example 3: Assigning Default Values
let userColor = 'blue';
let defaultColor = 'green';
let currentColor = userColor ? userColor : defaultColor;
console.log(currentColor); // Output: blue

/*
  Explanation:
  The ternary operator checks if userColor is truthy. If it is, userColor is assigned to currentColor. Otherwise, defaultColor is assigned.
*/

// Example 4: Ternary Operator with Function Calls
function greet(isMorning) {
  return isMorning ? 'Good morning!' : 'Good evening!';
}
console.log(greet(true));  // Output: Good morning!
console.log(greet(false)); // Output: Good evening!

/*
  Explanation:
  The greet function uses the ternary operator to return different greetings based on the isMorning parameter.
*/

// Best Practices:

/*
  1. **Readability**: Ensure the ternary operator is easy to read and understand. Avoid nesting multiple ternary operators.
  2. **Simplicity**: Use the ternary operator for simple conditional assignments. For complex logic, prefer if-else statements.
  3. **Consistency**: Use the ternary operator consistently within your codebase for similar patterns of conditional assignments.
  4. **Avoid Side Effects**: The expressions in the ternary operator should not have side effects (like modifying variables or making function calls that change state).
*/

// Example of Avoiding Side Effects
let count = 0;
let message = (count++, count > 0 ? 'Positive' : 'Non-positive');
console.log(count);   // Output: 1
console.log(message); // Output: Non-positive

/*
  Explanation:
  Although the above code works, using the ternary operator to increment count and evaluate its value can lead to unexpected behavior.
  It's better to separate these operations for clarity and maintainability.
*/

// The comma operator in JavaScript

// 1. Basic Usage
// The comma operator evaluates each of its operands and returns the value of the last operand.
// This can be useful in situations where multiple expressions are needed but only one value is expected.

// Example:
let x = (1, 2, 3);
console.log(x); // Output: 3
// Explanation: The comma operator evaluates 1, then 2, then 3, and returns the last value, which is 3.

// 2. Inside a for loop
// The comma operator can be used to include multiple statements in the initialization or increment sections of a for loop.

// Example:
for (let i = 0, j = 10; i < 5; i++, j -= 2) {
    console.log(`i: ${i}, j: ${j}`);
}
// Explanation: The loop initializes i to 0 and j to 10. In each iteration, it increments i by 1 and decrements j by 2.
// Output:
// i: 0, j: 10
// i: 1, j: 8
// i: 2, j: 6
// i: 3, j: 4
// i: 4, j: 2

// 3. With Assignment
// You can use the comma operator to perform multiple assignments in a single statement.

// Example:
let a, b;
a = (b = 5, b + 2); // b is assigned 5, then b + 2 is evaluated and assigned to a
console.log(a); // Output: 7
console.log(b); // Output: 5
// Explanation: The expression b = 5 assigns 5 to b. The comma operator then evaluates b + 2, which is 7, and assigns it to a.

// 4. In Function Arguments
// The comma operator can be used in function arguments to include multiple expressions.

// Example:
function example(x, y) {
    console.log(x, y);
}

example((1, 2), (3, 4)); // Output: 2 4
// Explanation: In the function call, (1, 2) evaluates to 2 and (3, 4) evaluates to 4. Thus, the function receives 2 and 4 as arguments.

// Best Practices:
// - Use the comma operator sparingly. Overusing it can make code less readable.
// - Ensure that using the comma operator does not obscure the logic of your code.
// - Prefer using more explicit constructs (like separate statements or clearer code structures) when readability is a concern.

// Overall, the comma operator is a useful tool in JavaScript, but it should be used thoughtfully to avoid confusion.

// Unary Operators in JavaScript

// 1. Unary Plus (+)
// The unary plus operator converts its operand to a number.

let str = "42";
let num = +str; // Converts the string "42" to the number 42
console.log(num); // Output: 42

// Best Practice: Use unary plus when you want to ensure a value is a number, especially from strings.

// 2. Unary Negation (-)
// The unary negation operator converts its operand to a number and then negates it.

let positive = 5;
let negative = -positive; // Negates the number 5 to -5
console.log(negative); // Output: -5

// Best Practice: Use unary negation to quickly invert the sign of a number.

// 3. Logical NOT (!)
// The logical NOT operator converts its operand to a boolean value and then negates it.

let truthyValue = "hello";
let falsyValue = !truthyValue; // Converts "hello" to true, then negates to false
console.log(falsyValue); // Output: false

// Best Practice: Use logical NOT to convert values to boolean or to negate a boolean value.

// 4. Increment (++)
// The increment operator increases the value of its operand by 1.

let count = 0;
count++; // Increases count by 1
console.log(count); // Output: 1

// Best Practice: Use increment operators in loops or when you need to increase a value by 1.

// 5. Decrement (--)
// The decrement operator decreases the value of its operand by 1.

let number = 10;
number--; // Decreases number by 1
console.log(number); // Output: 9

// Best Practice: Use decrement operators in loops or when you need to decrease a value by 1.

// 6. Unary Negation of Non-Numbers
// Unary negation will convert non-numeric values to NaN (Not-a-Number).

let notANumber = -"hello"; // Converts "hello" to NaN
console.log(notANumber); // Output: NaN

// Best Practice: Avoid using unary negation on non-numeric values unless you are specifically testing for NaN.

// 7. Unary Plus with Non-Numbers
// Unary plus also converts non-numeric values to NaN, similar to unary negation.

let notANum = +"world"; // Converts "world" to NaN
console.log(notANum); // Output: NaN

// Best Practice: As with unary negation, be cautious using unary plus with non-numeric values if not intended.

// Conclusion:
// Unary operators provide concise ways to manipulate values in JavaScript.
// Use them judiciously to ensure code readability and maintainability.

// Type Operators in JavaScript

// 1. typeof Operator
// The typeof operator is used to determine the type of a variable or expression.
// It returns a string representing the type.

let str = "Hello, World!";
let num = 42;
let bool = true;
let obj = { key: "value" };
let arr = [1, 2, 3];
let func = function() {};
let und = undefined;
let n = null;

console.log(typeof str); // "string"
console.log(typeof num); // "number"
console.log(typeof bool); // "boolean"
console.log(typeof obj); // "object"
console.log(typeof arr); // "object" (Arrays are objects in JavaScript)
console.log(typeof func); // "function"
console.log(typeof und); // "undefined"
console.log(typeof n); // "object" (null is considered an object, but this is a quirk)

// Best Practice: Always use typeof with known primitive types
console.log(typeof str === 'string'); // true
console.log(typeof num === 'number'); // true

// 2. instanceof Operator
// The instanceof operator is used to check if an object is an instance of a specific class or constructor function.

console.log(arr instanceof Array); // true
console.log(obj instanceof Object); // true
console.log(func instanceof Function); // true
console.log(num instanceof Number); // false (num is a primitive, not an object)

// Best Practice: Use instanceof for custom object checks
function Person(name) {
    this.name = name;
}

let person = new Person("Alice");
console.log(person instanceof Person); // true

// 3. in Operator
// The in operator is used to check if a property exists in an object or its prototype chain.

console.log("key" in obj); // true (obj has a property 'key')
console.log("length" in arr); // true (Array has a 'length' property)
console.log("toString" in obj); // true (Object prototype has 'toString' method)

// Best Practice: Use in to check for properties, including inherited ones
console.log("hasOwnProperty" in obj); // true

// 4. Array.isArray() Method
// Array.isArray() is a method that determines whether a value is an array.

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

// Best Practice: Use Array.isArray() to reliably check if a value is an array
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({})); // false

// Summary:
// - Use typeof to check for primitive types and functions.
// - Use instanceof to check if an object is an instance of a specific class.
// - Use in to check if a property exists in an object or its prototype chain.
// - Use Array.isArray() to check if a value is an array.