Recently I was asked about copying JavaScript objects. It made me realize I didn't deeply understand some of the core concepts of this fundamental JavaScript topic.

Since nearly everything in JavaScript is an object except for the primitives (boolean, null, undefined, string, number and symbol), we can say that objects are the foundation of JavaScript and permeate its every aspect.

Although copying seems straightforward, a lot of things can go wrong if you use a naive approach. In fact there are two different ways, known as shallow copy and deep copy.

I want to discuss them in this article but before starting, a key concept to understand is mutability.

If I could give a piece of advice to my former self back when I started learning web development, it would be to start using Devtools from day one.

In my personal experience, while the first CSS courses I followed online taught me a lot about CSS theory and encouraged me to learn through practice, they didn’t put enough emphasis on the importance of developer tools. In JavaScript, on the other hand, every lesson starts by showing you the console, as it’s crucial to understanding how the language works.

I believe that a good understanding of what happens behind the scenes on a webpage is not only useful for debugging, but is also a fundamental step in your journey to really understand CSS.