ECMAScript 2023, the 14th edition of the language, has some great changes that will make your programming life easier.

In this article, I'll go through each of the changes and explain why they're helpful. So let’s dive in and see some new methods we got as an early Christmas present.

Object.groupBy

Let’s say you have an array of objects and want to separate them based on a property value, type, or quantity.

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 },
];

We have a new method now called GroupBy that lets you do just that.

To use it, use Object.groupBy on any array with objects, and pass a function that returns the specific key by which you want to categorize.

Here, we are having an array of objects called inventory. And a myCallback function that is taking a quantity as a parameter and returning ok if the quantity is more than 5, or else returning restock.

We are passing the inventory array and the myCallback function to Object,groupBy so that it groups the items in the array by quantity.

function myCallback({ quantity }) {
  return quantity > 5 ? "ok" : "restock";
}

const result2 = Object.groupBy(inventory, myCallback);

The result will be an object which contains the key which is the category and the specified data inside it.

{
    "restock": [
        {
            "name": "asparagus",
            "type": "vegetables",
            "quantity": 5
        },
        {
            "name": "bananas",
            "type": "fruit",
            "quantity": 0
        },
        {
            "name": "cherries",
            "type": "fruit",
            "quantity": 5
        }
    ],
    "ok": [
        {
            "name": "goat",
            "type": "meat",
            "quantity": 23
        },
        {
            "name": "fish",
            "type": "meat",
            "quantity": 22
        }
    ]
}

Array.toSliced(), Array.toSorted(), and Array.toReversed()

When we use methods like sort(), splice(), and reverse(), they mutate the original array. This can sometimes be an issue.

But when using toSpliced(), toSorted(), and toReversed(), we can splice, sort, and reverse an array without mutating the source array. Here's how it works:

const numbers = [3, 4, 1, 5, 2];

const splicedNumbers = numbers.toSpliced(1, 1);
const sortedNumbers = numbers.toSorted();
const reversedNumbers = numbers.toReversed();

In this example, we are using toSpliced() to splice the array, toSort() to sort the array, and toReversed() to reverse the array. They work just like regular splice, sort, and reverse but the catch is they will return a new array, and not mutate the original one.

findLast() and findLastIndex()

Before ES14, if you wanted to find the last element or index in an array that satisfies some condition, you would have to reverse the array first.

function findLastIndexByReversing(arr, target) {
  const reversedArray = arr.slice().reverse();
  const reversedIndex = reversedArray.indexOf(target);

  if (reversedIndex !== -1) {
    const lastIndex = arr.length - 1 - reversedIndex;
    return lastIndex;
  } else {
    return -1; 
  }
}

In this example, findLastIndexByReversing creates a reversed copy of the original array using slice().reverse(). Then, it uses indexOf to find the first occurrence of the target element in the reversed array. The function calculates the corresponding index in the original array by subtracting the reversed index from the total length of the array minus 1. This gives you the last index of the element in the original array.

Or you can use a for loop that starts from the end.

function findLastIndex(arr, target) {
  for (let i = arr.length - 1; i >= 0; i--) {
    if (arr[i] === target) {
      return i;
    }
  }
  return -1;
}

In this example, the findLastIndex function takes an array arr and a target element target. It iterates over the array from the end arr.length - 1 to the beginning 0. If it finds the target element, it returns the index. If the element is not found, it returns -1.

But now, we have a method known as lastIndexOf() that will start from the end of the array and return the value of the first element that satisfies the condition.

const fruits = ['apple', 'banana', 'orange', 'banana', 'kiwi'];

const lastIndex = fruits.lastIndexOf('banana');

Here is the output:

Output showing 3

Wrapping Up

These were the changes that were introduced in JavaScript as ECMAScript 2023.

Thanks for reading, and I will see you in the next tutorial.

If you wish to see a short video version of the article, you can check that out here:

JavaScript was the first programming language I picked up. Well, I actually started with HTML and CSS. Just like many other web developers, going with JavaScript was a no-brainer. This is simply because it blends so well with HTML and CSS, and actually enhances your HTML/CSS skills as well. I've developed applications and games in various other programming languages including Java, Swift, C++, Dart. But the flexibility which JavaScript provides is unmatchable - even though it could be considered bad for beginners as it gives way more options than required to do a simple task.

Today, JavaScript is one of the most powerful languages on the planet because of its performance and omnipresence.

Personally, I feel like JavaScript has the potential to tap into so many popular industries like Machine Learning and Data Analysis, where Python still rules the game. It's even happening now with tools like Tensorflow.js!

However this was definitely not the case for JavaScript before. Earlier, it was a weak, non-performant language and was frowned upon. JavaScript was for "losers".

But not anymore. Let's see how JavaScript turned the tables in the last 10 years, why it has become stronger than ever, and why it is here to stay.

V8: The beast powering JavaScript

V8 is actually a JavaScript engine. What is a JavaScript engine, you might ask? A JavaScript engine is an interpreter which executes JavaScript code. A JavaScript engine can be implemented as a standard interpreter, or just-in-time (JIT) compiler that compiles JavaScript to bytecode in some form.

V8 is Google’s open source high-performance JavaScript and WebAssembly JIT engine, written in C++. It is used in Chrome and in Node.js, among others. V8 can run standalone, or can be embedded into any C++ application.

This is the piece of software which highly optimizes your JS code and converts it into machine code for the CPU to execute. Some of the tasks V8 handles are:

1. Garbage Collection
2. Compilation to Machine code
3. Inline caching
4. Pointer compression
5. and much much more optimization

As a matter of fact, pointer compression is a very new technique in V8 to boost memory optimization while having no effect on performance. If you're a geek, you can read more about how it is implemented on the official V8 blog.

The takeaway from this is that you can write JavaScript and sleep tight at night because your JS code is in very good hands.

Mature ecosystem and community

JavaScript has one of the most mature – if not THE most mature – ecosystems a programming language could ever have. The community for JavaScript is vast, and the entry barrier is extremely low.

You can fire up a browser (found on 100% of personal computers), open the console, and you'll find a JS engine waiting for you to run code! This was never the case with any other programming languages of such complexity.

As if the vast community wasn't enough, we have the npm and yarn package systems. You name it and there's a package for that on the npm registry – everything from creating random strings to handling streams and buffers in JavaScript. There's a very famous saying among JavaScript developers:

What can be done in JavaScript, would eventually be done in JavaScript

It's funny, but lowkey, I believe this.

If you enter as a beginner, there is very little chance you encounter a problem which nobody has encountered before. This is because all possible mistakes for simple JavaScript issues have probably already been asked about and archived on sites like Stack Overflow.

Frameworks and libraries like React, Angular, and Vue are paving the way for how future applications should be built. They're shifting the perspective towards declarative instead of imperative programming, the what instead of how. This lets developers develop quality applications without worrying about underlying high performant code.

Omnipresence

JavaScript is present on:

1. Front end (Browsers)
2. Back end (Node, Deno)
3. Android/iOS (React Native, NativeScript, etc.)
4. Desktop (Electron)
5. Hybrid (Ionic)

What makes this possible? JS engines like V8 are written in C/C++ and can even be compiled on embedded systems! For other platforms, because browsers are always present (like on Andorid/iOS), they ship with a JS engine which can then be used to run any JS code, even for native apps in the case of React Native.

Bleeding edge features and advancement

JavaScript standards are led by the ECMA-262 TC39 community, and wow are these people fast! ECMAScript releases a new standard of JavaScript every single year (see the new ECMAScript2020 features!). You as a developer can even request that new features be added to the language.

For instance, here are some pending bleeding edge features which might make it into JavaScript in the near future:

You can find all the proposals here: TC39 Proposals.

JavaScript is FAST and SCALABLE

Of course, nothing really beats C/C++/Rust, but JavaScript is a fast - in the sense that V8 can generate highly optimized code by monitoring how your code executes, delaying the bits of execution which are not used, and optimizing the code segments which are used over and over. Especially when compared to its nearest competitors like Python. With the advancements in V8, it is becoming even more performant and memory efficient.

JavaScript (Node) is highly scalable (with supersets like TypeScript). Running on a single threaded architecture, people often criticize Node for its lack of threading environment, but the reality is it doesn't matter a lot.

The way you scale Node applications is not similar to how you'd scale a multi-threaded application. Node literally means "node" - a single node in a tree of processes. Node is scaled by running multiple instances of it and managing the cluster.

JavaScript leads the asynchronous event driven programming model of the industry, and does not need threads to scale. Instead, individual Node processes could be spawned to handle and utilize the complete CPU core. More on scaling Node later!

Conclusion

I love JavaScript, and using it I've created a developer platform for developers like you. There you can not only learn JavaScript, but also various other languages like C, C++, Java, Node, Python, and more! Join here for free and learn with other developers straight outta your browser!

JavaScript is here to stay, and rule the industry this decade. Do you agree? Tell me on my twitter and Instagram handles - let's connect!

Good news – the new ES2020 features are now finalised! This means we now have a complete idea of the changes happening in ES2020, the new and improved specification of JavaScript. So let's see what those changes are.

#1: BigInt

BigInt, one of the most anticipated features in JavaScript, is finally here. It actually allows developers to have much greater integer representation in their JS code for data processing for data handling.

At the moment the maximum number you can store as an integer in JavaScript is pow(2, 53) - 1 . But BigInt actually allows you to go even beyond that.

However, you need to have an n appended at the very end of the number, as you can see above. This n denotes that this is a BigInt and should be treated differently by the JavaScript engine (by the v8 engine or whatever engine it is using).

This improvement is not backwards compatible because the traditional number system is IEEE754 (which just cannot support numbers of this size).

#2: Dynamic import

Dynamic imports in JavaScript give you the option to import JS files dynamically as modules in your application natively. This is just like how you do it with Webpack and Babel at the moment.

This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of webpack or other module bundlers. You can also conditionally load code in an if-else block if you like.

The good thing is that you actually import a module, and so it never pollutes the global namespace.

#3: Nullish Coalescing

Nullish coalescing adds the ability to truly check nullish values instead of falsey values. What is the difference between nullish and falsey values, you might ask?

In JavaScript, a lot of values are falsey, like empty strings, the number 0, undefined, null, false, NaN, and so on.

However, a lot of times you might want to check if a variable is nullish – that is if it is either undefined or null, like when it's okay for a variable to have an empty string, or even a false value.

In that case, you'll use the new nullish coalescing operator, ??

You can clearly see how the OR operator always returns a truthy value, whereas the nullish operator returns a non-nulllish value.

#4: Optional Chaining

Optional chaining syntax allows you to access deeply nested object properties without worrying if the property exists or not. If it exists, great! If not, undefined will be returned.

This not only works on object properties, but also on function calls and arrays. Super convenient! Here's an example:

#5: Promise.allSettled

The Promise.allSettled method accepts an array of Promises and only resolves when all of them are settled – either resolved or rejected.

This was not available natively before, even though some close implementations like race and all were available. This brings "Just run all promises – I don't care about the results" natively to JavaScript.

#6: String#matchAll

matchAll is a new method added to the String prototype which is related to Regular Expressions. This returns an iterator which returns all matched groups one after another. Let's have a look at a quick example:

#7: globalThis

If you wrote some cross-platform JS code which could run on Node, in the browser environment, and also inside web-workers, you'd have a hard time getting hold of the global object.

This is because it is window for browsers, global for Node, and self for web workers. If there are more runtimes, the global object will be different for them as well.

So you would have had to have your own implementation of detecting runtime and then using the correct global – that is, until now.

ES2020 brings us globalThis which always refers to the global object, no matter where you are executing your code:

#8: Module Namespace Exports

In JavaScript modules, it was already possible to use the following syntax:

import * as utils from './utils.mjs'

However, no symmetric export syntax existed, until now:

export * as utils from './utils.mjs'

This is equivalent to the following:

import * as utils from './utils.mjs'
export { utils }

#9: Well defined for-in order

The ECMA specification did not specify in which order for (x in y) should run. Even though browsers implemented a consistent order on their own before now, this has been officially standardized in ES2020.

#10: import.meta

The import.meta object was created by the ECMAScript implementation, with a null prototype.

Consider a module, module.js:

<script type="module" src="module.js"></script>

You can access meta information about the module using the import.meta object:

console.log(import.meta); // { url: "file:///home/user/module.js" }

It returns an object with a url property indicating the base URL of the module. This will either be the URL from which the script was obtained (for external scripts), or the document base URL of the containing document (for inline scripts).

Conclusion

I love the consistency and speed with which the JavaScript community has evolved and is evolving. It is amazing and truly wonderful to see how JavaScript came from a language which was booed on, 10 years go, to one of the strongest, most flexible and versatile language of all time today.

Do you wish to learn JavaScript and other programming languages in a completely new way? Head on to a new platform for developers I'm working on to try it out today!

What's your favorite feature of ES2020? Tell me about it by tweeting and connecting with me on Twitter and Instagram!

This is a blog post composed from my video which is on the same topic. It would mean the world to me if you could show it some love!

Before diving deep into the core of Chrome’s V8, first, let’s get our fundamentals down. All of our systems consist of microprocessors, the thing that is sitting inside your computer right now and allowing you to read this.

Microprocessors are tiny machines that work with electrical signals and ultimately do the job. We give microprocessors the instructions. The instructions are in the language that microprocessors can interpret. Different microprocessors speak different languages. Some of the most common are IA-32, x86–64, MIPS, and ARM. These languages directly interact with the hardware so the code written in them is called machine code. Code that we write on our computers is converted or compiled into machine code.

That’s what machine code looks like:

Source : Google

It consists of instructions that are performed at a particular piece of memory in your system at a low level. You must feel lucky for not having to write all this to run your program!

High-level languages are abstracted from machine language. In the level of abstraction below, you can see how far JavaScript is abstracted from the machine level. C/C++ are relatively much closer to the hardware and hence much faster than other high-level languages.

Now back to the V8 engine: V8 is a powerful open source Javascript engine provided by Google. So what actually is a Javascript Engine? It is a program that converts Javascript code into lower level or machine code that microprocessors can understand.

There are different JavaScript engines including Rhino, JavaScriptCore, and SpiderMonkey. These engines follow the ECMAScript Standards. ECMAScript defines the standard for the scripting language. JavaScript is based on ECMAScript standards. These standards define how the language should work and what features it should have. You can learn more about ECMAScript here.

Source: Google

The Chrome V8 engine :

• The V8 engine is written in C++ and used in Chrome and Nodejs.
• It implements ECMAScript as specified in ECMA-262.
• The V8 engine can run standalone we can embed it with our own C++ program.

Let us understand the last point a little better. V8 can run standalone and at the same time we can add our own function implementation in C++ to add new features to JavaScript.

So for example: print('hello world')is not a valid statement in Node.js. It will give error if we compile it. But we can add our own implementation of the print function in C++ on top of the V8 which is open source at Github, thus making the print function work natively. This allows the JavaScript to understand more than what the ECMAScript standard specifies the JavaScript should understand.

This is a powerful feature since C++ has more features as a programming language as compared to JavaScript, as it is much closer to hardware like dealing with files and folders on the hard drive.

Allowing us to write code in C++ and making it available to JavaScript makes it so we can add more features to JavaScript.

Node.js in itself is a C++ implementation of a V8 engine allowing server-side programming and networking applications.

Let’s now look at some of the open source code inside the engine. To do this, you need to go to the v8/samples/shell.cc folder.

Here you can see the implementation of different functions such as Print and Read, which are natively not available in Node.js.

Below, you can see the implementation of the Print function. Whenever the print() function is invoked in Node.js, it will create a callback and the function will be executed.

Similarly, we can add our own implementation of different new functions in C++ inside V8 allowing it to be understood by Node.js.

That is certainly too much to grab for a simple statement and that’s the amount of work V8 engine does under the hood.

Now you must have a clear understanding of how Node.js works and what actually is the Chrome V8 engine.

Thanks for reading this article. Let’s follow up on Twitter, Linkedin, Github, and Facebook.