black-black-cat/a.js

## a.js
const fromObj = (source = {}) => Object.keys(source).map(k => source[k])
const k = {
  a: 1
}

const data = {
  start: k,
  a: [],
  b: [1, 2, 3],
  c: [{ foo: 'bar' }],
  d: {},
  e: { a: 'a', b: 'b', c: 'c', d: ['a', 'b', 'c', {a: 'a', b: 'b'}] },
  f: 1,
  g: true,
  h: {
    k
  },
  i: {
    k
  }
}

const deepClone = (obj, visited = [], visitedClones = []) => {
  let clone
  // let isObj = typeof obj === 'object'
  let isPlainObject = Object.prototype.toString.call(obj) === '[object Object]'
  let isArray = Array.isArray(obj)

  let vIndex = visited.indexOf(obj)
  if (vIndex > -1) {
    clone = visitedClones[vIndex]
  } else {
    if (isArray) {
      clone = []
      obj.forEach(
        (v, i) => (clone[i] = deepClone(v, visited, visitedClones))
      )
    } else if (isPlainObject) {
      clone = {}
      Object.keys(obj).forEach(
        key => (clone[key] = deepClone(obj[key], visited, visitedClones))
      )
    } else {
      clone = obj
    }
  }

  if ( (vIndex < 0) && (isArray || isPlainObject) ) {
    let i = visited.push(obj)
    console.log(visited, 'visited')
    visitedClones[i - 1] = (clone)
    console.log(visitedClones, 'visitedClones')
  }
  return clone
}

let cloned = deepClone(data);

console.dir(cloned)

console.log(data.c[0] !== cloned.c[0])
console.log(data.e.d !== cloned.e.d)
console.log(data.e.d[3] !== cloned.e.d[3])
console.log(data.i.k !== cloned.i.k)
console.log(cloned.h.k === cloned.i.k, cloned.start === cloned.h.k, 'Duplicate reference')

let shallowCloned = deepmerge({}, data, {clone: false})

console.log(data.e.d[3] === shallowCloned.e.d[3], 'deepmerge shallowCloned')

let deepCloned = deepmerge({}, data)

console.log(data.e.d[3] !== deepCloned.e.d[3], 'deepmerge')

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1></h1>

  <script src="https://unpkg.com/deepmerge@4.0.0/dist/umd.js"></script>
  <script src="a.js"></script>
</body>
</html>

## styles.css
/* todo: add styles */
	const fromObj = (source = {}) => Object.keys(source).map(k => source[k])
	const k = {
	a: 1
	}

	const data = {
	start: k,
	a: [],
	b: [1, 2, 3],
	c: [{ foo: 'bar' }],
	d: {},
	e: { a: 'a', b: 'b', c: 'c', d: ['a', 'b', 'c', {a: 'a', b: 'b'}] },
	f: 1,
	g: true,
	h: {
	k
	},
	i: {
	k
	}
	}

	const deepClone = (obj, visited = [], visitedClones = []) => {
	let clone
	// let isObj = typeof obj === 'object'
	let isPlainObject = Object.prototype.toString.call(obj) === '[object Object]'
	let isArray = Array.isArray(obj)

	let vIndex = visited.indexOf(obj)
	if (vIndex > -1) {
	clone = visitedClones[vIndex]
	} else {
	if (isArray) {
	clone = []
	obj.forEach(
	(v, i) => (clone[i] = deepClone(v, visited, visitedClones))
	)
	} else if (isPlainObject) {
	clone = {}
	Object.keys(obj).forEach(
	key => (clone[key] = deepClone(obj[key], visited, visitedClones))
	)
	} else {
	clone = obj
	}
	}

	if ( (vIndex < 0) && (isArray \|\| isPlainObject) ) {
	let i = visited.push(obj)
	console.log(visited, 'visited')
	visitedClones[i - 1] = (clone)
	console.log(visitedClones, 'visitedClones')
	}
	return clone
	}

	let cloned = deepClone(data);

	console.dir(cloned)

	console.log(data.c[0] !== cloned.c[0])
	console.log(data.e.d !== cloned.e.d)
	console.log(data.e.d[3] !== cloned.e.d[3])
	console.log(data.i.k !== cloned.i.k)
	console.log(cloned.h.k === cloned.i.k, cloned.start === cloned.h.k, 'Duplicate reference')

	let shallowCloned = deepmerge({}, data, {clone: false})

	console.log(data.e.d[3] === shallowCloned.e.d[3], 'deepmerge shallowCloned')

	let deepCloned = deepmerge({}, data)

	console.log(data.e.d[3] !== deepCloned.e.d[3], 'deepmerge')
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<h1></h1>

	<script src="https://unpkg.com/deepmerge@4.0.0/dist/umd.js"></script>
	<script src="a.js"></script>
	</body>
	</html>