DEV Community: Cooty

A new way to test for touch devices without JavaScript: Enter the pointer media query

Cooty — Sat, 09 Sep 2023 14:51:15 +0000

One of the age-old problems of responsive web-design is how do we distinguish between mobile and desktop.
Of course your gonna say that this is a trivial problem: We have media queries, dummy!

@media (max-width: 768px) {
  /* Styling goes here for handheld, ie "mobile" devices */
}

@media (min-width: 1200px) {
  /* Styling goes here for laptops and desktops */
}

So that's it we can call it a day and move on with our lives, right?
Not quite!

Let's start with the fact that the above code (and most other media queries we write on a day to day basis) carry with them a lot of assumptions.

We assume that it is an iPad or other similar tablet if the viewport is less the or equal to 768px but maybe our user just squished the window of his browser on his 8K ultra-wide monitor so that he can put several windows next to each other.

We also assume that a device with a display that's at last 1200px wide is some sort of laptop, however there are plenty of tablets that are more then 1200px wide in landscape mode.

These assumptions are usually safe when we're just talking about layout and we try to find different breakpoints to tailor our design to different screen sizes.

But the problems start when we want different behavior for mobile devices. Like say we want to show a small dropdown calendar on desktop but on mobile we want a pop-up date picker component.

The gist of the problem is that sometimes we need different UI for the devices where the primary method of input is touch and the ones where it's a mouse.

Until recently we had to result to various JS hacks to detect touch capabilities of a device. For example here's one popular snippet:

function isTouchDevice() {
  return (
    "ontouchstart" in window ||
    navigator.maxTouchPoints > 0 ||
    navigator.msMaxTouchPoints > 0
  );
}

There's two problems with this approach

They are flaky and unreliable. We can only test for the presence of touch events implemented by the browser but that does not necessarily imply that the device has a touch screen.
You need client-side JS for this to run, if you make the interactions depend on some JS to run that might result in a bad experience when the JS has not yet downloaded. You would want these sort of tests to run immediately as soon as the user can interact with the page

However now we have an actual media query to test what pointer type the device supports.

The syntax looks like this

@media (pointer: none|coarse|fine) {
  /* Some code based on the supported pointer value */
}

The value is an enum with three possible values as defined in the spec.

none

The primary input mechanism does not include a pointing device.

coarse

The primary input mechanism includes a pointing device of limited accuracy, such as a finger on a touchscreen.

fine

The primary input mechanism includes an accurate pointing device, such as a mouse.

Using this query we can for example make checkboxes and radio buttons larger for devices that have a coarse pointer.

Of course we can also use this query from JS to manipulate the behavior of our UI or load entirely different components optimized for touch versus mouse inputs.

If you were wondering about "Can I already use this in production, how is this thing supported?" I have good news for you: The caniuse table for the feature is quite nice and green!

Also MUI X UI library uses this method in their date picker component.

Hope you can utilize this new feature of the web platform to make your UI code more elegant and our users happier!

How to make a parameterized spinner component in React

Cooty — Sat, 14 Jan 2023 21:43:54 +0000

Since the dawn of web2.0 ajax-loaders have become the standard way of telling the user to wait a bit. Back in the day we used GIFs, but now of days it's more common to implement such spinners in CSS and HTML or SVG, this of course makes them more lightweight, but the other advantage is that we can customize them from code, without creating another graphic asset.

In this post I'll show you a way to make an encapsulated spinner component with parameterized size and color attributes.

I'm going to implement the component using React and CSS modules, but of course you can use any other component framework or styling technique, as it's not really bound to React, you can even do this with some server-side templating language I guess. But let's get started.

Step One: Building the basic spinner

First of we'll setup a static spinner that has no customizable styles and we'll take it from there.

Check the working demo below on Stackblitz or follow along by checking the commits on Github.

I won't go too much into the details of the CSS HTML, since we're more concerned about how to make this all work with parameters, but the spinner is basically the inner-most <div> element (the one without a className).

{
  /* outer container */
}
<div className={styles.spinner}>
  {/* inner container */}
  <div className={styles.spinnerAnimationContainer}>
    {/* actual spinner */}
    <div />
  </div>
</div>;

This element gets the animation defined in the spin keyframes at the start of Spinner.module.css.

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

Also note the how we reset the top border of the div to create the "cut out" from it's border, without this we would only see an outlined circle which is spinning around but we wouldn't see anything moving.

.spinnerAnimationContainer div {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 4px solid rgb(39, 39, 158); /* create the outline */
  border-radius: 50%; /* make it a circle */
  border-top-color: transparent; /* exclude the top border, creating the cut */
}

So now we have a basic spinner, but it's size and color are fixed. Our aim is to make these adjustable via params.

Step Two: Refactoring to CSS variables

Let's start by identifying the values that need to be changed in order to change the overall appearance of the spinner.

First of there's the width and height of the outer container. Since these two values are the same (it's a square technically...) we can outsource this to a custom property (aka variable).

.spinner {
  --spinner-size: 40px;
  width: var(--spinner-size);
  height: var(--spinner-size);
  display: inline-block;
  overflow: hidden;
}

Note💡: The custom properties should be defined on the root element of the component so they'll be also accessible for the child elements.

Now if you start changing the value of --spinner-size, you'll notice that this alone will not change anything. If you change it to a smaller number, say 30px you'll notice that the spinner gets cropped.

If on the other hand you change it to a larger number you'll see that nothing changed, but if you add an outline to the outer container, you'll see that the spinner is no longer centered inside the rectangle.

Apparently some other values have to be modified to change the appearance.

Notice the lines of CSS responsible for the top and left offset of the absolutely positioned spinner.

.spinnerAnimationContainer div {
  /*...*/
  top: 20px;
  left: 20px;
}

They seem like they supposed to be exactly the half of the size of the container, which would make perfect sense, since you would need to push it away by exactly 50% of the container's size to center it.

So let's use CSS's calc function to encode this equation as the value.

.spinnerAnimationContainer div {
  --spinner-offset: calc(var(--spinner-size) / 2);
  /*...*/
  top: var(--spinner-offset);
  left: var(--spinner-offset);
}

Now if you change the --spinner-size to something smaller, say 30px the spinner will still get cropped, but if you increase the size and also add an outline to the outer container, you'll see that the spinner already stays in the center (no matter what value you add). So we're making progress. But the size itself is still unchanged, so let's fix that.

If we look closer at the other styles affecting the spinner div you'll see that the size is influenced by the border-width, the width and the height.

.spinnerAnimationContainer div {
  /*...*/
  width: 24px;
  height: 24px;
  border: 4px solid rgb(39, 39, 158);
}

Let's take a look at the border's width first and let's try to find some mathematical relation between it's value and the size of the outer container. 4 and 40. That's exactly 10%.

So let's change that to be a dynamic calculation too.

.spinnerAnimationContainer div {
  --spinner-border-width: calc(var(--spinner-size) * 0.1);
  /*...*/
  border: var(--spinner-border-width) solid rgb(39, 39, 158);
}

You'll see that nothing has changed visually, but the border is the same, so that's good.

Now let's look at how to turn the width and height into a calculation. 24 is exactly the 50% of 40 (the current --spinner-size) plus the border's width.

.spinnerAnimationContainer div {
  --spinner-border-width: calc(var(--spinner-size) * 0.1);
  --spinner-inner-size: calc(
    var(--spinner-size) / 2 + var(--spinner-border-width)
  );
  /*...*/
  width: var(--spinner-inner-size);
  height: var(--spinner-inner-size);
  border: var(--spinner-border-width) solid rgb(39, 39, 158);
}

Now let's start changing the value of --spinner-size to either smaller or greater than 40px. Great success! Now the spinner changes its size and we just have to change one value.

So the CSS part is actually done.

Step Three: Connect CSS to props

So now that the size can be changed by just setting one variable we need to make a link between the CSS and the JS props coming from React. But how to do that without introducing some fancy CSS-in-JS library?

Simple. Outsource that one CSS variable to inline-styles. Like so:

function Spinner({ size = "40px", ...props }) {
  return (
    <div
      className={styles.spinner}
      style={{
        "--spinner-size": size,
      }}
      {...props}
    >
      <div className={styles.spinnerAnimationContainer}>
        <div />
      </div>
    </div>
  );
}

Voilá! We have the size prop's value passed to styles and it will cascade to all it's descendants and even has a nice default value. Of course we have to remove the hard coded --spinner-size from the Spinner.module.css.

Now we can use it like so:

<Spinner size="80px" />

Making the color of the spinner dynamic is trivial at this point.

function Spinner({ size = "40px", color = "rgb(39, 39, 158)", ...props }) {
  return (
    <div
      className={styles.spinner}
      style={{
        "--spinner-size": size,
        "--spinner-color": color,
      }}
      {...props}
    >
      <div className={styles.spinnerAnimationContainer}>
        <div />
      </div>
    </div>
  );
}

We of course have to change the hard-coded value in the CSS module to our newly defined custom property.

.spinnerAnimationContainer div {
  /*...*/
  border: var(--spinner-border-width) solid var(--spinner-color);
}

Now we can also add the border-color as a prop.

<Spinner size="80px" color="rgb(255, 0, 0)" />

The whole thing now looks like this.

Of course if passing values as-is seems a bit too flexible to you and you already have some sort of design system with tokens defined, then you can pass those instead and even you can validate the values using TypeScript or React PropTypes.

This could look something like this.

<Spinner size="xl" color="brand-color" />

What we've learned from all this

Needles to say that you can implement such a component in any JS framework, or even with some server-side templating system. The core idea is to use inline CSS custom properties to communicate between the rendered markup (that knows about dynamic data) and CSS. The other core idea is using calc function to define values as simple equations.

I hope you can reuse either the ideas presented here in you own projects and you've learned something new!

Weird Phishing attempt on GitHub

Cooty — Thu, 29 Dec 2022 11:52:45 +0000

This morning I was awaken to a strange notification on my phone, I got tagged in a comment on GitHub. Since I have the GitHub app on my phone, I get push notifications of such things...

When I opened it up - reminder this was shortly after getting out of bed, before I even had my first coffee and it was on a mobile client, so I didn't have much context, just wanted to check my notifications - I got the weirdest comment I've ever seen on GitHub.

Hi wanna see my nude photo [shortened link]
bunch of other tagged users
More photo goo [shortened link]

Now even in such an early hour this tripped off my defenses as an obvious phishing attempt. So I decided that instead of watching some "nude photos", I'll click the "Report Abuse" option and direct the attention of GitHub's security team towards this comment.

GitHub responded quickly:

Our review of the account(s) and/or content named in your report has concluded. We have determined that one or more violations of GitHub’s Terms of Service have occurred and have taken appropriate action in response.

The strangest thing is that I'm not even a follower of this repo where the discussion was started, which by the way is a R toolkit for single cell genomics.

The phishing (or malware spreading or whatever shady business) is pretty obvious here, but I could imagine that this could be tunned up to be a bit more personalized for targeted individuals.

Has anyone encountered this or similar malicious use of GitHub's community features? Maybe does someone know what's the background of the scam?

The Skinny on CSS in Vue Single File Components

Cooty — Tue, 13 Dec 2022 20:11:50 +0000

In my humble opinion one of the best features of Vue.js is its robust capability to handle styling. Out-of-the box it provides encapsulated CSS for components, while adding any pre- or postprocessor is just one npm install away. It's all very straightforward for basic usage. However there are some less known super useful styling features in Vue.js that you might not know about, also version 3 added a lot of new tools in this area as well.

Scoping CSS in Vue

One of the core styling features of Vue is the ability to add scoped CSS. This basically solves the global scope problem of CSS and gives us the ability to encapsulate styles to our Single File Components.

For example we have an Alert.vue component, that looks like this:



<template>
    <div class="alert">
        <slot />
    </div>
</template>

<style scoped>
.alert {
    --base-gutter: 0.4rem;
    padding: calc(var(--base-gutter) * 2);
    border: 1px solid #ffea2a;
    background-color: #fff48d;
    border-radius: var(--base-gutter);
}
</style>



<Alert>
  Hi there!<br />
  This is some warning for the user from the system.
</Alert>

If you run this code (the easiest way of doing that is by scaffolding a new Vue project with Vite) you will get this output in your browser.



<div class="alert" data-v-3f4a8ec2="" data-v-7a7a37b1="">
   Hi there!<br data-v-7a7a37b1=""> This is some warning for the user from the system.
</div>

You'll notice that all the HTML tags (even that little <br />) from our Vue template got a generated data attribute that looks like data-v-<some-hash>. This will be the same for every instance of our component, but unique to that component. By the way, the random string after the data-v- is generated from the name of your *.vue file, so if you rename it, the hash will also change.

Now if you inspect the styles applied to it you'll see that your selector is also rewritten by the framework like so.



.alert[data-v-3f4a8ec2] {
  --base-gutter: 0.4rem;
  padding: calc(var(--base-gutter) * 2);
  border: 1px solid #ffea2a;
  background-color: #fff48d;
  border-radius: var(--base-gutter);
}

That unique data attribute got added as an attribute selector to our class name, thus adding to the specificity and making sure that if another .alert class is defined in any other stylesheet loaded on the page, its rules won't conflict with our Alert component's rules.

Notice that in development mode those styles will go into a <style> in the <head> and Vite's latest version will even add a data-vite-dev-id attribute with the url and generated hash of the CSS file it extracts from the SFC. Of course when building your app for production, your bundler of choice will put this code into a separate .css file.

So it's that easy to create scoped styles in Vue.js. Fun fact the scoped attribute on the style tag actually comes from a W3C draft for implementing native scoping for CSS, which was unfortunately abandoned.

Working around child selectors

Now there is one small problem with this method of scoping CSS.

Let's say you have an API that delivers raw HTML text, that content editors add using the WYSIWYG editor of some CMS.

Now inserting raw HTML to Vue templates is trivial with the v-html directive, but you also want to style these tags independently, so you create a <RichText /> component to encapsulate their CSS.

This would all look like this:



<template>
    <div class="rich-text" v-html="props.text" />
</template>

<script setup>
const props = defineProps({
    text: String
})
</script>

<style lang="scss" scoped>
.rich-text {
    p {
        margin: 0 0 1rem 0;
    }

    ol {
        list-style-type: lower-alpha;
    }

    ul {
        list-style-type: circle;
    }

    // some more styles for all possible tags...
}
</style>

Now your component will render the following CSS.



.rich-text p[data-v-60170f23] {
  margin: 0 0 1rem 0;
}
.rich-text ol[data-v-60170f23] {
  list-style-type: lower-alpha;
}
.rich-text ul[data-v-60170f23] {
  list-style-type: circle;
}

But the tags inserted by v-html won't receive the data-v-<component-hash> attributes as the other tags in your component.

You can change the CSS output so that the scoping will also work for nested elements.



<style lang="scss" scoped>
.rich-text {
    :deep(p) {
        margin: 0 0 1rem 0;
    }

    :deep(ol) {
        list-style-type: lower-alpha;
    }

    :deep(ul) {
        list-style-type: circle;
    }

    // some more styles for all possible tags...
}
</style>

Now the styles generated will look like this:



.rich-text[data-v-60170f23] p {
  margin: 0 0 1rem 0;
}
.rich-text[data-v-60170f23] ol {
  list-style-type: lower-alpha;
}
.rich-text[data-v-60170f23] ul {
  list-style-type: circle;
}

The data-v- goes in front of the parent selector so child selectors will get applied and scoping will be maintained.

Syntax variations

If you've googled this problem before you may have found some alternate syntaxes to do the same thing, so let's clarify things a bit.

You've may seen this:



.alert ::v-deep h1 {
…
}

Or this



.alert /deep/ h1 {
…
}

Or even this



.alert >>> h1 {
…
}

In Vue 3 and Vue 2.7 all of these have been deprecated, so while your code may work, the compiler will show a warning and they will stop working in some future release. So it's best to use :deep(), unless you are on Vue >2.7.

Also note that if you are using SCSS, the >>> and /deep/ syntax will throw an error in Vue 3, while the ::v-deep will still work but with a warning.

Bottom line is, just use :deep() on all newer versions of Vue.

New CSS features in Vue 3

With Vue 3 we've got two new combinators next to :deep().

Scoped styles for slots

First we have :slotted() which lets you target any HTML that's inserted to one of the slots of your component.

Let's say you want to add another slot in the component and you'd want whatever element that goes in that slot to have a specific styling defined by it.



<template>
    <div class="alert">
        <slot name="header" />
        <slot />
    </div>
</template>

<style scoped>
.alert {
    --base-gutter: 0.4rem;
    padding: calc(var(--base-gutter) * 2);
    border: 1px solid #ffea2a;
    background-color: #fff48d;
    border-radius: var(--base-gutter);
}

h1 {
    font-size: 1.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: calc(var(--base-gutter) * 2);
    margin-top: 0;
    padding-bottom: calc(var(--base-gutter) * 2)
}
</style>



<Alert>
    <template #header>
      <h1>Hi there!</h1>
    </template>
    This is some warning for the user from the system.
</Alert>

This of course won't work. If you look at what CSS was generated, you'll find this selector.



h1[data-v-3f4a8ec2] {
   // our h1 styles
}

This would work if we would have the <h1> tag in our component and only its text content coming in via a props, but for whatever reason we don't want to do that.

To make this work we can change our component's CSS like so:



:slotted(h1) {
    font-size: 1.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: calc(var(--base-gutter) * 2);
    margin-top: 0;
    padding-bottom: calc(var(--base-gutter) * 2)
}

Now it works! And what's even cooler is, if that you add another style block to the <styles scoped>...



h1 {
    color: red
}

...and a this line of code to the template.



<h1>I'm hard coded in the component</h1>

You'll see that the <h1> we pass through the #header slot doesn't get red, while it's rules won't affect the "hard-coded" <h1>.

If you are wondering how Vue.js does this, it's very easy. The difference in the rendered output is literally one character.



h1[data-v-3f4a8ec2] {
  // styles for the tag inside the component
}



h1[data-v-3f4a8ec2-s] {
  // styles for the tag coming from the slot
}

The generated :scoped() selector gets an extra -s appended to the file name hash that's used to scope elements inside the components.

Global styles

The :global() combinator provides an escape hatch from the scoped styles. A good use case for this would be if you have some page identifier class on the main <body> tag, which is normally out of scope of your Vue application, but you want to keep your styles that hook into these classes inside your page components.



<style scoped>
.App {
  color: #000;
}

:global(body.home-page) {
  background-color: antiquewhite;
}
</style>

Also note that this could be achieved by adding two <style> tags in your SFC, one with the scoped attribute and one without it.



<style>
body.home-page {
  background-color: antiquewhite;
}
</style>

<style scoped>
.App {
  color: #000;
}
</style>

JS-in-CSS the Vue way

This last one is the most exciting and solves a lot of the use cases for which you would have had to turn to CSS-in-JS libraries like vue-emotion in the past.

You can use the v-bind directive as a CSS value and extrapolate any JS value inside the <style> tag of the SFC just as you would in your <template>.

This is great for every use case where you want your styles to react directly to some user input or state change without having to write a bunch of predefined classes.

To demonstrate how powerful this feature is, I've added a small demo with a color picker.

If you look at the rendered code you'll see that Vue.js is generating CSS custom properties that are inserted into inline styles and then they cascade down the component.



<div data-v-45e5ffe2 style="--45e5ffe2-color:rgb(230, 74, 25);">
    <div data-v-45e5ffe2>
        <div class="vc-color-wrap transparent" data-v-11bd4fe5="">
            <div class="current-color" data-v-11bd4fe5 style="background: rgb(230, 74, 25);"></div>
        </div>
    </div>
    <p class="example" data-v-45e5ffe2>Click on the square to select a color!</p>
</div>



.example[data-v-45e5ffe2] {
    color: var(--45e5ffe2-color);
}

I hope you've found this post useful and it will help you write CSS more effectively in your next Vue.js project!

Fun Facts about JavaScript Arrays

Cooty — Thu, 01 Dec 2022 20:08:13 +0000

JavaScript has a lot of quirks and weird parts, some of these impact the daily work of the average web dev, while some of it belongs to the sort of dark arts, which's only practical application is to create tricky interview questions. Nonetheless, it's worth knowing these oddities in a language.

Today I was thinking to cover some lesser known behaviors involving JavaScripts's arrays, so let's dive in.

Arrays are actually Objects

We know that curly braces ({}) stand for objects and square brackets ([]) stand for arrays, right?
Well it turns out that arrays are just a special kind of object. You can prove this by checking the type of an array.

const dogBreeds = ["Labrador", "Poodle", "German Shepherd"]
console.log(typeof dogBreeds) // object

Or an even better option is to log out an array in your browser's console and see that the [[Protype]] points to the built in Array object.

Observe all the built in array methods you know and love being listed on the prototype object (the faded color signals that they are read-only).

If you want to know that some unknown piece of data is indeed an array, the easiest way is to use the isArray static method on the Array prototype.

const somethingThatMightBeAnArray = ["dog", 42, {foo: 'bar'}]

console.log(Array.isArray(somethingThatMightBeAnArray)) // true

const somethingThatsNotAnArray = { id: 1 }

console.log(Array.isArray(somethingThatsNotAnArray)) // false

Now when your accessing an item inside an array with the bracket notation (meaning myArray[0]), you are actually accessing a key of the object, but because object keys can't be integers, under the hood JS actually converts that number you put in between the brackets to a string. So actually myArray[0] and myArray["0"] would yield the same result.

Also note that dot notation won't work, so myArray.0 will fail just as trying to use dot notation to get the value of an object key that uses a "-" character or an integer.

const myObject = {"my-key": "A", "20": "B"};
console.log(myObject.20) // Uncaught SyntaxError: missing ) after argument list

console.log(myObject["20"]) // "B"

Speaking of keys, - or as we call them in this case array indices - there's another odd behavior that a lot of people don't know about. Namely that if you set an item with an index that's bigger than the currently available last index, JS will "fill up" the items leading up to that index with empty values. Don't believe me? Try it for yourself!

const dogBreeds = ["Labrador", "Poodle", "German Shepherd"]
dogBreeds[100] = "Vizsla"
console.log(dogBreeds.length) // 101

Observe that all the 97 items between the indices 2 and 100 will give undefined.

I don't really know the exact reason why this is, but if I had to guess it has to do with something relating to the fact that under the hood, JavaScript engines store arrays in some other data structure.

The practical implication is that if you want to dynamically insert new items to an array you should always use the built in push method instead of the bracket notation if you want to be safe and keep the consistency of your indexes.

Arrays are stored by Reference

There's something that tips off beginners and sometimes even experienced programmers coming from other languages.

When trying to compare arrays that look the same you run into a surprise.

const arr1 = [1, 2, 3]
const arr2 = [1, 2, 3]

console.log(arr1 === arr2); // false

This seems odd…

In other programming languages this would be true. Say in PHP.

$arr1 = [1, 2, 3];
$arr2 = [1, 2, 3];

var_dump($arr1 === $arr2); // true

Or in Python.

from array import*

a = array("i", [1, 2, 3])
b = array("i", [1, 2, 3])

print(a == b) # True

So what's going on here? If you understand that arrays are actually objects, then this whole thing will make sense.

In JavaScript objects are stored by reference and not by value like primitive data types. So that means that even if the values (and keys) are the same, internally they are stored on a different chunk of memory, so when comparing them for equality they will always return false, unless you compare the same object reference with itself.

Now again this has a lot of real world implications. For instance if you just reassign an existing array to a new variable and then start mutating the values you are in for some surprises.

const dogBreeds = ["Poodle", "Labrador"]
const copiedDogBreeds = dogBreeds

copiedDogBreeds.push("Labradoodle")

console.log(copiedDogBreeds[2]) // "Labradoodle"
console.log(dogBreeds[2]) // "Labradoodle"

You would initially expect that you've only modified the copiedDogBreeds array, but as you can see our original array also got "Labradoodle" as its third item.

To fix this you'll need to make an actual copy of the object. One way is to use the slice array method without any arguments

const dogBreeds = ["Poodle", "Labrador"]
const copiedDogBreeds = dogBreeds.slice()

copiedDogBreeds.push("Labradoodle")

console.log(copiedDogBreeds[2]) // "Labradoodle"
console.log(dogBreeds[2]) // undefined

Or better yet use the spread syntax!

const dogBreeds = ["Poodle", "Labrador"]
const copiedDogBreeds = [...dogBreeds]

copiedDogBreeds.push("Labradoodle")

console.log(copiedDogBreeds[2]) // "Labradoodle"
console.log(dogBreeds[2])

But wait! There's more…

So you would think that the above examples create a totally new JavaScript ~~array~~ object, right? Wrong! Both of these methods only create a so-called shallow copy, which still shares the same underlying values of the source object.

Now the practical consequence of this is that if we modify any nested value then we will still overwrite the values in the original array.

const numbersAndLetters = [[1, 2, 3], ["a", "b", "c"]]
const copiedNumbersAndLetters = [...numbersAndLetters]

copiedNumbersAndLetters[1][0] = "A"

console.log(numbersAndLetters[1][0]) // "A"
console.log(copiedNumbersAndLetters[1][0]) // "A"

The only way around this is to make a deep copy, which is - you guessed it - a totally new ~~array~~ object with no connection whatsoever to the original.
The easiest way to do this is to serialize it to a JSON string then parse it back into a JavaScript object.

const numbersAndLetters = [[1, 2, 3], ["a", "b", "c"]]
const copiedNumbersAndLetters = JSON.parse(JSON.stringify(numbersAndLetters))

copiedNumbersAndLetters[1][0] = "A"

console.log(numbersAndLetters[1][0]) // a
console.log(copiedNumbersAndLetters[1][0]) // A

Summary

In essence you need to remember that arrays in JavaScript are actually objects with the indices as their keys and as objects they are stored by reference.

I hope you've learned a thing or two while reading this, cause I sure did while writing it.