Hoai-Nho-Logo

/

Blog

AboutProjectsBlogContact

All topics

All topics
Explore the newest trends in technology. Learn about AI, software, gadgets, and cybersecurity. Stay up to date in the fast-paced world of tech.
AI
image-render-seo

The Ultimate Guide to Image Rendering in ReactJS: Performance, SEO, and Best Practices (2025)

Overview: The Critical Role of Images in Modern Web Development Images are fundamental to web experiences, accounting for approximately 50% of a typical webpage’s total size. How you choose to render these assets significantly impacts user experience, page performance, and search engine rankings. As web technologies evolve, developers have multiple options for implementing images in […]

Architecture & Design

Architecture & Design
Discover cutting-edge architecture and design ideas. Explore innovative projects, modern interior design trends, sustainable architecture, and creative design solutions to inspire your next project.aws saa-c03
AWS

Explore best practices, tutorials, case studies, and insights on leveraging AWS’s vast ecosystem to build, deploy, and manage applications in the cloud

Design patterns

The Design Pattern category explores reusable solutions to common software design challenges, helping developers write efficient, maintainable, and scalable code

Docker
Explore essential Docker tutorials and resources. Find helpful tips, best practices, and tools to master containerization and improve your deployment workflow.
Security

The Security category focuses on best practices, tools, and frameworks essential for protecting applications, data, and infrastructure in an increasingly digital world

SSL license expired?

Ultimate Guide to Renewing SSL Certificates: Secure Your Website in 2024

Ensure your website stays secure! 🔒 Learn how to check, renew, and manage your SSL certificate to prevent security risks and downtime. Follow our step-by-step guide with best practices to keep your HTTPS protection active in 2024!

CSS

Database

Database
Find easy-to-follow guides on database SQL, NoSQL, PostgreSQL, and MySQL. Learn how to make databases that are fast and work well. Get tips to improve your skills. database
MySQL
Discover essential database guides covering SQL, NoSQL, and best practices. Get tips and performance benchmarks to improve your data management skills.
NoSQL
Discover essential database guides covering SQL, NoSQL, and best practices. Get tips and performance benchmarks to improve your data management skills.
PostgreSQL
Explore comprehensive PostgreSQL tutorials and resources. Find helpful tips, best practices, and performance benchmarks to enhance your database skills.
Search topic

LIKE vs Full-Text Search: SQL Performance and Use Cases

Explore the differences between SQL’s LIKE operator and Full-Text Search. Learn their syntax, performance, use cases, and advanced features for optimizing database queries

Generation

Interview Question

NodeJS

NodeJS
Explore beginner to advanced tutorials on JavaScript and TypeScript. Find helpful tips, best practices, and tools to create powerful web applications. typescript_vs_javascript
Javascript/Typescript
Learn JavaScript and TypeScript with easy guides. Discover tips, best practices, and tools to build efficient web applications quickly.
image-render-seo

The Ultimate Guide to Image Rendering in ReactJS: Performance, SEO, and Best Practices (2025)

Overview: The Critical Role of Images in Modern Web Development Images are fundamental to web experiences, accounting for approximately 50% of a typical webpage’s total size. How you choose to render these assets significantly impacts user experience, page performance, and search engine rankings. As web technologies evolve, developers have multiple options for implementing images in […]


© 2025 Hoai-Nho. All rights reserved.

ContactGitHub
  1. Home
  2. /Blog
  3. /Mastering the Mysteries of JavaScript Syntax: Discover the Secrets Behind These Symbols

Mastering the Mysteries of JavaScript Syntax: Discover the Secrets Behind These Symbols

JavaScript has a rich set of operators that make it both powerful and versatile. Some of these operators are well known, while others may be new or lesser-used. Explaining what they are, how to use them, and why they are essential. 1. ?= (Safe Assignment Operator) What is It? The safe assignment operator ?= assigns […]

Javascript symbols
Hoài Nhớ@hoainho
September 24, 2024
|

2 min read

|

895 Views

Share:

JavaScript has a rich set of operators that make it both powerful and versatile. Some of these operators are well known, while others may be new or lesser-used. Explaining what they are, how to use them, and why they are essential.

Javascript cover image


1. ?= (Safe Assignment Operator)

What is It?

The safe assignment operator ?= assigns a value only if the variable is null or undefined.

How to Use It?

let x;
x ?= 10;
console.log(x); // Output: 10 (since x was undefined)

Why Use It?

This operator avoids unnecessary overwriting of variables that already hold a valid value.

Best Practice

Use ?= when you want to safely assign default values without overwriting existing ones.


2. ??= (Nullish Assignment Operator)

What is It?

The assignment operator = assigns a value to a variable.

How to Use It?

let z = null;
z ??= 15;
console.log(z); // Output: 15 (since z was null)

Why Use It?

It ensures that you only assign a value when the variable is nullish, avoiding the pitfalls of falsy values like 0 or “”.

Best Practice

Use ??= when you want to set a fallback value for a potentially null or undefined variable.

3. &= (Bitwise AND Assignment Operator)

What is It?

The &= operator performs a bitwise AND operation and assigns the result back to the variable.

How to Use It?

let num = 5;  // (101 in binary)
num &= 3;     // (011 in binary)
console.log(num); // Output: 1 (bitwise AND result)

Why Use It?

Bitwise operations are fast and useful in low-level programming, for tasks like managing flags or working with binary data.

Best Practice

Use &= for bitwise operations only when necessary, typically in performance-sensitive environments.

4. ~~ (Double NOT Bitwise Operator)

What is It?

The ~~ operator is a shorthand for converting a floating-point number to an integer.

How to Use It?

let decimal = 4.8;
let integer = ~~decimal;
console.log(integer); // Output: 4

Why Use It?

It’s a faster alternative to Math.floor() when you need to truncate a number without rounding.

Best Practice

Use ~~ when you need a quick and efficient way to truncate numbers, particularly in performance-critical code.

5. |= (Bitwise OR Assignment Operator)

What is It?

The |= operator performs a bitwise OR operation and assigns the result to the variable.

How to Use It?

let a = 5;  // (101 in binary)
a |= 3;     // (011 in binary)
console.log(a); // Output: 7 (bitwise OR result)

Why Use It?

It’s useful when manipulating bits in low-level tasks like flag management.

Best Practice

Use |= in performance-critical applications that require binary operations.

6. ||= (Logical OR Assignment Operator)

What is It?

The ||= operator assigns a value to a variable only if the existing value is falsy (like null, 0, false).

How to Use It?

let b = 0;
b ||= 10;
console.log(b); // Output: 10 (since b was falsy)

Why Use It?

It simplifies assigning fallback values without using long if conditions.

Best Practice

Use ||= for assigning defaults to variables that may have falsy values, enhancing readability.


© 2024 HoaiNho — Nick, Software Engineer. All rights reserved.


Tags:
Advanced JSEnhance JavascriptjavascriptPopularRefactor JavascriptSymbols JS
Written by

author
Hoài Nhớ

Hoài Nhớ

@Hoài Nhớ
Advanced JSEnhance JavascriptjavascriptPopularRefactor JavascriptSymbols JS

Table of Contents

    References posts

    The Ultimate Guide to Image Rendering in ReactJS: Performance, SEO, and Best Practices (2025)

    Overview: The Critical Role of Images in Modern Web Development Images are fundamental to web experiences, accounting for approximately 50% of a typical webpage’s total size. How you choose to render these assets significantly impacts user experience, page performance, and search engine rankings. As web technologies evolve, developers have multiple options for implementing images in […]

    Hoài Nhớ
    React Coin Celebration Animation Component | Interactive Particle Effects

    A high-performance React component that creates an engaging coin celebration animation using Framer Motion. Features dynamic particle systems, smooth transitions, and interactive effects perfect for gaming applications, reward celebrations, and interactive web experiences. Built with React 18+ and Framer Motion.

    Hoài Nhớ
    Boosting Backend Performance with Distributed Cache: A Comprehensive Guide

    Learn how distributed caching with Redis can boost backend performance and scalability. This guide covers setup, caching strategies, and a step-by-step technical demo with benchmarks.

    Hoài Nhớ
    Related Posts

    image-render-seo
    SEO
    The Ultimate Guide to Image Rendering in ReactJS: Performance, SEO, and Best Practices (2025)

    Overview: The Critical Role of Images in Modern Web Development Images are fundamental to web experiences, accounting for approximately 50% of a typical webpage’s total size. How you choose to render these assets significantly impacts user experience, page performance, and search engine rankings. As web technologies evolve, developers have multiple options for implementing images in […]

    Hoài Nhớ
    coin-celebration-effect
    AnimationCoin Celebration
    React Coin Celebration Animation Component | Interactive Particle Effects

    A high-performance React component that creates an engaging coin celebration animation using Framer Motion. Features dynamic particle systems, smooth transitions, and interactive effects perfect for gaming applications, reward celebrations, and interactive web experiences. Built with React 18+ and Framer Motion.

    Hoài Nhớ
    distributed-caching
    Backend PerformanceCaching Strategies
    Boosting Backend Performance with Distributed Cache: A Comprehensive Guide

    Learn how distributed caching with Redis can boost backend performance and scalability. This guide covers setup, caching strategies, and a step-by-step technical demo with benchmarks.

    Hoài Nhớ
    Cover banner
    Essential Responsive Design Tips for React Developers

    Creating truly responsive web applications that work perfectly from small 320px mobile screens to 4K displays requires a strategic approach. This guide provides practical

    Hoài Nhớ
    tripple-cache
    FrontendOptimizationIndexedDB
    🚀 Triple-Layered Web Caching Strategy: How Memory, IndexedDB and HTTP Cache Improved Speed by 96%

    Discover how to accelerate your website through our powerful triple-layered caching strategy combining Memory Cache, IndexedDB, and HTTP Cache. Detailed guidance from theory to practice helps reduce page load time by up to 96%, improve user experience, and optimize performance across all devices.

    Hoài Nhớ

    Subscribe to our newsletter

    Get the latest posts delivered right to your inbox