DEV Community

Usama
Usama

Posted on

๐Ÿงฎ Mastering JavaScript Operators

Perfect ๐Ÿ™Œ Youโ€™ve written a big operators demo file
JavaScript gives us a wide variety of operators to perform calculations, comparisons, logic checks, and much more.
Hereโ€™s a complete overview with examples ๐Ÿ‘‡


๐Ÿ”ข Arithmetic Operators

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333...
console.log(a % b); // 1
console.log(a ** b); // 1000
console.log(++a);    // 11
console.log(--b);    // 2
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“ฆ Assignment Operators

let c = 5;
c += 2;  // 7
c -= 3;  // 4
c *= 4;  // 16
c /= 2;  // 8
c %= 3;  // 2
c **= 3; // 8
Enter fullscreen mode Exit fullscreen mode

โš–๏ธ Comparison Operators

console.log(a == b);   // false
console.log(a != b);   // true
console.log(a === b);  // false
console.log(a !== b);  // true
console.log(a > b);    // true
console.log(a < b);    // false
console.log(a >= b);   // true
console.log(a <= b);   // false
Enter fullscreen mode Exit fullscreen mode

๐Ÿ” Logical Operators

let x = true, y = false;

console.log(x && y); // false
console.log(x || y); // true
console.log(!x);     // false
console.log(!y);     // true
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“ String Operators

let str1 = "Hello, ";
let str2 = "World!";
console.log(str1 + str2);   // "Hello, World!"
console.log(str1 += str2);  // "Hello, World!"
Enter fullscreen mode Exit fullscreen mode

๐ŸŽญ Ternary Operator

let age = 18;
let canVote = age >= 18 ? "Yes, can vote" : "No, cannot vote";
console.log(canVote); // "Yes, can vote"
Enter fullscreen mode Exit fullscreen mode

๐Ÿท๏ธ typeof Operator

console.log(typeof a);      // "number"
console.log(typeof str1);   // "string"
console.log(typeof x);      // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (quirk in JS)
console.log(typeof {});        // "object"
console.log(typeof []);        // "object"
console.log(typeof function(){}); // "function"
Enter fullscreen mode Exit fullscreen mode

โšก Bitwise Operators

let num1 = 5; // 0101
let num2 = 3; // 0011

console.log(num1 & num2); // 1
console.log(num1 | num2); // 7
console.log(num1 ^ num2); // 6
console.log(~num1);       // -6
console.log(num1 << 1);   // 10
console.log(num1 >> 1);   // 2
console.log(num1 >>> 1);  // 2
Enter fullscreen mode Exit fullscreen mode

๐ŸŒ Spread Operator

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2];
console.log(combined); // [1,2,3,4,5,6]
Enter fullscreen mode Exit fullscreen mode

๐Ÿงฉ Rest Operator

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30
Enter fullscreen mode Exit fullscreen mode

โ“ Optional Chaining (?.)

let user = { name: "Usama", address: { city: "Istanbul" } };

console.log(user?.address?.city);   // "Istanbul"
console.log(user?.contact?.phone);  // undefined (no error)
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”„ Nullish Coalescing (??)

let foo = null ?? "default";
console.log(foo); // "default"

let bar = 0 ?? 42;
console.log(bar); // 0 (because 0 is not null/undefined)

let baz = undefined ?? "fallback";
console.log(baz); // "fallback"
Enter fullscreen mode Exit fullscreen mode

โœจ Summary

In this post, we covered:

  • Arithmetic, Assignment, Comparison, Logical, String, Ternary, and typeof operators
  • Bitwise, Spread, Rest, Optional Chaining, and Nullish Coalescing operators

Each example shows how JavaScript operators make coding more powerful and expressive ๐Ÿš€


๐Ÿ‘‰ if you learn more for free check my GitHub repo:
https://github.com/Usamaazeem03/javaScript-a-to-z-concept.git

Top comments (0)