JavaScript: 2023’s New Features and 2024’s Prospects

Every year that goes by, JavaScript, the language that powers the entire internet, gets better. I’ve outlined some of the major advancements for this year in this post, and we’ll look forward to what’s in store for next year.

I hope it is helpful to you; now, let’s get going!

2023’s JavaScript: The Upgraded and New
Five ideas stand out for 2023; each will add something special to the JavaScript language.

1. WeakMap keys based on symbols

WeakMap, which debuted at ECMAScript 2015, lets you extend an object with more properties without having to worry about memory leaks. Up until now, a WeakMap’s keys could only be objects. Symbol usage may rise as a result of the new feature, which allows symbols to be used as unique keys in WeakMaps.

Prior to:

let objKey = {};
let weakmap = new WeakMap();
weakmap.set(objKey, "I'm an object key!");

console.log(weakmap.get(objKey)); // Output: "I'm an object key!"

To function as a key in our WeakMap weakmap, we generated an object called objKey in the example above.

Following:

let symbolKey = Symbol("a unique key");
let weakmap = new WeakMap();
weakmap.set(symbolKey, "I'm a symbol key!");

console.log(weakmap.get(symbolKey)); // Output: "I'm a symbol key!"

We’re making a Symbol symbolKey with the new feature to act as a key in our WeakMap weakmap. In this manner, a distinct, non-replicable value can be used as a key. This is especially helpful when we wish to add more properties to an object without interfering with it and without running the risk of memory leaks.

2. Use Copy to Modify Array

New techniques for sorting, reversing, and overwriting data without changing the array it’s stored in are presented in this proposal. This makes it possible to handle arrays and tuples consistently and with more functional programming patterns.

Prior to: Modifying the Array

let array = [3, 2, 1];
array.sort();

console.log(array); // Output: [1, 2, 3]

In the example above, we sorted the array; however, the sort() operation changed the original array.

Following: Using Copy to Modify Array

let array = [3, 2, 1];
let sortedArray = array.sortCopy(); // Proposed method

console.log(array); // Output: [3, 2, 1]
console.log(sortedArray); // Output: [1, 2, 3]

In this example, the array is sorted using the suggested sortCopy() method (the precise method name may change in the final specification). The original array is left intact and is replaced with a new sorted array by this new method.

Data immutability is strongly encouraged in the functional programming paradigm, which includes this feature. We can write code that is safer and more predictable by avoiding making direct changes to the original data. It should be noted that this example relies on the sortCopy() method being present, as per the proposal; however, when this feature is formally released, the implementation may differ.

3. Array find from last

As the name implies, this feature may help with performance or eliminate the need to write additional code by returning matching elements in an array from the end to the beginning.

Prior: Employing Array.prototype.reverse() and Array.prototype.find()

let array = [1, 2, 3, 2, 1];
array.reverse();
let foundValue = array.find((element) => element === 2);

console.log(foundValue); // Output: 2

In the example above, the array was reversed before being searched for the first instance of the number 2 from the end of the array using find().

Using Array.prototype.findLast() afterward

let array = [1, 2, 3, 2, 1];
let foundValue = array.findLast((element) => element === 2);

console.log(foundValue); // Output: 2

In this example, we are utilizing the suggested findLast() method to locate the first instance of the number 2 from the end of the array (the precise method name may vary in the final specification). This new approach clarifies our intention and prevents us from reversing the array.

4. Hashbang comments

In JavaScript, standardizing hashbang comments improves interoperability with other languages. With Python currently dominating the AI and machine learning ecosystem, this change may facilitate JavaScript’s participation.

Previously: Employing Hashbang remarks

JavaScript scripts already use hashbangs, particularly in Node.js scripts, but how they were handled depended on the host environment. Here’s an illustration of a hashbang-using Node.js script:

#!/usr/bin/env node
console.log("Hello, world!");

The hashbang (#!/usr/bin/env node) at the beginning of the file in this example indicates that Node.js should be used to run the script. Nevertheless, this hashbang must be handled and removed by the Node.js host environment before the code is sent to the JavaScript engine.

Following: Hashbang remarks are made official

Hashbang comments will now be standardized, meaning that the JavaScript engine will handle them internally, guaranteeing consistent behavior across various host environments. Hashbangs will still be used in the same way:

#!/usr/bin/env node
console.log("Hello, world!");

The way these hashbangs are handled internally in JavaScript makes it different from other scripting languages and may make it simpler to integrate with various ecosystems. Be aware that client-side JavaScript in browsers doesn’t significantly alter this feature, which is more applicable to server-side JavaScript.

5. findLastIndex

const array = [1, 2, 3, 2, 1];

const lastIndex = array.findLastIndex((x) => x === 2);

console.log(lastIndex); // Output: 3

In this example, the last instance of the number 2 in the array is located using findLastIndex. When the number 2 is entered, the function that is passed to findLastIndex returns true; otherwise, it returns false. The index of the final array element for which the function returns true is returned by findLastIndex.

2024 JavaScript: The Path Ahead

There are significant ideas for 2024 even though the emphasis right now is on the features for 2023. Even though they haven’t been approved yet, these offer exciting new developments for JavaScript.

6. Temporal API

The Date object in JavaScript has been a source of annoyance because of its peculiar design and API. JavaScript is currently adding the Temporal API, a new API that has been proposed in response to this. Compared to the Date API, it is intended to be more powerful and simple to use.

At this point in the ECMAScript proposal process, the Temporal API is essentially finalized, though it may still undergo a few small tweaks before being formally included in JavaScript.

Here’s an example of how to create a date with the old Date API and get the current year. You can also see how to use the proposed Temporal API for the same purpose.

The traditional method with dates:

let now = new Date();
let currentYear = now.getFullYear();
console.log(currentYear);

New proposed way with Temporal:

let now = Temporal.now.plainDate(); // Returns a PlainDate object representing the current date let currentYear = now.year; // In Temporal, you can get the year directly with .year console.log(currentYear);

7. Pipeline Operator (|>)

A syntax sugar for readable function chaining is the pipeline operator. It promises to improve code readability and make JavaScript functional programming more intuitive.

Prior to utilizing the Pipeline Operator

const double = (x) => x * 2;
const addFive = (x) => x + 5;

const result = addFive(double(10)); // 25

The old method required nesting function calls, which increased the complexity and difficulty of reading as more functions were added.

Making use of the pipeline operator

const double = (x) => x * 2;
const addFive = (x) => x + 5;

const result = 10 |> double |> addFive; // 25

The two functions we have in this example are addFive and double. Our data, which is the number 10, can move from one function to the next thanks to the Pipeline Operator (|>), which acts as the connector.

8. Error Cause

This proposal would give Error objects an optional cause property, which can help with debugging and increase developer productivity.

Prior to employing the cause property:

try {
  connectToDatabase();
} catch (err) {
  throw new Error("Database connection failed.", { cause: err });
}

Using the cause property:

function buildRSA(p, q) {
  if (!Number.isInteger(p) || !Number.isInteger(q)) {
    throw new Error("RSA key generation requires integer inputs.", {
      cause: { code: "NonInteger", values: [p, q] },
    });
  }
  if (!areCoprime(p, q)) {
    throw new Error("RSA key generation requires two coprime integers.", {
      cause: { code: "NonCoprime", values: [p, q] },
    });
  }
}

In this case, the cause is given as structured data for machine analysis rather than raising an error with a human-readable message. Because human-readable error messages are susceptible to grammatical or punctuation errors that could corrupt any existing analysis written to consume them, this is helpful in situations where the error messages are unsuitable for machine analysis.

Concluding remarks

JavaScript keeps expanding and changing to meet the demands of programmers. The features for 2023 and the suggested improvements for 2024 show that this dynamic language has a bright future. We can anticipate more advanced and user-friendly features that make coding more effective and pleasurable as JavaScript develops.

Note: My boss recently asked me what language I would suggest for his son to learn, and after giving it some thought, I replied that JavaScript. Although it isn’t the most well-designed language and has a lot of quirks, learning it is almost a given because it is so widely used. In addition, it keeps developing and getting better in every way.