JavaScript Array with() Method (new in ES 2023)

What's with the new with() method on JavaScript arrays?
with() is new in ECMAScript 2023, also known as ES 14, which is the standard for JavaScript.
In this video, we look at how to replace an element in an array. Using the bracket syntax mutates the original array. Using with() instead creates a new array with the changed element, treating the original array as immutable.
with() is a great choice when working in applications that support immutable patterns such as state management libraries and functional programming techniques.
*Links*
JavaScript Code: stackblitz.com/edit/array-with-deborahk
KZbin Video, "Understanding Immutability in JavaScript": kzbin.info/www/bejne/enO9doaGiJJoo7M
KZbin Video, "JavaScript Array sort() vs toSorted() (new in ES 2023)": kzbin.info/www/bejne/gpyqdHd6ZdmLh6s
Includes information on setting up Angular to support ES 2023 features.
*Content*
00:00 Array with() method
00:34 Replacing an Element in an Array
02:08 Array with() method is immutable
03:02 with() supported in ES 2023 and TypeScript 5.2
03:59 The with() method and negative indexes
04:30 Chaining with the with() method
05:03 Wrap Up
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and KZbin content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
Contact me on Twitter (X): DeborahKurata
Find my Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Access my freeCodeCamp articles: www.freecodecamp.org/news/author/deborah-kurata/
View my KZbin content: www.youtube.com/@deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#javascript #with #withmethod #es14 #es2023

[@richarddefortune1329]

Great as usually

[@deborah_kurata]

Thank you!

[@dg-cg5gi]

Any chance for a long video on Angular 17 enhancements? Like a similar course that you have on Pluralsight? Would love to watch that and learn!

[@ashishnayak2666]

Awesome explanation 👏

[@deborah_kurata]

Thank you 🙂

[@fieryscorpion]

That was an excellent summary of .with(). Your teaching style is second to none. Thank you! Would you also make videos/books on .NET and Java/ Spring Boot?

[@deborah_kurata]

Thank you very much! I did one .NET/C# video and it didn't get many views. But maybe I'll try again? Sorry to say that I don't know Java/Spring Boot. Thanks again!

[@fieryscorpion]

@@deborah_kurata Thank you. After .NET community sees your videos, they’ll be hooked! 😀

[@deborah_kurata]

@@fieryscorpion That is kind of you to say. Thank you!

[@user-fy4qe7so3o]

MY IDOL

[@deborah_kurata]

😊

[@OCEMTechZone]

🎉

[@danielabonvini]

Hi Deborah, great video as always! I was wondering: is with() almost the same as toSpliced() with the only difference the fact that you can't optionally select only a part of the array to copy instead of all the elements?

[@deborah_kurata]

Thanks! with() is being focused on changing one element. toSpliced() is more flexible and allows for removing items, replacing one element with multiple elements, and inserting new elements

[@attoumak]

They could have chosen an explicit name, why naming it with() instead of replace() 😞

[@deborah_kurata]

Yeah, it would have been interesting to have been in that conversation! 😄

[@dee.s.4513]

Deborah, please zoom in on your code text. And, more JS videos please.

[@deborah_kurata]

Thank you for the suggestions!

[@StephenRayner]

Please stop using let 😢😂… you will have all these people coding immutable which is not good unless it’s needed. Use const

[@deborah_kurata]

Let's think though this a moment. Say I have an array bound to a UI element. Let's call that variable "ages". If I want to modify that array *and* have it appear updated in the UI, I need to change that same variable to a new array. I can do that in an *immutable* way by creating a new array and assigning it to that same variable. To change the variable, I need a "let".