JSFiddle - React, Tailwind, and code Playground

by joshuatz

JavaScript

function buildTestArr(){
	return [{
		alpha: 'alpha',
		nested: {
			bravo: 'bravo'
		}
	}];
}

function mapTest(testArr) {
	const copy = testArr.map(e => e);
	copy[0].alpha = 'bravo';
	copy[0].nested.bravo = 'charlie';
	return {
		original: testArr,
		copy: copy
	}
}

function spreadTest(testArr) {
	const copy = [...testArr];
	copy[0].alpha = 'bravo';
	copy[0].nested.bravo = 'charlie';
	return {
		original: testArr,
		copy: copy
	}
}

function mapWithObjAssign(testArr) {
	const copy = testArr.map(e => Object.assign({}, e));
	copy[0].alpha = 'bravo';
	copy[0].nested.bravo = 'charlie';
	return {
		original: testArr,
		copy: copy
	}
}

function mapWithJsonDeep(testArr) {
	const copy = testArr.map(e => JSON.parse(JSON.stringify(e)));
	copy[0].alpha = 'bravo';
	copy[0].nested.bravo = 'charlie';
	return {
		original: testArr,
		copy: copy
	}
}

console.log(mapTest(buildTestArr()));
console.log(spreadTest(buildTestArr()));
console.log(mapWithObjAssign(buildTestArr()));
console.log(mapWithJsonDeep(buildTestArr()));