Copying text to the clipboard using JavaScript is a practical function that enhances user experience by allowing seamless data transfer across applications. Whether you’re building a web app or simply want to add this feature to your site, implementing the JavaScript Clipboard API is an effective way to achieve this.

What is the JavaScript Clipboard API?

The JavaScript Clipboard API provides a way to interact with the clipboard, enabling developers to copy text programmatically. It is a part of the Web API suite and offers methods for reading and writing to the clipboard. The API ensures that clipboard operations are secure, requiring user permission for access. This makes it a reliable tool for web applications that need to manipulate clipboard data.

How to Implement Copy to Clipboard in JavaScript

Implementing the copy to clipboard functionality in JavaScript involves using the Clipboard API or the document.execCommand method. Below is a step-by-step guide using both approaches:

• Using the Clipboard API:
  1. First, ensure your application has the necessary permissions to access the clipboard.
  2. Create a function that uses navigator.clipboard.writeText() to copy text.
  3. Example:

     function copyToClipboard(text) {
       navigator.clipboard.writeText(text).then(() => {
         console.log('Text copied to clipboard');
       }).catch(err => {
         console.error('Failed to copy text: ', err);
       });
     }
             

• Using document.execCommand:
  1. Create a temporary textarea element and set its value to the text you want to copy.
  2. Append it to the document, select its content, and execute the document.execCommand('copy').
  3. Remove the temporary element after copying.
  4. Example:

     function fallbackCopyToClipboard(text) {
       const textarea = document.createElement('textarea');
       textarea.value = text;
       document.body.appendChild(textarea);
       textarea.select();
       document.execCommand('copy');
       document.body.removeChild(textarea);
       console.log('Text copied to clipboard using fallback');
     }
             

The Clipboard API is the recommended approach when possible, as it is more robust and provides better error handling.

Common Use Cases for JavaScript Clipboard Copy

JavaScript clipboard copy functionality is valuable in various scenarios:

• Sharing links: Websites often provide a ‘Copy Link’ button for users to easily share URLs.
• Form data: Users can copy filled forms or generated data for use in other applications.
• Code snippets: Developers can quickly copy code examples or snippets from documentation sites.
• Text editing applications: Clipboard operations enhance text manipulation capabilities in web-based editors.

These implementations streamline tasks and improve the interactive experience, making JavaScript copy to clipboard a valuable tool in modern web development.

In the world of web development, JavaScript plays a pivotal role in enhancing the interactivity of web applications. One of its core components is the event listener. Understanding how to use event listeners can greatly improve the way users interact with your web applications. This guide dives deep into the concept of event listeners in JavaScript, demonstrates how to implement them, explores their common use cases, and outlines best practices for their utilization.

What are Event Listeners in JavaScript?

Event listeners in JavaScript are functions that wait for an event to occur on a particular element, such as a button click, mouse movement, or form submission. Once the specified event occurs, the event listener triggers a specific response, which can be defined by the developer. This is essential for creating dynamic and responsive web applications, allowing users to interact seamlessly with different components on a webpage.

An event listener is typically attached to an HTML element and listens for events such as click, keyup, or mouseover. When the event occurs, the corresponding function is executed, providing real-time feedback or results to the user.

How to Implement an Event Listener

To implement an event listener in JavaScript, you can use the addEventListener method. This method is applied to a specific HTML element, specifying the type of event to listen for and the function to execute when that event occurs. Here is a basic example:

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button was clicked!');
});

In this example, the addEventListener method is used to listen for a click event on the button with the ID myButton. When the button is clicked, an alert box pops up with the message “Button was clicked!”. This simple implementation demonstrates how event listeners can be used to make web pages interactive and user-friendly.

Common Use Cases for Event Listeners

Event listeners are used in a variety of scenarios to enhance user interaction on web applications. Below are some common use cases:

• Form Validation: Event listeners can validate user input in real-time, improving the quality of data submitted by users.
• Dynamic Content Loading: They can load content only when needed, improving page load times and user experience.
• Interactive Animations: Event listeners can trigger animations based on user actions, making interfaces more engaging.
• Navigation Menus: They can dynamically show or hide menu items, enhancing navigation on websites.

These use cases illustrate the versatility of event listeners and their ability to transform static web pages into interactive experiences.

Best Practices for Using Event Listeners

To ensure event listeners are used effectively and efficiently, consider the following best practices:

• Remove Unused Event Listeners: Always remove event listeners when they are no longer needed to prevent memory leaks. Use removeEventListener to clean up listeners.
• Optimize Event Handling: Minimize the complexity of functions attached to high-frequency events like scroll or resize. Consider throttling or debouncing to improve performance.
• Use Delegation: For events on multiple elements, use event delegation to minimize the number of event listeners. Attach a single listener to a common parent and use event bubbling to handle events.
• Choose Appropriate Event Types: Ensure you are using the most suitable event type for your use case to avoid unnecessary event triggering.

By adhering to these best practices, developers can maximize the efficiency and performance of their web applications, ensuring a smooth and responsive user experience. Event listeners, when used correctly, are powerful tools that can significantly enhance the functionality and interactivity of a website.

In modern JavaScript development, module systems are vital for organizing and structuring code efficiently. Two fundamental components of these systems are JavaScript export and export default. Understanding their distinct roles and use cases can significantly enhance your ability to manage code dependencies and optimize functionality.

What is JavaScript Export?

The JavaScript export statement is a mechanism that allows developers to share variables, functions, classes, or objects from one module to another. This feature enables modular code development by permitting specific parts of a codebase to be reused across different files. When you use the export statement, you can opt to export multiple items from a single module.

Consider the following example that demonstrates the syntax for exporting named items:

export const myVariable = 'Hello';
export function myFunction() {
    return 'Export Example';
}
export class MyClass {
    constructor() {
        console.log('Class Exported');
    }
}

Here, myVariable, myFunction, and MyClass are explicitly exported and can be imported by other modules using the import statement.

How Does Export Default Work?

The export default statement serves a different purpose in JavaScript modules. It is used to export a single value or item from a module, making it the default export. This default feature is beneficial when you want to export only one primary component from a module and simplify the import syntax in other files.

Here is an example of how to use the export default statement:

export default function defaultFunction() {
    return 'Default Export Example';
}

In this example, defaultFunction is the default export of the module. Other modules can import this function using a simpler syntax:

import defaultFunction from './path/to/module';

The export default statement is limited to exporting one item, which makes it ideal for modules focused on a single responsibility or functionality.

Comparing Export and Export Default

Understanding the differences between JavaScript export and export default is crucial for effective module management. Both statements serve distinct purposes in code structuring:

• Use Cases: The export statement is ideal for modules that provide multiple functionalities or components. In contrast, export default should be used when a module centers around a single primary component.
• Syntax: With export, each item is named explicitly, allowing for multiple exports per module. Export default simplifies the import process by offering a single default export.
• Flexibility: Export provides more flexibility for complex modules, while export default provides simplicity for singular-focused modules.

Choosing between export and export default depends on your project’s requirements and how you intend to utilize the module’s components. For complex modules with multiple functionalities, prefer using named exports to maintain clarity and modularity. When a module is designed to fulfill one primary role, export default can streamline imports and improve code readability.

By leveraging these export mechanisms in JavaScript, developers can enhance their code organization, facilitate easier maintenance, and promote reusability across different parts of an application.

In the world of web development, understanding string literals and JavaScript template literals is crucial for efficient coding. Both are used to handle strings in JavaScript, but they serve different purposes and offer distinct advantages. This article explores the nuances of these two types of literals, highlighting their uses and benefits.

What are String Literals?

String literals in JavaScript are used to represent sequences of characters enclosed within single or double quotes. They are straightforward and are primarily used for static text. For example, 'Hello, World!' or "JavaScript is fun" are typical string literals. One of the main characteristics of string literals is that they do not allow for the incorporation of variables or expressions directly within the string. This can lead to cumbersome concatenation when dynamic content is required.

How Do JavaScript Template Literals Work?

JavaScript template literals, introduced in ES6, provide a more flexible way to work with strings. They are enclosed by backticks (`) and support embedded expressions through the ${expression} syntax. This feature allows for the seamless integration of variables and expressions within a string. For example, `Hello, ${name}` dynamically inserts the value of name into the string. Template literals also support multi-line strings, making them ideal for formatting text across multiple lines without concatenation.

When to Use String Literals vs Template Literals

The choice between string literals and template literals depends on the specific needs of your project. Use string literals when dealing with static text or when backward compatibility is a priority, as they are supported in all JavaScript environments. On the other hand, opt for template literals when your strings include dynamic content or require complex formatting. They simplify code by removing the need for concatenation and provide a cleaner syntax for embedding variables and expressions.

Examples of String and Template Literals in JavaScript

Let’s look at some examples to illustrate the differences between string literals and template literals in JavaScript:

• String Literals:
  • Static Text: let greeting = 'Hello, World!';
  • Concatenation: let message = 'Hello, ' + firstName + '!';
• Template Literals:
  • Embedding Expressions: let greeting = `Hello, ${firstName}!`;
  • Multi-line Strings:
    let poem = `Roses are red,
Violets are blue.`;

These examples emphasize the efficiency and readability of template literals in modern JavaScript development. By leveraging template literals, developers can create more maintainable and readable code, particularly when dealing with dynamic or multi-line strings.

The JavaScript … operator, also known as the spread operator, is a powerful tool that simplifies the handling of arrays and objects. It is particularly useful for working with collections of data, offering a modern and efficient approach to combining, copying, and manipulating elements. Understanding how this operator functions can enhance your coding capabilities and streamline your development process.

What is the JavaScript … Operator?

The JavaScript … operator is a syntax introduced in ECMAScript 2015 (ES6) that serves two primary purposes: spreading and gathering elements. When used in arrays or objects, it allows developers to expand elements into individual items, which is why it is commonly referred to as the spread operator. This operator is essential in both array literals and function arguments, providing a concise way to handle multiple items.

How Does the … Operator Work?

The … operator works by either spreading the elements of an iterable (such as an array) into separate elements or gathering distinct elements into a single array. In array literals, the operator can be used to create copies or merge arrays without the need for complex loops or methods. Similarly, in function calls, the operator expands an array into a list of individual arguments, simplifying the process of passing variables to functions.

Common Use Cases for the … Operator

• Copying Arrays: The spread operator allows easy duplication of arrays, preserving the original array’s structure. For example, const newArray = [...originalArray]; creates a shallow copy of originalArray.
• Merging Arrays: Combining two or more arrays into one can be done seamlessly with the spread operator: const combinedArray = [...array1, ...array2];.
• Function Arguments: When a function requires multiple arguments, the spread operator can be used to pass an array’s elements as individual arguments: function sum(a, b, c) { return a + b + c; } let args = [1, 2, 3]; sum(...args);.
• Object Literals: The spread operator also works with objects, creating shallow copies or merging objects: const newObject = { ...originalObject, additionalProperty: value };.

Examples of the … Operator in Code

To understand the effectiveness of the … operator, consider the following examples:

Example 1: Copying an Array

const fruits = ['apple', 'banana', 'orange'];
const moreFruits = [...fruits, 'grape', 'pear'];
console.log(moreFruits); // Output: ['apple', 'banana', 'orange', 'grape', 'pear']

Example 2: Merging Objects

const user = { name: 'John', age: 30 };
const additionalInfo = { email: '[email protected]', country: 'USA' };
const userProfile = { ...user, ...additionalInfo };
console.log(userProfile); // Output: { name: 'John', age: 30, email: '[email protected]', country: 'USA' }

Example 3: Using in Function Calls

function greet(firstName, lastName) {
  console.log(`Hello, ${firstName} ${lastName}!`);
}
const names = ['Jane', 'Doe'];
greet(...names); // Output: Hello, Jane Doe!

The JavaScript … operator is a versatile tool that makes array and object manipulation more intuitive and less error-prone. By understanding and utilizing its capabilities, developers can write cleaner and more maintainable code.

When developing websites, selecting elements by class name using JavaScript is a crucial skill. This technique allows developers to target specific elements and apply dynamic changes to the document. While JavaScript offers several methods for this, using the get element by class approach is both efficient and widely supported across browsers.

What is the JavaScript Get Element by Class Method?

The JavaScript get element by class method is a way to retrieve elements from the document based on their class names. This is particularly useful when you want to apply the same styling or behavior to a group of elements sharing the same class. JavaScript provides the document.getElementsByClassName() method to accomplish this task. It returns a live HTMLCollection of all elements with the specified class name, allowing developers to iterate over them and manipulate their properties or styles.

How to Use document.getElementsByClassName()

To use the document.getElementsByClassName() method, first ensure that your HTML elements have the class name you wish to target. Then, you can use JavaScript to select and manipulate these elements. Here’s a basic example:

let elements = document.getElementsByClassName('my-class');
for (let i = 0; i < elements.length; i++) {
    elements[i].style.color = 'blue';
}

In this example, all elements with the class name my-class will have their text color changed to blue. The document.getElementsByClassName() method is straightforward, but it’s important to remember that it returns a collection, not a single element. Therefore, you might need to loop through the collection or target a specific index to modify an individual element.

Common Pitfalls and Best Practices

While using document.getElementsByClassName() is effective, there are a few common pitfalls developers might encounter:

• Live Collection: The HTMLCollection returned by this method is live, meaning it automatically updates as the document changes. This can lead to unexpected results if you’re not careful when modifying the DOM.
• Performance Concerns: When dealing with a large number of elements, performance can become an issue. It’s advisable to minimize DOM manipulations and batch changes when possible.
• Specificity: If there are multiple classes on an element, ensure that the class name passed to document.getElementsByClassName() is specific enough to avoid unintended selections.

To avoid these pitfalls, consider these best practices:

• Use specific class names to prevent selecting unintended elements.
• Cache the results of document.getElementsByClassName() if you plan to use them multiple times.
• Consider using query selectors like document.querySelectorAll() for more complex queries.

By understanding how to effectively use document.getElementsByClassName(), along with recognizing its limitations, you can enhance your JavaScript skills and deliver well-optimized web pages.

JavaScript regex replace uses String.replace() to find a pattern and return a new string with replacement text. The original string remains unchanged. Use a plain search string for a literal match, or a regular expression when you need flags, groups, or pattern rules.

For example, “red red”.replace(/red/, “blue”) returns “blue red”. The regex matches the first occurrence only because it does not include the global flag.

JavaScript regex replace: Replace one match and return a new string

A string search finds the exact sequence you provide: “cat”.replace(“cat”, “dog”) returns “dog”. A regex can express a broader rule, such as /cat/ or /cat[0-9]/.

The replacement argument can be a fixed string. In “Order 42”.replace(/[0-9]+/, “complete”), the digits are replaced, producing “Order complete”. Without g, a regex replacement stops after the first match. This behavior applies even when several matches exist.

Because replace() returns a string, assign its result when you need to keep it: const updated = source.replace(/old/, “new”). Calling the method does not modify source.

Regex replacement in JavaScript: Use g and i to replace all matches

The g flag means global matching. It makes the replacement continue through every match instead of stopping at the first one. For example, “Error error ERROR”.replace(/error/gi, “notice”) returns “notice notice notice”.

The i flag makes matching case-insensitive. It allows /error/i to match error, Error, and ERROR. Combine flags when needed: /error/gi replaces all case variations.

• /word/ replaces the first matching occurrence.
• /word/g replaces every matching occurrence with matching case.
• /word/i replaces the first case-insensitive occurrence.
• /word/gi replaces every case-insensitive occurrence.

A global regex does not change the original string, and the returned value is still a new string. Use a replacement string when every match should receive the same output.

How do you replace text in JavaScript with captured groups?

Capturing groups preserve parts of the match so the replacement can reuse them. In “Smith, Ada”.replace(/(\w+),\s*(\w+)/, “$2 $1”), group one captures Smith and group two captures Ada. The result is “Ada Smith”.

Replacement references begin with a dollar sign. $1 inserts the first captured group, $2 inserts the second, and $& inserts the complete match. Add g when the same grouped structure can occur more than once: text.replace(/(\w+),\s*(\w+)/g, “$2 $1”).

Use noncapturing parentheses, (?:…), for grouping that should not create a replacement reference. This keeps group numbers stable when the pattern becomes more complex.

How do callbacks compute replacements and escape literal input?

Pass a function instead of a replacement string when the output depends on the match. The callback receives the complete match first, followed by captured groups, the match position, and the complete input string.

For example, “item-7 item-12”.replace(/item-(\d+)/g, (match, number) => “product ” + Number(number)) returns “product 7 product 12”. The callback can format values, perform calculations, or choose different output for each match.

A regex pattern is different from escaped literal text. If user input is “a+b”, putting it directly into new RegExp(userInput, “g”) treats + as a regex operator rather than a literal character. For literal matching, use a string search or escape regex metacharacters first:

const escaped = userInput.replace(/[.*+?^${}()|[\]\\]/g, “\\$&”);

Then create the pattern with new RegExp(escaped, “g”). This preserves the input as literal text while still allowing global replacement.

To round a number in JavaScript, use Math.round() for the nearest integer: Math.round(4.6) returns 5. To round decimal places, multiply by a power of 10, round, then divide by the same factor. The method you choose matters for negative values, midpoint ties, and non-finite inputs.

JavaScript rounding methods return numeric values. They do not change the original variable unless you assign the result back to it.

How does rounding numbers in JavaScript work?

Math.round(value) selects the nearest integer. When a value is exactly halfway between integers, JavaScript rounds toward positive infinity. Therefore, Math.round(3.5) returns 4, while Math.round(-3.5) returns -3, not -4.

This comparison uses the same positive, negative, and midpoint inputs for each method. The values appear in this order: 3.7, -3.7, 3.5, -3.5.

• Math.round(): 4, -4, 4, -3
• Math.floor(): 3, -4, 3, -4
• Math.ceil(): 4, -3, 4, -3
• Math.trunc(): 3, -3, 3, -3

How do you round a JavaScript number to an integer?

To round a JavaScript number to an integer, choose the function that matches the desired direction:

• Math.round(value): nearest integer, with midpoint ties toward positive infinity.
• Math.floor(value): the next integer toward negative infinity. For example, Math.floor(-2.1) is -3.
• Math.ceil(value): the next integer toward positive infinity. For example, Math.ceil(-2.1) is -2.
• Math.trunc(value): removes the fractional portion toward zero. For example, Math.trunc(-2.9) is -2.

Floor and truncation are not equivalent for negative values: Math.floor(-2.9) returns -3, whereas Math.trunc(-2.9) returns -2.

How do you round decimal places in JavaScript?

For a simple decimal-place calculation, scale the number before rounding:

function roundTo(value, places) { const factor = 10 ** places; return Math.round(value * factor) / factor; }

roundTo(12.346, 2) returns 12.35. With two decimal places, the factor is 100: JavaScript rounds 12.346 × 100 to 1235, then divides by 100. Replace Math.round() with Math.floor(), Math.ceil(), or Math.trunc() when directional rounding is required.

Scaling also follows the selected method’s negative-number behavior. For example, scaling -12.346 by 100 and applying Math.round() produces -12.35; an exact negative midpoint follows Math.round’s tie rule.

Why do negative values and floating-point numbers surprise you?

Negative values expose the difference between direction and distance. Math.floor(-3.2) moves farther from zero to -4, while Math.trunc(-3.2) removes only the fraction and returns -3. Math.ceil(-3.2) also returns -3.

Decimal scaling has a floating-point limitation. JavaScript stores ordinary numbers in binary floating-point, so many decimal fractions are represented slightly above or below their written value. For example, Math.round(1.005 * 100) / 100 can return 1 because the scaled value may be just below 100.5.

For strict decimal rules, use integer units such as cents or decimal-aware arithmetic instead of assuming multiplication guarantees exact precision. Non-finite values pass through these methods: Math.round(NaN) returns NaN, Math.floor(Infinity) returns Infinity, Math.ceil(-Infinity) returns -Infinity, and Math.trunc(NaN) returns NaN.

Use fetch() to make a JavaScript API call with the browser’s built-in, promise-based request function. This guide shows how to call an API in JavaScript with async/await for GET and JSON POST requests.

An API call from JavaScript returns a promise, so await keeps the control flow readable while the browser waits for a response.

Build a JavaScript API call with fetch()

fetch() starts a request and returns a promise that resolves to a Response object. The complete async GET function below adds URL parameters, checks response.ok before parsing, and rethrows failures so calling code can handle them.

GET example: async function getUsers(limit, role) { try { const params = new URLSearchParams({ limit: String(limit), role }); const url = “https://api.example.com/users?” + params.toString(); const response = await fetch(url); if (!response.ok) { throw new Error(“GET failed: ” + response.status); } return await response.json(); } catch (error) { console.error(“Could not load users:”, error); throw error; } }

GET is the default HTTP method, so this request does not need an options object. await fetch(url) waits for the response promise, while await response.json() waits for the separate promise that parses the response body.

How to call an API in JavaScript with GET parameters

Place query parameters after a question mark in the URL. URLSearchParams creates that query string and encodes spaces and special characters safely. In the example, limit and role become parameters such as ?limit=10&role=admin.

Call the function with getUsers(10, “admin”). To set the method explicitly, pass a second argument to fetch(): fetch(url, { method: “GET” }). The server’s status is available through response.status, while response.ok is true only for successful 2xx responses.

Send JSON with POST requests and headers

Use POST when the request sends data to the server. Set the method to “POST”, identify the body as JSON with a Content-Type header, and convert the JavaScript object with JSON.stringify() before sending it.

JSON POST example: async function createUser(user) { try { const response = await fetch(“https://api.example.com/users”, { method: “POST”, headers: { “Content-Type”: “application/json”, “Accept”: “application/json” }, body: JSON.stringify(user) }); if (!response.ok) { throw new Error(“POST failed: ” + response.status); } return await response.json(); } catch (error) { console.error(“Could not create user:”, error); throw error; } }

For example, pass an object with createUser({ name: “Ada”, email: “[email protected]” }). The request headers tell the server how to interpret the body and what response format the client prefers.

Handle network, HTTP, and parsing errors

Handle these failures separately:

• Network errors: fetch() rejects when the request cannot be completed, such as when the network is unavailable or the request is blocked. The surrounding try…catch handles that rejection.
• HTTP errors: A 404 or 500 response does not automatically reject the fetch promise. The promise resolves normally, so check response.ok and throw an error when it is false.
• Parsing errors: response.json() returns a promise and rejects when the body is not valid JSON. Using return await response.json() inside the try block sends that failure to catch.

If an endpoint returns an empty or non-JSON body, use await response.text() instead of response.json().

sort in JavaScript uses the Array.prototype.sort() method. By default, it converts array elements to strings and orders their UTF-16 values, so string arrays often sort as expected but number arrays can produce surprising results.

For numbers, pass a comparator: (a, b) => a – b sorts ascending, while (a, b) => b – a sorts descending. The same comparator pattern works for numeric properties on objects.

How does sort in JavaScript behave by default for strings and numbers?

Without a comparator, sort() compares string representations. For example, [‘pear’, ‘apple’, ‘orange’].sort() returns [‘apple’, ‘orange’, ‘pear’]. Uppercase and lowercase characters can appear in separate groups because their character codes differ.

The same rule causes numeric errors. [10, 2, 1, 21].sort() becomes [1, 10, 2, 21], because the values are compared as ’10’, ‘2’, ‘1’, and ’21’. Use a numeric comparator whenever the array contains numbers. Default sorting is appropriate only when its string-based ordering matches the intended result.

How does a JavaScript numeric sort handle ascending and descending values?

A comparator receives two elements, a and b. A negative return value places a before b; a positive value places b first; zero treats them as equal. This return-value contract lets JavaScript calculate numeric order directly.

For ascending order, subtract the second value from the first:

const ascending = numbers.sort((a, b) => a – b);

If a is smaller than b, the result is negative, so a moves earlier. If a is larger, the result is positive, so it moves later. This is the standard JavaScript numeric sort for low-to-high values.

To sort descending in JavaScript, reverse the subtraction:

const descending = numbers.sort((a, b) => b – a);

Now a larger value produces a negative result and moves toward the start of the array. Both calls mutate numbers; use a copy when the original order matters.

How do you sort objects by a property?

For objects, the comparator should read the property used for ordering. This example sorts players by a numeric score from lowest to highest:

players.sort((a, b) => a.score – b.score);

For highest to lowest, switch the operands:

players.sort((a, b) => b.score – a.score);

String properties need a string comparator. For example, players.sort((a, b) => a.name.localeCompare(b.name)) orders names alphabetically according to the available locale rules. For descending names, compare b.name with a.name. Keep the property types consistent so the comparator returns reliable results.

What changes when sort() mutates, and when should you use toSorted()?

sort() changes the existing array and returns that same array. Declaring the array with const does not prevent this mutation; it only prevents assigning a different array to the variable.

Copy the array before sorting when other code needs the original order:

const ascending = […numbers].sort((a, b) => a – b);

toSorted() provides the non-mutating alternative in modern JavaScript. It returns a new sorted array while leaving the source unchanged:

const descending = numbers.toSorted((a, b) => b – a);

Use sort() when changing the current array is intentional. Use toSorted(), or a spread copy followed by sort(), when immutability is required.