Modern JavaScript: Leveling Up Arrays and Intl

Hi, I'm Mariko, I'm from Chrome Developer Relations Team. My handle is kosamari pretty much anywhere, although I haven't posted... I don't know where to go with all of the social things. You can find me on Blue Sky, but I haven't posted tech content.

Let's dive into the talk, leveling up JavaScript. I can remember two distinct times in my professional career where I sat down and learned JavaScript. I started my career in more of a business development and product management side, but then I decided to learn code. So at the time I sat down, learned basic JavaScript, and back then it was jQuery that I learned to sort of hack together a little bit of a front end app.

And that, a few years later, eventually got me a job writing code. And at this team that I joined, I was one day talking to senior engineers, and in one afternoon, like we, I think we did like some release or something, everybody was sort of in a relaxed mood, and then he tells me this thing called, there's gonna be a new JavaScript, and it's called ES6. And at that session, he told me all about there will be two more different ways to define variables, there will be class in JavaScript, ooh, scary, alone function and set and map and all the new things are coming in.

So then, at the time, I needed to sit down and learn ES6 again. And if you were around back then, you remember, if you go to a JavaScript conference like this, guarantee that there's at least one session about learn new things in ES6. So everybody was making focus onto this new version of JavaScript and learning it. And soon after, more tools got introduced to my dev workflow, like Babel, to preprocess. And that tool grew the ecosystem, I mean, the JavaScript ecosystem existed before ES6, but I feel like it accelerated of adding more things into build process and got really confusing. But we were writing code that gets preprocessed in order to be run on browser, and questions like, where can we write ES6 directly and run it in browser, that conversation happens.

And on top of that, TC39, the standard body for JavaScript or ECMAScript, decided that the release cycle for these moving forward is going to be eerie. So ES6 is actually ES2015, and since then, every year, TC39 has published a new version of JavaScript spec. And I could tell big updates, like, I think BigInt was added in 2020, but to be honest, because these come in every year and few things get added, few things get added, few things get added, I stopped paying attention. It's not like the energy I spend when I learn ES6 that every year I sit down and learn about new things. It sort of slipped things off. So today I want to focus on the parts of JavaScript that got updates recently, but you might miss that thing. And I proposed this talk when I proposed to focus on Array and Intel, because at the time I was seeing interesting things that I wanted to share with everybody. But then I added a few more things that are really handy to you. So it's not just Array and Intel. But as promised, let's start with Array. And as noted, you might know this function, you might not know this function. The point of it is to make a point that there are new things in JavaScript. So let's just quickly go through.

So ArrayFlat, this is the order of the new things, creates a new flattened array. So you have original array that is nested, like this one, the App also nested array, and you call flat on this function, and you get flatArray. That's that simple. You can also pass a depth as an argument into this method. So you have a multiply nested array. You can say, I want to only flatten it by level 2. You can do that too.

Another one is copyToReserve. So this method creates a copy of an array that is reversed. So you have original array, and then you call it toReversed, then you get a new copied array that is reversed. Again, copied. So the reverse method already exists, but toReversed creates a copy. So at this point, if you consult log the original array, then you still get the un-reversed array. In fact, to something something, the copy to do something method, there's a few of them. So copy to sort, to sort it, is a new one. So you have some bunch of numbers in the array, you call to sort it, then you get a copy of array. Of course, because it's JavaScript, one after that is 100, not 20. But same as sort method, you can also pass a callback function to check for that to get a correctly sorted array.

Another one is array to spliced. So you get original array, and you pass three arguments, that where the splice should happen and how many items to remove and what new items to add. So in this case, I want to say index one, where the cherry is, I don't want to remove anything, but I want to add a red apple into this array, and you get a copied array. Again, not modifying the original array. You get a copied array with new one added into it. And of course, you don't need to add anything, same as splice, you can just give an index and numbers to remove. In this case, index one, cherry point, I want to remove two items, so cherry and lemons are removed, and then new array, I mean, copied array get returned.

So another one that is very simple but very useful is array at method. This returns item at given index. So you have original array and you say array at one index. So then you get cherry there. Now, you might be thinking, isn't that the same as just using square bracket notation? Yes, it is the same thing at this point.

However, this is where it gets interesting, is that array at accepts a negative number. So if you give a negative number, then it looks up from the reverse order. So you can get orange by just saying array at minus two. This is much simpler and easier to understand, easier to read than just finagling it with a square bracket notation.

So speaking of doing things in reverse order, find last iterates in reverse order. So again, you have some sort of number, and say you want to look up an item that is more than 100, and you want to look up from the last. So array.findLast, and then pass that function that you defined. Array.findLast looks up from the back of it, and then once they find the one that matches with the function, it returns that item. And you can also do the same thing but returns an index. So you say array.findLastIndex with the same function, then it will return the index which is four because 200 is at the fifth point of the array. So index four will get returned.

So another one that is interesting is copy to change the value of a given index with array with function. So you have original array, and then I really do not want a lemon, and I want to replace it with orange. So let's say I was array with, lemon is at the index two, and I want to replace it with orange, then you get a copied array that contains orange. So let's move on from array because, you know, simple methods but, like, new. Maybe never heard of it. Maybe heard of it. Anyway.

So let's move on from array. But in the theme of dealing with data set, there is an object group by. So let's say you have an iterable. So this is array of objects of fridge items. Like cucumber, type vegetables. I have two in my fridge. And that one. And I want to group these and then create a new object by type. So I say object.groupby, and then pass the iterable fridge, and then give a function that collects for the type. Then this one returns new object that is grouped by vegetable and fruit, which is a type keyword in this original iterable. You can also pass a callback function in this case. I want to check if that item count is less than two or not.

And if it's less than two, I want to add it to my shopping list. So you write a callback of count, and if it's more than two, I put it in the okay bucket. If it's less than two, I add it to the list bucket. And once you run it, you get these objects back with two items to add to my shopping list. So that's object.groupby.

Another one that is really small but cool is a create a deep clone using structural clone. I bet that many of you, most of you, if not, have dealt with this hack of trying to deep copy an object by stringifying it, then parsing it back to have a deep copied object. In fact, this was really, really, really common hack that the V8, the JavaScript engine for Chrome specifically targeted to optimize this process because it was so commonly used. But now you don't need to do that anymore. You can just write structural clone and pass that iterable and then it will get deep copy. So much easier, simpler to understand.

Another one in the sort of vein of data processing is mathematical operations that recently got added to JavaScript set. Now, set has been part of JavaScript since year six. It's simple. You make a set. But recently they got a bunch of new updates, methods that deal with mathematical operations. So here I have a set for pizza toppings and set for pasta ingredients. And I can call a method called pizza union pasta. And that returns a new set of five ingredients because it is a union of two sets. And there's other mathematical function as well. You can also check a subset. So I have a tomato sauce set that has tomato and garlic, and I have a pasta set that has a onion, tomato, cheese, and garlic. And I can say tomato sauce is subset of pasta, then the return is true because tomato and garlic are included in a pasta set as well. So this is really handy.

I want to end this demo part with a touching on JavaScript intl. This is something that got introduced after ES6. And to be honest, I knew it existed but did not pay attention to it at all for, like, I don't know, like five years since it got introduced to JavaScript.

So I needed to deal with this problem that intl.segmentator solves. So let's say you have an English word. It's easy to spot a word break because in English we use spaces for word break, right? But what if you have some language other than English, like Japanese, do you know how to segment a word? Do you know where the word break happens? Like, is it a word or is this a word? In fact, I know how to word it because I speak Japanese, but I don't know how to tell a computer how to spot that word.

This is something that I might use external library, but now it comes built in in JavaScript. So you create a segmenter by doing new intl.segmentor with a Japanese, and then set the granularity to word. And then you use the segmenter to segment text by passing input text. And this returns a bunch of objects with segment text, so the first one is a word. And at the index of zero from the input of this text line, and it is word-like, true. It is a word. And do that for all of the word segments. And things like period, in Japanese we use this circle thing. It is a word segment, but is it a word? No. So it is word-like. It will return false. And this is really handy.

Let's say you are dealing with user input from the multiple languages, or you are dealing with text to display on different languages, and it wants to give users better readability, right? And knowing where to optimally word break will help users readability of the long text. I get very frustrated when Japanese words are line break in Bitwin. One thing if it is two line header, but if it is 100 word paragraph, it gets really frustrating to read. And this solves the problem. Built in in JavaScript. In fact, I don't have all the time to go into Intel. But since I discovered the Intel segmenter, I was like, huh, a whole bunch of things I would consider adding a third party library is now part of JavaScript. So there are things like data type format, number format, and plural rules, all for locale based result. So please do check them out.

All of these updates brings me to the question of how does anybody keep up with all of the updates? And how do you know when a feature is interoperable, supported by all browsers. And how quickly can we start using them once they hit the interoperability? Because maybe Safari ships a new version today and something gets supported. Can I use it today in production? Yes, maybe? I don't know.

I don't know how to decide. So you might go see, can I use? Or you might see MDN, browser compact data, to know, you know, okay, these things are green from Luffrey, older number, maybe we can use it. And like, you can do that. But it is really time consuming to check every individual features and make your decision of whether you support it or not, right?

In fact, in our team, we run developer research on our team, and 25% of respondents on our survey answered that they see staying up to date on web features is to be challenging. Because this process is really time consuming, everybody on your team has to do it individually, and also it is very error prone, with a lot of features in the platform, especially things like CSS, we get partial implementations.

So for example, gap property, for a while, worked in GridLayout, you can use gap in GridLayout, but at the same time, couldn't use it in Flexbox. But you might expect if something is working in one place in a language like CSS, you want to use it elsewhere and expect it to work, and when it doesn't, you get really frustrated because, oh, why? It is the same thing. So, with rapid feature development in web platform and varying browser release cycles, it's really hard to pinpoint a version for the web to use. There isn't really a point like we had with ES6 when everybody was paying attention to new additions and targeting the browser support based on that certain time in browser release cycle. Switched us to the project we announced a little over a year ago called Baseline.

And Baseline is how I found those new features I demoed in the talk. So what's Baseline? Quick summary. Baseline gives you clear information about which web platform features work across our core browser set today. So core browser sets are for major browsers, for desktop and mobile, and when reading an article or choosing libraries for your project, if the feature is used or part of Baseline, then you can trust the level of browser support. Means it works in all browsers without any unexpected hitches.

There are different levels of Baseline, so let me just spend a few minutes explaining. So Baseline newly available, blue checkmark is point of interoperability supported by all browsers. A feature becomes newly available on the day the last browser of our core browser set supports that feature in stable, not the dev or the current stable version. But that means it may not work on older devices or browsers. You might be fine with it. Your user might tend to update the browser quickly. But you might wait for it, right? So then, for that, we have another version, second one called more conservative version called Baseline widely available. And feature becomes Baseline widely available after 30 months has passed since it became newly available. This is two and a half years, so it's a good time for a feature to be established and be ready to use.

There's a third one, it's called limited availability, but it really means that the feature is not yet Baseline. So one normal browser does not support it. Let me visualize this circle. So a feature gets specced, or one of the browsers implements it. It's still a limited browser support status, not a Baseline yet. But then, feature is interoperable, supported by all the core browser set, then yay, it gets blue checkmark and called newly available.

Then, 30 months passes, the same feature gets a green checkmark, and now it's called Baseline widely available. Get it? Yup. Okay. So, in fact, you may see these checkmark logo appearing on sites like Can I use MDN recently, because we've been updating it this year. This is how I found those updates to features I demoed today. So many of the features I demoed are Baseline newly available from 2023 and 2024 even, and they are still listed as newly available because they shipped in August of 2022. Not quite 30 months has passed, but soon they will move onto Baseline widely available status. So you get the idea about blue checkmark, the newly available, and green checkmark, the widely available. Which one should you use in your project? By aligning your project to Baseline, you can be pretty confident there's significantly less chance that you encounter issue related to browser compatibility. So, for limited, if you can control your users to use certain version of certain browser, you can use limited. Maybe you work on enterprise and you can tell users to pinpoint, I envy you for working those applications, but not the case for me. So newly available, if you are working on project that might not ship for next six to one year, then you might start using these, because by the time you ship it, these will be available and possibly be widely available. If your users are cutting edge and tends to update browsers or devices, then you might use newly. And where newly available is more common could commonly use is progressive enhancements. So, if a feature is something that could be progressively enhanced, which means that the user with older browser versions gets the same experience, but then the user with newer version of browser gets an enhanced and better experience. So, at that case, you can pick newly available. And widely, as I said, it is generally safe to use for all sites.

So, I've been discussing Baseline versions. You can also use Baseline to keep up with what's new on the web. So, there is a Baseline widget. If you like a blog or maintain an internal documentation, use Baseline widget, like this one we use on the web.dev. You can install it NPM or include a precompiled version from CDN. And once installed, just include it in the documentation like this with feature ID as a key. And these are all documented in the repo. And once you include that, you don't need to update any of the browser compatible data. The widget will automatically update it for you.

There are a few websites and dashboards, like this one, feature explorer or the web starters.dev that got released this year. So, check that out. And we also have a website where you can list Baseline in the wild. So, if you decide that your team is using Baseline, you can send a pull request and get your project listed here. I should mention that the Baseline is a project under the W3C WebDX community group. This is the group that decided on the definitions and working on these tools and stuff. So, if you are really, really, really interested in participating, please join us. And one other thing, now the project has name, definitions, data, dashboards, and widgets, and solving these, and under the name of solving these developer pain points, the next thing on our roadmap is a developer tooling. So, what if you could include a Baseline here and your Baseline you are supporting in your linter or an action that lands over a pull request, right? So, the first tool to integrate Baseline was the RAM archive insights page. It shows how many users are included based on their data for each Baseline year. Remember, the newly to Wiley has 30 months. So, if you want more granularity, you might pick a Baseline year because we also group a feature by year. You can go in RAM archive, look at your user base, and see which one works for a project. For next year, we are expecting a lot more news on this too, but for now, we want to hear from you. Whether you are trying to look up Baseline versions or include widgets or your blog, your own tool, you might have your own tool or product to integrate Baseline into, we are here to help. I'm very excited about Baseline because I spent a few years in research and it feels like I can finally talk to you all to bring this to the developers. And one last thing, because the point of doing this is to help developers, I have a really, really, really short survey that I want you to answer. And please do answer because it will help me plan for a better support document and also my team working on Baseline would generally love to hear if this is helping or if we need to take this to some other direction. I'm Mariko from Chrome Developer Vision's team and thank you for your attention.

I guess the first question, do you have any strategies in replacing third-party libraries with native functionality? So, well, I work on Baseline, so then I say look up Baseline, right? So we did a lot of research, so the BFTX community, we got together with all the browser vendors and then try to discuss what's the good point to give to developers that is generally available. And that's the point, the 30 months widely available, right? Like, the Chrome wanted two years and then after discussion, it got extended 30 years based on different browser vendors bringing the data. So I would say, and again, you need to check your user base with Archive and other analytics, if you want to start, start with the Baseline widely available. If feature is available in Baseline widely, then you might say, huh, I can remove the third-party code because, you know, this people in W3C said they might be fine.

Okay, and here's another question from anonymous, are there any tools or plans to create tools that use Baseline to automate code compilation to a selected availability level or even just linting? Yes, so the linting, we all are planning on it, so I don't even know when it comes out, but it's on our roadmap to work on tools next year, so linting definitely, you know, code suggestion, you know, everybody's talking about AI, so integrating the IDE with AI, definitely we're talking about it, but I can't really promise you when or who is working on it, because we are just starting the planning.

Okay, great, well, that's all the time we have for questions during this period, but if you have further questions for the speaker, you can see them in the speaker Q&A room in the glass room next to the community track right now, and don't forget to rate the talk on Slido, and we have a short break before the next talk, so you can switch tracks if you want, so you can just check out the website to see what talks are coming next. Okay. Thank you. Thank you. Thank you. Thank you.