DEV Community

Cover image for 8 Exciting New JavaScript Concepts You Need to Know
Dipak Ahirav
Dipak Ahirav

Posted on • Edited on

8 Exciting New JavaScript Concepts You Need to Know

As a developer, staying up-to-date with the latest advancements in JavaScript is crucial to writing efficient, modern, and scalable code. In this post, we'll explore 8 new and exciting JavaScript concepts that you should know to take your coding skills to the next level.

please subscribe to my YouTube channel to support my channel and get more web development tutorials.

1. Optional Chaining (?.)

Introduced in ECMAScript 2020, optional chaining allows you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

let name = person?.address?.street?.name;
Enter fullscreen mode Exit fullscreen mode

2. Nullish Coalescing (??)

Also introduced in ECMAScript 2020, the nullish coalescing operator returns the first operand if it's not null or undefined, and the second operand otherwise.

let name = person?.name?? 'Unknown';
Enter fullscreen mode Exit fullscreen mode

3. BigInt

A new numeric primitive in JavaScript, BigInt is used to represent integers with arbitrary precision, allowing for accurate calculations with large integers.

const x = 12345678901234567890n;
Enter fullscreen mode Exit fullscreen mode

4. globalThis

A new global object, globalThis, provides a way to access the global object in a way that's compatible with modern JavaScript environments.

console.log(globalThis === window); // true in a browser
Enter fullscreen mode Exit fullscreen mode

5. matchAll()

A new method on the String prototype, matchAll() returns an iterator that yields matches of a regular expression against a string, including capturing groups.

const regex = /(\w)(\d)/g;
const str = 'a1b2c3';
for (const match of str.matchAll(regex)) {
  console.log(match);
}
Enter fullscreen mode Exit fullscreen mode

6. Promise.allSettled()

A new method on the Promise API, allSettled() returns a promise that is resolved when all of the promises in an array are either resolved or rejected.

const promises = [Promise.resolve('a'), Promise.reject('b'), Promise.resolve('c')];
Promise.allSettled(promises).then((results) => console.log(results));
Enter fullscreen mode Exit fullscreen mode

7. String.prototype.at()

A new method on the String prototype, at() returns the character at the specified index, allowing for negative indices to access characters from the end of the string.

const str = 'hello';
console.log(str.at(0)); // 'h'
console.log(str.at(-1)); // 'o'
Enter fullscreen mode Exit fullscreen mode

8. Error Cause

A new property on Error objects, cause allows you to specify the underlying cause of an error.

try {
  throw new Error('Error occurred', { cause: new Error('Underlying cause') });
} catch (error) {
  console.log(error.cause);
}
Enter fullscreen mode Exit fullscreen mode

Start Your JavaScript Journey

If you're new to JavaScript or want a refresher, visit my blog on BuyMeACoffee to get started with the basics.

šŸ‘‰ Introduction to JavaScript: Your First Steps in Coding

Support My Work

If you enjoy my content and want to support my work, consider buying me a coffee! Your support helps me continue creating valuable content for the developer community.

Feel free to leave your comments or questions below. If you found this guide helpful, please share it with your peers and follow me for more web development tutorials. Happy coding!

Series Index

Part Title Link
1 Ditch Passwords: Add Facial Recognition to Your Website with FACEIO Read
2 The Ultimate Git Command Cheatsheet Read
3 Top 12 JavaScript Resources for Learning and Mastery Read
4 Angular vs. React: A Comprehensive Comparison Read
5 Top 10 JavaScript Best Practices for Writing Clean Code Read
6 Top 20 JavaScript Tricks and Tips for Every Developer šŸš€ Read
7 8 Exciting New JavaScript Concepts You Need to Know Read
8 Top 7 Tips for Managing State in JavaScript Applications Read
9 šŸ”’ Essential Node.js Security Best Practices Read
10 10 Best Practices for Optimizing Angular Performance Read
11 Top 10 React Performance Optimization Techniques Read
12 Top 15 JavaScript Projects to Boost Your Portfolio Read
13 6 Repositories To Master Node.js Read
14 Best 6 Repositories To Master Next.js Read
15 Top 5 JavaScript Libraries for Building Interactive UI Read
16 Top 3 JavaScript Concepts Every Developer Should Know Read
17 20 Ways to Improve Node.js Performance at Scale Read
18 Boost Your Node.js App Performance with Compression Middleware Read
19 Understanding Dijkstra's Algorithm: A Step-by-Step Guide Read
20 Understanding NPM and NVM: Essential Tools for Node.js Development Read

Follow and Subscribe:

Top comments (20)

Collapse
 
skamansam profile image
Samuel

at() is inherited from the Array prototype, which is inherited by the String prototype. It is way more useful than with Strings, as it allows us to use negative indices on arrays, a feature JS has needed for quite some time, IMO. Instead of writing myArray[myArray.length-1] you can now use myArray.at(-1).

Collapse
 
prashantsimejiyasiya profile image
prashantsimejiya-siya

Good Article

Collapse
 
dipakahirav profile image
Dipak Ahirav
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
remtech profile image
Remi Osisanya

Thanks for the information.:)

Collapse
 
mahmoud_sayed_fbc6599eb8f profile image
Mahmoud Sayed

great pieces of information tysm

Collapse
 
dipakahirav profile image
Dipak Ahirav

Thank You so much @mahmoud_sayed_fbc6599eb8f

Collapse
 
sahilatahar profile image
Sahil Atahar

Nice article!

Collapse
 
dipakahirav profile image
Dipak Ahirav • Edited

Thank You so much @sahilatahar

Collapse
 
neha_gawali_cf75c5651a487 profile image
Neha Gawali

globalThis new for me . thanks for information

Collapse
 
richardhovdsveen profile image
richardhovdsveen

Finally!

Collapse
 
robertfoconnor profile image
Robert O'Connor

Finally

Collapse
 
jamstra profile image
Jam Straw

Last is most interesting.

Collapse
 
lokeshkavisth profile image
Lokesh Kavisth

Very informativeā˜ŗļø

Collapse
 
dipakahirav profile image
Dipak Ahirav