Kinanee Samson2023 has been quite an eventful year for Javascript, There's no shortage of new Javascript libraries published on NPM, and talking about NPM, there's also a new Javascript run time and package manager named Bun whose sole purpose is to terminate NodeJS and NPM. It's still struggling to do because although I made quite a post where I stated the potential of Bun and how it can give NodeJS a run for its money. That has hardly happened because I'm yet to use Bun on any real-world application and I've built at least two apps since the first official release of Bun. There have been some new welcomed additions to Javascript array methods, giving us more ways to work with arrays that follow a pattern that we are all familiar with, array.toReversed and array.toSorted are among some of the new Javascript array methods added in 2023.
Typescript, got a bit of backlash along the way in 2023 with some major Libraries dropping typescript and going with alternative ways to still type themselves to death, luckily that did very little to Typescript's popularity and use in 2023. Although we can all agree that something needs to be done about the amount of broiler-plate code you have to write and maintain to make your Typescript code work. In today's post, we will examine how 2023 went for Javascript and as such we will consider the following talking points.
- New additions to Javascript
- New additions to NodeJS
- How is Bun faring
- What about Javascript UI frameworks
- What the future holds for Javascript
New additions to Javascript
Javascript as a scripting language got a lot of wholesome additions this year, let's start with some useful array methods that were added to greatly simplify the way you work with arrays.
array.findLast()
This method allows you to find the last element in an array that satisfies a given predicate. This method works very similarly to array.find however the find() method returns the first item that passes the predicate, and the findLast() method will return the last item that passes the predicate, let's see an example.
const array = [2, 1, 6, 5];
// predicate returns the an even number
const predicate = (number) => number%2 === 0
// find the first item that passes the predicate
const firstItem = array.find(predicate);
console.log(firstItem) // 2
// find the last item that passes the predicate
const lastItem = array.findLast(predicate)
console.log(lastItem) // 6
array.findLastIndex()
The findLastIndex method is very much similar to the findLast method we just discussed above but instead of returning the item, it returns the index of the item. Much like how findIndex works.
const array = [2, 1, 6, 5];
// find the index of the first item
// that passe the predicate
const firstIndex = array.findIndex(predicate)
console.log(firstIndex) // 0
// find the index of the last item
// that passe the predicate
const lastIndex = array.findLastIndex(predicate);
console.log(lastIndex) // 2
Let's look at other array methods, this is the icing on the array cake because this method makes us write code with fewer bugs that's if we don't find ways to introduce more bugs. If you call the sort() method on an array or the reverse() method on an array it will mutate the original array. This can mess up the flow of your code and potentially cause a bug that could be quite difficult to trace thus Javascript has provided us with immutable array methods. This immutability offers several benefits: Immutable arrays prevent unexpected mutations, they also eliminate side effects caused by mutable methods and they allow our code to adhere to functional programming principles by encouraging the creation of pure functions.
array.toSorted()
This method returns a sorted copy of an array. It is similar to array.sort() but instead of mutating the array it will return a copy of the array that has been sorted.
const array = [5, 2, 4, 1, 3];
const sorted = array.toSorted();
console.log(sorted); // [1, 2, 3, 4, 5]
console.log(number); // [5, 2, 4, 1, 3];
array.toReversed()
This method returns a reversed copy of an array. It is similar to array.reverse but it will not mutate the original array, instead it will return a reversed copy of the array.
const words = ["hello", "world"];
const reversedWords = words.toReversed();
console.log(reversedWords) // ["world", "hello"]
console.log(words); // ["hello", "world"]
array.with()
This method returns an immutable copy of an array with the specified element replaced. This method will not mutate the original array instead it will create a copy of the original array and replace the specified element only in the new array.
const colors = ["red", "green", "blue"];
const updatedColors = colors.with(1, "yellow"); // ["red", "yellow", "blue"]
console.log(colors); // ["red", "green", "blue"]
array.toSpliced()
This method will make a copy of an existing array with the elements at the index which we specify to the toSpliced method excluded from the original array. This method does not mutate the original array, rather it returns a copy of it. It is very much similar to array.splice().
const fruits = ["apple", "banana", "orange", "grape"];
const slicedFruits = fruits.toSpliced(1, 2);
console.log(slicedFruits) // ["apple", "grape"]
console.log(fruits); // ["apple", "banana", "orange", "grape"]
Now let's move on to some of the new addiditions that were made to NodeJS in 2023
New addiditions to NodeJS
There have been so many useful additions to the Node.js run-time, there has been improved support for ECMAScript modules, and native support for .env files, although you get a feeling that most of these changes were pushed because of the newest kid on the block of Server-side Javascript run-times, Bun which we will also consider in this article. So let's quickly brush through some of the biggest additions to Node.js.
Enhanced ECMAScript Module Support
There's an improved resolution of module paths, which provides better cross-platform compatibility and also greatly simplifies module management. ECMAScript Modules (ES Modules) are the standard format for organizing and sharing code in JavaScript applications however Node.js uses Common JS Modules (CJS Modules) and as such has poor out-of-the-box support ES Modules, developers often have to use a gimmick or workaround to use ES Modules but that is not the case anymore going forward from Node 20. With ES Modules in Node.js, you do not need to use the require() statement anymore. Instead, you should use the import statement. There's also support for URLs as module specifiers and this implies that modules can be imported from the web, as well as from the local filesystem. All
Upgraded V8 Engine
The V8 JavaScript engine is a high-performance JavaScript engine that is used by Node.js runtime environment and all chromium-based browsers, V8 is written in C++ and it is quite efficient in executing Javascript. The most important update to the V8 engine that's important for developers is support for WebAssembly SIMD intrinsics. WebAssembly SIMD (Single Instruction, Multiple Data) intrinsics are a set of instructions that allow WebAssembly modules to perform parallel computations on multiple data elements simultaneously. This can significantly improve the performance of code that is computationally intensive, such as image processing, video encoding, and scientific computing.
The upgraded V8 engine in Node.js 20 includes support for WebAssembly SIMD intrinsics. This means that Node.js applications can now take advantage of these new instructions to improve the performance of any code that is computationally intensive.
Experimental Support for NodeJS for Native Modules (NAPI)
Napi was introduced in Node.js 20, It provides a new C++ API for creating native Node.js modules, the goal of this API is to address the limitations of the legacy Native Addon (NA) API. This NAPI API promises improved compatibility, simplified development, enhanced performance, and increased reliability. NAPI's more straightforward API and consistent conventions make it easier to write and maintain native modules that can easily work across different Node.js versions and platforms, improving code portability.
Standardization of hashbangs (#!)
Before ECMAScript 2023 (ES14), executing a JavaScript file directly from the command line required manually specifying the interpreter path in the first line of the module. This process could vary depending on the operating system and Node.js installation.ES14 standardizes the use of hashbangs (#!) in JavaScript modules, enabling direct execution without the need for explicit interpreter invocation. The hashbang syntax is a simple convention that indicates the interpreter to be used for executing a module. It consists of a shebang (#!) followed by the path to the interpreter and optionally any arguments. For a JavaScript file, the hashbang line typically includes the path to the Node.js executable.
How is Bun faring
The blazingly fast Javascript runtime, Bun which was released in July of 2023, did cause quite a stir from the community when it was released and I have an article where I discuss what Bun is and why it might be the ultimate replacement for Node.js. Well, how the hell is Bun coping? I want to give you my own humble opinion and perspective. Although I wrote that article on Bun, I still don't have the runtime installed on my computer and this is something I find particularly disturbing.
I am interested in Bun as a tool and would love to use it but the odds are not in my favor or should I say the odds are not in favor of Bun, why? This is because all of the projects I'm currently working on are all Node.js projects and I don't think the leaders of the project or owners would be patient enough to make a shift to Bun. Although Bun is meant to be a drop-in replacement for Node.js we all know that there's nothing like a simple drop-in replacement when it comes to switching runtime or platforms. Some time must be spent on ensuring everything works the way it was supposed to work, time which the project owners or leaders would rather spend adding new features to the app.
Here's the second factor, you might ask yourself what about starting new Projects with Bun, and we will still run into the same time factor because if I have to work on a new project. There are two things I must consider;
- My Client or Project Owner does not care much about what you use.
- I don't have time to use something that I'm still learning because projects have deadlines and there's nothing more crazy than being behind schedule.
The two factors above have crushed the odds of me getting to use Bun on a real-world project. No matter how much I love Bun the reality of the situation has made this a one-sided affair. Then we also have to look at Node.js because some of the features that made Bun so appealing have been incorporated into Node.js, this includes more support for ECMAScript modules, .env files, and standardization of the hashbang. These features have stiffened the competition between the two platforms and if there's anything we've learned from Deno is that it's very difficult to escape the shadow of Node.js but it remains to be seen, I am hopeful about Bun but I have to admit it's task is quite daunting.
What about Javascript UI frameworks
How are Javascript UI frameworks fairing this year? By this time last year, there was lots of talk on shipping as little Javascript to the browser as possible with some even claiming of shipping 0 javascript to the browser. But more than ever we are still shipping Javascript to the browser, highlighting the irony of those kinds of UI frameworks. Some claim to offer so many benefits over traditional UI frameworks that ship a humongous amount of Javascript to the browser and it seemed like they would take the lead in the war of Javascript UI frameworks. But deep down I never really fancied them because Javascript was created to be shipped to the browser so there's nothing wrong with shipping an ungodly amount of Javascript to the browser as far as they don't cause any performance bottleneck.
Last year we crowned React "The King of Javascript UI frameworks" and try as they might other frameworks did not even come close to wrestling the crown from the King. This section deserves its article and I will do justice to the most popular Javascript UI libraries and how they are performing but for now, I just want to leave you with this, React will remain the King for the next year, Angular will soon go where the dinosaurs went because as I always say, maybe building an app should be as straight forward as possible. Some people are trying to give Vue a fake crown as the Best Javascript UI but we all know that Vue is the unstable child of Angular and React who lives in the shadow of their parents.
What the future holds for Javascript
This is an important question to ask and I'm going to give you a very short answer, Javascript is still going to be a major part of the software development stack, be it in frontend/client-side app development or backend/server-side development. React-Native is still going strong for mobile application development so there are still going to be lots of amazing opportunities for Javascript developers.
That's going to be it for today, I hope you found this useful, I would love to hear your thoughts about the post and what the biggest changes to Javascript and Node.js I left out that you feel should be up here. Please use the comment section below, If you are looking at learning React for free then you can check out my YouTube channel where I have a course on React for Javascript developers with over 13 videos on getting started with building UIs with React, and another 7 part series on React Hooks, well what are you waiting for? Check it out.
