JavaScript Coding Day 14 | Mastering JavaScript Operators: Bitwise, Type, and Concatenation

Mastering JavaScript Operators: Bitwise, Type, and Concatenation

Watch the lesson tutorial  ðŸ”»


JavaScript operators are the building blocks of logic in your code. While most developers know the basics, understanding bitwise logic and precise type checking is essential for writing efficient and bug-free programs. Below, we break down these specific operators with practical examples.


1. Bitwise XOR Operator (^)

The XOR (Exclusive OR) operator compares the binary bits of two numbers. It returns 1 only if the bits are different (one is 1 and the other is 0). If the bits are the same (both 0 or both 1), it returns 0.

Example:

  • 5 in binary: 0101

  • 3 in binary: 0011

  • Result (0110): 6

JavaScript
// Practical Example: XOR
// Using unique variables for this section
let xor_num1 = 5;  // Binary: 0101
let xor_num2 = 3;  // Binary: 0011

let xor_result = xor_num1 ^ xor_num2; 

console.log("XOR Result:", xor_result);
// Output: 6 (Binary: 0110)

2. Bitwise XNOR

JavaScript does not have a native "XNOR" operator. However, XNOR is simply the inverse of XOR. It returns 1 if bits are the same. To simulate this in JavaScript, we combine the XOR operator (^) with the Bitwise NOT operator (~).

Note: Because JavaScript uses 32-bit signed integers, the result often looks like a negative number.

JavaScript
// Practical Example: XNOR (Simulated using NOT and XOR)
let xnor_val_a = 10; // Binary: 1010
let xnor_val_b = 10; // Binary: 1010

// Logic: (10 ^ 10) is 0. ~(0) turns all bits to 1, resulting in -1.
let xnor_result = ~(xnor_val_a ^ xnor_val_b);

console.log("XNOR Result:", xnor_result);
// Output: -1 (In 32-bit signed binary, all 1s represent -1)

3. Left Shift Operator (<<)

The Left Shift operator moves the bits of a number to the left by a specified number of positions. New bits on the right are filled with 0.

Mathematical Shortcut: Shifting left by 1 is equivalent to multiplying the number by 2.

JavaScript
// Practical Example: Left Shift
let base_num = 5; // Binary: 00000101

// Shift left by 2 positions
let left_shifted = base_num << 2; 

// Binary becomes: 00010100 (which is 20)
console.log("Left Shift Result:", left_shifted);
// Output: 20

4. Right Shift Operator (Opposite of Left Shift) (>>)

The opposite of the Left Shift is the Sign-Propagating Right Shift. It moves bits to the right. It preserves the sign (positive/negative) of the original number.

Mathematical Shortcut: Shifting right by 1 is effectively dividing by 2 (dropping the remainder).

JavaScript
// Practical Example: Right Shift
let huge_val = 20; // Binary: 00010100

// Shift right by 1 position (effectively 20 / 2)
let right_shifted = huge_val >> 1;

// Binary becomes: 00001010 (which is 10)
console.log("Right Shift Result:", right_shifted);
// Output: 10

5. Type Operators

Type operators are crucial for validation to ensure your code doesn't crash when receiving unexpected data.

A. Unary Operator (typeof)

The typeof operator returns a string indicating the type of the operand (e.g., "number", "string", "boolean").

JavaScript
// Practical Example: Unary Typeof
let unary_string = "NextLeap";
let unary_number = 42;
let unary_check = typeof unary_string;

console.log("Type of String:", unary_check);
// Output: "string"

console.log("Type of Number:", typeof unary_number);
// Output: "number"

B. Type of Object (instanceof)

While typeof works for primitives, it isn't detailed enough for complex objects (arrays, custom classes). We use instanceof to check if an object belongs to a specific class or constructor.

JavaScript
// Practical Example: Instanceof Check
let my_array_list = [1, 2, 3];
let my_plain_obj = { name: "Tester" };

// Verify if the variable is specifically an Array
let is_array = my_array_list instanceof Array;

console.log("Is it an Array?:", is_array);
// Output: true

C. Type of Date

Using typeof on a Date results in just "object", which isn't helpful. To verify a specific Date object, we use instanceof Date or check the constructor.

JavaScript
// Practical Example: Date Check
let current_timestamp = new Date();

// Check if it is a valid Date object
let is_date_valid = current_timestamp instanceof Date;

console.log("Is this a Date object?:", is_date_valid);
// Output: true

6. Concatenation Operator (+)

In JavaScript, the + symbol is overloaded. If used with numbers, it adds. However, if any operand is a string, it acts as a concatenation operator, joining the values together into a single string.

JavaScript
// Practical Example: Concatenation
let greeting_start = "Hello";
let greeting_end = "World";
let year_val = 2025;

// Combining strings with a number
// JavaScript automatically converts the number to a string here
let full_sentence = greeting_start + " " + greeting_end + " - " + year_val;

console.log("Concatenated String:", full_sentence);
// Output: "Hello World - 2025"


- by Chirana Nimnaka

Comments

Popular posts from this blog

Python Coding Day 1 | The print() Function and Comments

What is Python?

Set Up an Environment to Code in Python