JavaScript Revolution: 10 Exciting Changes You Missed in 2023

In 2023, a myriad of changes have occurred in the world of web development, including significant updates to JavaScript. These changes encompass a wide range of improvements, from new ECMAScript features to enhancements in popular JavaScript frameworks. Let's delve into five of these recent changes to JavaScript that you may have missed.

1. Array Methods: Two Sorted, Two Splice, and Two Reversed

In JavaScript, two new array methods,two sorted andtwo splices, have been introduced, allowing developers to sort, reverse, and splice arrays without mutating the original array. This immutability approach is more favorable when writing code. Additionally, the existingreverse method can be used to reverse an array without changing the original array. For example, you can use thereverse method to reverse an array without modifying the original array as shown below:

const originalArray = [1, 2, 3, 4, 5];
const reversedArray = [...originalArray].reverse();
console.log(reversedArray); // [5, 4, 3, 2, 1]
console.log(originalArray); // [1, 2, 3, 4, 5]

1. Object Group By

TheObject.groupBy()static method groups the elements of a given iterable according to the string values returned by a provided callback function. This method should be used when group names can be represented by strings. For example, you can use theObject.groupBy()method to group elements of an array based on a specific property, as shown below:

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, (item) => item.type);
console.log(result);

1. Push Notifications on iOS Web Apps

In 2023, web app users on iOS gained the ability to receive push notifications, expanding the possibilities for web apps to engage with their audience. This feature allows web developers to send push notifications that work in Safari and other browsers, following cross-browser standards

.To implement iOS web push notifications, developers need to update their web server and website to send push notifications that work in Safari, other browsers, and web apps, following cross-browser standards

.The user must install the web app shortcut to their Home Screen using the Share menu in Safari, and a user-generated action is required to bring up the permission prompt on the web app installed on the Home Screen

1. Updates in the Vue Ecosystem

In 2023, the Vue ecosystem saw significant updates, with the main focus being on making Vue 3 stable. Vue 3 became the new default, and efforts were made to transition from Vue 2 to Vue 3. The Vue tool ecosystem, headlined by Nuxt, the primary framework for building Vue.js applications, has seen stability and innovation. Vue 3 maintains compatibility with Vue Router and Vuex, making integration into a full-featured Vue.js application ecosystem easy

1. Next.js

Next.js, the popular JavaScript framework, underwent significant changes in 2023. Next.js 14 included performance improvements, stability for Server Actions, a new course teaching the App Router, and more. The release focused on Turbopack, faster local server startup, faster code updates with Fast Refresh, Server Actions, and Partial Prerendering. The Next.js Learn course was also introduced, teaching various aspects of Next.js development

1. Introducing findLast and findLastIndex

The introduction of thefindLastandfindLastIndexmethods in ECMAScript 2023 allows developers to search for the last matching element in an array. This is particularly useful in scenarios such as time-based logs and reverse priority queues, where searching from the end of the array is more practical. For example, thefindLastmethod can be used to find the last log entry from a specific user in a time-based log array.

// Using findLast to find the last log entry from a specific user in a time-based log array
const logs = [
  { user: 'Alice', log: 'Entry 1' },
  { user: 'Bob', log: 'Entry 1' },
  { user: 'Alice', log: 'Entry 2' },
  { user: 'Bob', log: 'Entry 2' },
];

const lastLogByAlice = logs.findLast(entry => entry.user === 'Alice');
console.log(lastLogByAlice); // { user: 'Alice', log: 'Entry 2' }

1. Enhanced Array Methods

ECMAScript 2023 introduces enhanced array methods that allow developers to make changes to an array while keeping the original array unchanged. These methods create a new copy of the array with the desired changes, maintaining the integrity of the original array. For instance, if you have an array of usernames and want to update a specific username without altering the original array, these enhanced array methods can be utilized.

// Using enhanced array methods to update a specific username without altering the original array
const originalUsernames = ['Alice', 'Bob', 'Charlie'];
const updatedUsernames = originalUsernames.map(name => (name === 'Bob' ? 'Bobby' : name));

console.log(updatedUsernames); // ['Alice', 'Bobby', 'Charlie']
console.log(originalUsernames); // ['Alice', 'Bob', 'Charlie']

1. Hashbang Grammar

The introduction of Hashbang Grammar in ECMAScript 2023 allows the use of the shebang notation (#!) in the source code. This feature makes it easier to differentiate between scripts and modules, providing better compatibility with build tools and ensuring consistency with other languages.

// Using Hashbang Grammar to differentiate between scripts and modules
// File: script.js
#!/usr/bin/env node
console.log('This is a script.');

// File: module.mjs
#!module
console.log('This is a module.');

1. Symbols as WeakMap Keys

In ECMAScript 2023, symbols can now be used as unique keys in a WeakMap, expanding the usage of WeakMap and enabling the creation of more sophisticated data structures. This enhancement allows for better memory management and opens up new possibilities for data organization and manipulation.

1. Array.prototype.toSorted

The newtoSortedmethod in ECMAScript 2023 allows developers to sort an array without mutating the original array. This method provides a convenient way to sort arrays while maintaining the original array unchanged, contributing to a more efficient and immutable approach to array manipulation.

// Using toSorted to sort an array without mutating the original array
const originalArray = [3, 1, 2];
const sortedArray = originalArray.toSorted();

console.log(sortedArray); // [1, 2, 3]
console.log(originalArray); // [3, 1, 2]

1. Bun

Bun, a new JavaScript runtime written in Zig, made waves in 2023. Despite some initial bugs, it offers an exceptional developer experience and claims exceptional performance, presenting an alternative for the future

1. Node.js

Node.js quietly improved with the release of version 20, introducing an improved permissions model for enhanced security and a WebSocket client based on the browser's WebSocket API. These updates contribute to a better backend JavaScript experience

1. HTM X

HTM X, the JavaScript framework of the year, captured the imagination of the ecosystem. Known for eliminating excessive JavaScript, HTM X proves to be the ideal framework for JavaScript haters

1. Spelt

Spelt, a popular JavaScript framework, introduced significant changes in version 5. The new feature called "runes" alters the developer experience by replacing reactive variables with compiler macros.

These changes represent just a fraction of the exciting developments in JavaScript in 2023.