--- title: "Array.prototype.groupBy" publication: "JavaScript Weekly" issue: 569 published_at: "2021-12-17" canonical_url: "https://javascriptweekly.com/issues/569" --- Plus a React Conf 2021 recap, deep copying developments, and how errors affect performance. | #​569 — December 17, 2021 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/569) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ifzjecgtnkjxiusvyv03.jpg)](https://web.dev/structured-clone/) [Deep-Copying in JavaScript Using `structuredClone`](https://web.dev/structured-clone/) — Ever had to resort to workarounds and libraries to create a deep copy of a value? `structuredClone()` to the rescue as a built-in function for deep-copying. Surma shows it off in this post, but note that support is currently patchy but due to take off soon. Surma ▶[A Recap of React Conf 2021](https://reactjs.org/blog/2021/12/17/react-conf-2021-recap.html) — React Conf took place online for the first time this year and this is a fantastic summary of what took place along with videos of the talks and why you might watch some of them. The [main keynote](https://www.youtube.com/watch?v=FZ0cG47msEk) covered the state of concurrency, Suspense, server components, React Native, and more. Jesslyn Tannady and Rick Hanlon [![\](https://copm.s3.amazonaws.com/765c1197.png)](https://www.springboard.com/courses/software-engineering-career-track/?utm_source=javascript_weekly&utm_medium=newsletter_ad&utm_campaign=sec&utm_term=jan_cohort) [Kickstart Your Software Engineering Career](https://www.springboard.com/courses/software-engineering-career-track/?utm_source=javascript_weekly&utm_medium=newsletter_ad&utm_campaign=sec&utm_term=jan_cohort) — Ready to start learning software engineering? Learn 1:1 with an expert mentor to master the skills, build your portfolio, and gain experience needed to land a software engineering role. Apply to Springboard's Software Engineering Bootcamp to start your journey. Springboard sponsor [Create React App 5.0: The Popular 'One Command' React App Builder](https://github.com/facebook/create-react-app/releases/tag/v5.0.0) — Few projects in the React world have been as successful as [Create React App](https://create-react-app.dev/) which has brought single command app generation to the masses. v5.0 includes fast refresh improvements, support for Tailwind, and a lot of dependency updates including webpack 5, Jest 27 and ESLint 8. You’ll need to be running Node 14+ too. Meta [quick-lint-js 1.0: An Alternative to ESLint](https://quick-lint-js.com/blog/version-1.0/) — A JavaScript linting tool that pitches itself as a faster, editor-friendly alternative to ESLint for quickly catching certain classes of bug in your code. You can [give it a go](https://quick-lint-js.com/demo/) in your browser too. strager **IN BRIEF:** - Hemanth HM has some [updates from the 87th meeting of TC39](https://dev.to/hemanth/updates-from-the-87th-meeting-of-tc39-44e4) including the status of several proposals. - The company behind [Deno has joined ECMA](https://deno.com/blog/deno-joins-tc39), and Luca Casonato now sits on the TC39 working group to help guide the development of JavaScript. - A [▶️ 45 minute talk with Rich Harris](https://www.youtube.com/watch?v=uQntFkK8Z54) on the future of [Svelte.](https://svelte.dev/) - The _State of CSS 2021_ survey has concluded and [the results are now available to peruse](https://2021.stateofcss.com/en-US/). **RELEASES:** [Deno 1.17](https://deno.com/blog/v1.17) – Server-side JS/TS runtime. [GSAP 3.9](https://greensock.com/3-9/) – JavaScript animation system. [Ember CLI 4.0](https://github.com/ember-cli/ember-cli) – CLI for building Ember apps. [Got 12.0](https://github.com/sindresorhus/got/releases/tag/v12.0.0) – HTTP client for Node.js. [NVM for Windows 1.1.9](https://github.com/coreybutler/nvm-windows/releases/tag/1.1.9) – Node.js version manager. [bignumber.js 9.0.2](https://github.com/MikeMcl/bignumber.js) – Arbitrary-precision decimal arithmetic. [React PDF 5.6](https://github.com/wojtekmaj/react-pdf) – Render PDFs in React apps. 💻 Jobs [JavaScript Developer at X-Team (Remote)](https://x-team.com/remote-javascript-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-js&utm_content=js) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Frontend Developer 🚀(Remote, Work from Anywhere 🏖)](https://crystallize.com/careers/front-end-developer) — We're reimagining eCommerce with a super fast headless commerce service for product storytellers. React, Node, GraphQL? Let's talk. Crystallize [Find JavaScript Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-javascriptweekly%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 📖 Tutorials, Opinions & Stories [The Performance Implications of JavaScript Errors](https://calendar.perfplanet.com/2021/performance-implications-of-javascript-errors/) — There’s more to think about with performance and errors than first meets the eye. For example, your page could get _faster_ when an error causes less code to be run. Amit Singh [`Array.prototype.groupBy` to the Rescue?](https://www.charpeni.com/blog/array-prototype-group-by-to-the-rescue) — There are plenty of ways to group elements in arrays into objects, as shown here, but TC39 is coming to the rescue (we hope) with a currently advancing proposal for [array grouping methods](https://github.com/tc39/proposal-array-grouping) like `groupBy`. We're ready. Nicolas Charpentier [Who Guards the Guards – 3 Common Pitfalls of JavaScript Testing](https://www.youtube.com/watch?v=Prlo_WiCPzc) — Learn how to eliminate certain types of issues from your test code in this TestJS Summit talk by SonarSource JS expert. SonarSource sponsor [How to Access ES Module Metadata using `import.meta`](https://dmitripavlutin.com/javascript-import-meta/) — How to access the meta information (module URL, etc.) of an ES module from JavaScript code. Dmitri Pavlutin [Wide Gamut 2D Graphics using HTML Canvas](https://webkit.org/blog/12058/wide-gamut-2d-graphics-using-html-canvas/) — A look at the support for graphics in wider gamut color spaces than sRGB (such as Display P3) inside the `canvas` element in the newest Safari. Cameron McCormack (WebKit) [An Introduction to Framer Motion 3D for 3D Animation in React](https://www.framer.com/docs/three-introduction/) — [Framer Motion](https://www.framer.com/fp/) is a popular Web animation toolkit and there’s a 3D animation option that uses [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) under the hood. Some nice sandbox demos here to play with. Framer ▶[Global State Management in an Vue.js Electron App with Pinia](https://www.youtube.com/watch?v=VCs199OphDo) Cody Bontecou [The Only Two Custom React Hooks We Ever Really Use](https://blog.molecule.dev/the-only-custom-react-hooks-we-use/) Luke Hager 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/hu2vdjevrvom1tlusxa6.jpg)](https://riot.js.org/) [Riot.js 6.1: A Simple and Elegant Component-Based UI Library](https://riot.js.org/) — An interesting alternative UI library that might click with you. _“It is designed to offer you everything you wished the native web components API provided.”_ [GitHub repo](https://github.com/riot/riot). Riot.js [Caterwaul: An (Experimental) JavaScript-to-JavaScript Compiler](https://github.com/spencertipping/caterwaul) — Described as a ‘monstrosity’ for the ‘adventurous’, this transpiler is exploring ideas around manipulating JavaScript code at the low level to change the semantics of functions and transform code in ‘arcane’ ways. Spencer Tipping [Shortcut is Project Management Without the Management](https://shortcut.com/?utm_source=cooperJSWeekly&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=pm) — Looking for an intuitive white-board style project management tool? Collaboration has never been easier with Shortcut. Shortcut (formerly Clubhouse.io) sponsor [OpenSeadragon 3.0: A Web Viewer for Ultra High Resolution Images](http://openseadragon.github.io/) — Quite an old project now, but works well and is perfect for a specific use case, especially if you need to support certain high res image tile formats. OpenSeadragon contributors [CSS-Select 4.2: A CSS Selector Compiler and Engine](https://github.com/fb55/css-select) — Turns CSS selectors into functions that tests if elements match them. Felix Böhm [Want to Transfer a Domain with No Downtime? 👀 Our Handy Checklist 👉](https://dnsimple.link/javascript-weekly/17Dec2021) DNSimple sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/csizjbulv0dl8cmxi22q.jpg)](https://github.com/jwilber/roughViz) [roughViz.js: Hand-Drawn Styled Charts in the Browser](https://github.com/jwilber/roughViz) — Supports bar, donut, line, pie, scatter and stacked bar charts and uses [Rough.js](https://roughjs.com/) under the hood for the drawing operations. Jared Wilber [Neutralino 4.0: Portable, Lightweight Desktop App Framework](https://neutralino.js.org/) — Think Electron but rather than _including_ a Chromium distribution with every app, it uses the local platform’s built-in ‘webview.’ [GitHub repo](https://github.com/neutralinojs/neutralinojs). Codezri [deeplinks.js: Simple Deep Links to Any Selection of Text On Your Website](https://github.com/WesleyAC/deeplinks) Wesley Aptekar-Cassels [Luminous: A Simple No-Dependency JavaScript Lightbox Control](https://github.com/imgix/luminous) imgix Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/peterc) 'JavaScript' is a trademark of Oracle Corporation in the US We are not endorsed by or affiliated with Oracle. [Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom