Why copying can be tricky?
Tags: beginners, javascript, programming
Published: 2019-05-28 15:50:55

There is a moment in the life of every programmer that you have to go back to the basics. I had that moment two days ago, when I wanted to bring the difference between **React.Component** and **React.PureComponent** to mind. The result of this return is this short article.

## Traps of copying in JavaScript

Copying objects in JavaScript can be surprising. Example? Here you are.

This is information about my car **_SuperCar_**:

```jsx
const myCar = {
    make: "SuperCar",
    year: 2016,
    details: {
        color: "blue"
    }
};
```

You bought a new car (also **_SuperCar_**) and want to use` myCar` as a template to save information about it. You know that simple assignment operator is not a good choice. That's why you use object spread operator and write:

```jsx
const yourCar = {...myCar};
```

Then you complete the relevant data about **your** car:

```jsx
yourCar.year = 2019;
yourCar.details.color = "red";

console.log(yourCar.make); // "SuperCar"
console.log(yourCar.year); // prints 2019
console.log(yourCar.details.color); // prints "red"
```

Everything seems to be working properly. Until I try to write data about **my** car:

```jsx
console.log(myCar.make); // "SuperCar"
console.log(myCar.year); // prints 2016
console.log(myCar.details.color); // prints "red" ?! WRONG!!!
```

What happened? By creating `yourCar` we did **shallow copy** of `myCar`. Variables holding primitive values (eg. `numbers`, `strings`) ​​were actually copied. However, for those storing complex data (`objects`), only references to the same objects were copied.

A detailed description of this mechanism you can find [here](https://medium.freecodecamp.org/copying-stuff-in-javascript-how-to-differentiate-between-deep-and-shallow-copies-b6d8c1ef09cd).

Below I will present a visual cheat sheet of how this mechanism works in JavaScript. Whenever I have to re-think how it works, I will come back to this article. I hope you'll find it useful too.

## Examples

All examples are based on the same task. I create the `alice` object. Then I create the `bob` object on the basis of `alice`. I use for this:

1 **Assignment operator**
2 `Object.assign` method (or **object spread operator**)
3 `clone` method from [Ramda library](https://ramdajs.com/docs/#clone)

### 1. Assignment operator

Assignment operator creates reference to the same object:

![assignment operator](https://user-images.githubusercontent.com/7883624/58387097-f9789100-8009-11e9-84a5-2844172014d6.png)

You can play with code here:
[![Edit blissful-jepsen-ivzn7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/blissful-jepsen-ivzn7?expanddevtools=1&fontsize=14&hidenavigation=1&moduleview=1)

### 2. Object.assign / Object spread operator

`Object.assign` creates shallow copy of the object:

![object spread operator](https://user-images.githubusercontent.com/7883624/58387297-be2b9180-800c-11e9-9a6c-11f8f9ddb129.png)

[![Edit empty-dew-6eb6v](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/empty-dew-6eb6v?fontsize=14)


### 3. Ramda clone

`R.clone` creates deep copy of the object:

![ramda clone](https://user-images.githubusercontent.com/7883624/58387320-15316680-800d-11e9-8adb-60a7948862f5.png)

[![Edit musing-rgb-rm291](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/musing-rgb-rm291?fontsize=14)

***

Thanks for reading! If you liked this let me know! Leave a comment, give a ❤️ or share it!

Feel free to check my [Twitter](https://twitter.com/PrzemekWolnik) account with more content like this.