ECMAScript Object.clone / clone

Status

Stage: Pre-0

Author: Mike Piccolo (FullStack Labs, @mfpiccolo)

Champions: -

Introduction

Part 1 - Long standing problem in JavaScript

Cloning in JavaScript has been an open question for a long time that has been answered in userland in many different ways.

How do I correctly clone a javascript object

What is the most efficient way to deep-clone-an-object-in-javascript

These two StackOverflow questions have both been open for over ten years,are amonst the highest viewed questions of all time and are still extreemly active. Folks are still actively trying to figure out this problem.

Part 2 - Immutable patterns

JavaScript has been moving towards immutable patterns.

immutable - ~2.5 million weekly downloads

redux - ~3 million weekly downloads

immer - ~2 million weekly downloads

Object method

const test = { a: { b: { c: 1 } } }

const copy = Object.clone(test)
assert(test.a.b.c === copy.a.b.c)

Immutable updates

Following immer's api, you can update the new object

const test = { a: { b: { c: 1 } } }
const copy2 = Object.clone(test, draft => (draft.a.b.c = 2))
assert(test.a.b.c !== copy2.a.b.c)
assert(copy2.a.b.c === 2)

Example reducer

const reducer = (state, action) =>
  Object.clone(state, draft => {
    switch (action.type) {
      case RECEIVE_PRODUCTS:
        action.products.forEach(product => {
          draft[product.id] = product
        })
      case REMOVE_PRODUCT:
        delete draft[action.productId]
    }
  })

mfpiccolo / proposal-clone