Why the with() method of JavaScript Array is a gem?

Discover the new with() method in JavaScript Arrays from ECMAScript 2023 with examples and use cases.

UpdatedJuly 11, 2024

•5 min read•View as Markdown

Why the with() method of JavaScript Array is a gem?

Tapas Adhikary

Comments (17)

Join the discussion

francisco loyola1y ago

Can it be used in a project such as Angular +11 ?

Geta Spoon1y ago

really useful, appreciate

USB Restore1y ago

Thank you for this information!

JHK Infotech1y ago

Immutable Updates: It creates a new array without altering the original, making it useful in state management. Readability: It provides a clean and concise syntax for updating elements at specific indexes. Safer: Since it doesn’t mutate the original array, it reduces the risk of side effects in your code. let arr = [1, 2, 3]; let newArr = arr.with(1, 5); // [1, 5, 3] console.log(arr); // Original array remains [1, 2, 3]

Andrew Baisden1y ago

Another helpful method. Thanks for sharing.

Tapas Adhikary1y ago

Thank you Andrew Baisden. Appreciate it

Jackson David1y ago

i live in Canada a friend introduces me to blank atm card which i got from Davidwilson hackers, i believe him so well not like scammers out there i have withdrew $50000 with this card so i decided to share a testimony if you are interested contact him now for Financial Solutions Davidwilson2284@gmail.com

David Williford1y ago

I like how it allows you to use negative indexes. I'm surprised this is not already a feature in javascript.

Tapas Adhikary1y ago

Thank you David Williford

byteDev2y ago

Wow, this Method is can be quick use snippet, thanks, keep writing

Tapas Adhikary2y ago

Thank you byteDev

Benjamin Rensch Vinterberg2y ago

I did not know this existed, thank you for the blog post. While I have no use case for this ( for now at least ) I always love learning more about the language I use as my daily driver.

Tapas Adhikary2y ago

Superb Benjamin Rensch Vinterberg

RedCode2y ago

Great! Thanks bro!

Tapas Adhikary2y ago

thank you RedCode

More from this blog

Goodbye, Slow-Motion Tortoise: A Deep Dive into SSR Streaming

Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.

Jul 21, 202610 min read105

Goodbye, Slow-Motion Tortoise: A Deep Dive into SSR Streaming

Mastering React Design Patterns for Building Maintainable Forms

Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD

Feb 10, 20266 min read548

Mastering React Design Patterns for Building Maintainable Forms

JavaScript Variables Explained Clearly: Values, Types, and How Data Really Works

Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.

Jan 28, 20265 min read178

JavaScript Variables Explained Clearly: Values, Types, and How Data Really Works

JavaScript Explained From Scratch: How the Web Becomes Interactive

A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment

Jan 22, 20265 min read146

JavaScript Explained From Scratch: How the Web Becomes Interactive

Tidbit 01: How Does Event Loop Handle Promises? Ever Thought?

Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.

Jun 10, 20252 min read461

Tidbit 01: How Does Event Loop Handle Promises? Ever Thought?

GreenRoots Blog - A Blog by Tapas Adhikary

186 posts

Educator | YouTuber | Building ReactPlay | Let's Connect

JavaScript array methods offer plenty to web developers already. The methods like map(), reduce(), filter() , some(), every(), and many more have helped build our JavaScript muscles for better logic and algorithms.

The with() method is a relatively new inclusion to the JavaScript array method list, and its only intention is to change the value of a given index in an array in the "immutable" way. A big deal? Yes! Let's learn.

Btw, please do not confuse the with() method from the JavaScript Array with the with statement from the language. The with statement has been deprecated whereas, the with() method is a new inclusion to the language. People say JavaScript is weird, naming things is possibly a reason for it!

This article is also available as a video tutorial now. You can check it out here:

https://www.youtube.com/watch?v=TFsria_3sw8

The traditional way to seek and change

Let us consider an array of numbers,

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

How would you change the element of an array for a given index? Suppose you need to change the element 3 which is at the index 2(remember, the array index in JavaScript starts with 0) with a new element, say, 6.

The usual instinct would be to do this,

numbers[2] = 6;

console.log(numbers); // [1, 2, 6, 4, 5];

This works! However, there is a problem. We have mutated(aka, permanently changed) the original array. When you deal with data in your application, a data structure like an array should hold the original(unchanged) data as a "source of truth". You wouldn't want it to be modified by any functions and logic to achieve better predictability in your code.

Immutability is a great tool

Immutability is a mechanism to ensure that we can not change something(an array, object, etc). However, if we need a modified version of it, we need to first create a copy of the original and then make modifications to the copied version. This ensures that the original data is never changed by anything in the application, knowingly or unknowingly.

So, how about changing the element of an array at a given index, in an immutable way? It means every time we change an element in an array, we do not mutate the original array, rather we get back a new copy of the original array with the change applied.

The with() method and immutability

ECMAScript 2023 introduced a new method called with() to solve this problem of mutability and achieve immutability while changing an element of an array. So now, instead of using a given index on the array directly, we can use the with() method to change the element value.

The with() method takes two parameters:

index - An index value which can start from 0, and also can be a negative number. The negative index counts backwards from the end of the array.
value - The value to change at a given index.

Let us now apply the with() method on the same array to change the element at a given index,

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

const newArray = numbers.with(2,6);

console.log(numbers); // Unchanged => [1, 2, 3, 4, 5];
console.log(newArray); // Changed(A new copy) => [1, 2, 6, 4, 5];

As you see, the with() method produces a new copy of the original array with the change applied. The original array is unchanged.

The with() method and the negative index

One more drawback of the direct index-based element seeking to get an element at a given index is that you can not use the negative number as an index value. Try something like the code snippet below, you will get an undefined.

numbers[-2]; // undefined

Also, trying to set a value on a negative index will have unexpected results,

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

console.log(numbers); // [1, 2, 3, 4, 5, -2: 8]

Did you see that? You have ended up adding something completely different than what you anticipated. But, using the with() method, you can change an element of an array at a negative index. The negative index starts from the end of the array with an index value of -1 and move backwards.

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

const anotherArray = numbers.with(-2, 8);
console.log(anotherArray); // [1, 2, 3, 8, 5]

In the above code, we have changed the second element of an array from the end. Hence the element 4 in the array is replaced with the element 8.

You can use the at() method of JavaScript array to read an element using a negative index.

anotherArray.at(-2); // 8

Method chaining

As the with() method returns an array, you can chain the output of the with() method along with other array methods, like map(), filter(), reduce(), etc.

In the code snippet below, we replace the second element of the ages array with a new element, and then map the output array to multiply each element by four.

const ages = [12, 23, 56];

const mappedAges = ages.with(1, 32).map(x => x * 4);

console.log(mappedAges); // [48, 128, 224]

Can you please give a real-life use case of the with() method?

Sure! When I published a YouTube video on this topic, I got a question about the real-life use case of the with() method. The exciting thing is, that I discovered the with() method when I was building a use case that needs the feature it offers. The image below provides a summary of the use case.

JavaScript Array with() method use case

Conclusion

That's all for now. I hope you agree with me that the with() method is a true gem providing us immutability and negative index accessibility with JavaScript Arrays. You can check out these articles to learn more about JavaScript arrays and their unique use cases:

Liked it? Please let me know with your comments and likes. ❤️

Let's connect. I share knowledge on web development, content creation, Open Source, and careers on these platforms.

Command Palette

Comments (17)

More from this blog

The traditional way to seek and change

Immutability is a great tool

The with() method and immutability

The with() method and the negative index

Method chaining

Can you please give a real-life use case of the with() method?

Conclusion