Deep copying in Javascript without resorting to JSON or using variable assignments

Question

Deep copying in Javascript without resorting to JSON or using variable assignments

I'm seeking help with a JavaScript question: I recently attempted some challenging exercises from a JavaScript book I'm studying, and I'm feeling stuck. The task at hand is to create a deep copy function using *only ES6* arrow functions without relying on any JSON methods or variable assignments. Additionally, the author recommends avoiding scopes by not using {} brackets. Can anyone provide me with hints or tips on how to tackle this?

javascript function ecmascript-6

Answer 1

Answer №1

To create a recursive function that takes a value and returns a copy of it, we need to check the type of the value first. If the value is an Array, we should return a new Array in which every element is recursively copied using the same function. If the value is an Object, we must generate a new Object with copies of its properties. For primitive values like strings, numbers, or booleans, we can simply return the value.

It's worth noting that although writing the code without variable assignments and curly brackets might be interesting for learning purposes, it can make the code less readable. In a professional setting, I would never write code this way:

const deepCopy = v =>
  // Check if it's an Array
  v instanceof Array ?
    // Map each value to its copy
    v.map(deepCopy) :
    // If not, check if it's a non-null Object
    (typeof v === "object" && v !== null) ? 
      // Create a new Object with copied property values
      Object.entries(v)
            .reduce((acc, [k, v]) => ({ ...acc, [k]: deepCopy(v) }), {}) :
      // Otherwise just return the value
      v;

console.log(deepCopy({foo: 'bar', arr: [{baz: 42}, true]}));
console.log(deepCopy("Hello world"));
console.log(deepCopy(["a", "b", null]));

Answer 2

To create a recursive function that takes a value and returns a copy of it, we need to check the type of the value first. If the value is an Array, we should return a new Array in which every element is recursively copied using the same function. If the value is an Object, we must generate a new Object with copies of its properties. For primitive values like strings, numbers, or booleans, we can simply return the value.

It's worth noting that although writing the code without variable assignments and curly brackets might be interesting for learning purposes, it can make the code less readable. In a professional setting, I would never write code this way:

const deepCopy = v =>
  // Check if it's an Array
  v instanceof Array ?
    // Map each value to its copy
    v.map(deepCopy) :
    // If not, check if it's a non-null Object
    (typeof v === "object" && v !== null) ? 
      // Create a new Object with copied property values
      Object.entries(v)
            .reduce((acc, [k, v]) => ({ ...acc, [k]: deepCopy(v) }), {}) :
      // Otherwise just return the value
      v;

console.log(deepCopy({foo: 'bar', arr: [{baz: 42}, true]}));
console.log(deepCopy("Hello world"));
console.log(deepCopy(["a", "b", null]));

Answer 3

Answer №2

If you want to extract arrays of keys and values from an object using Object.keys() and Object.values(), then iterate through them to assign those items to a new object, give this a try:

let exampleObject = {key1: 'value1', key2: 'value2'};

let extractedKeys = Object.keys(exampleObject);
let extractedValues = Object.values(exampleObject)

console.log(extractedKeys, extractedValues)

let newObject = {};

for( let index = 0; index < keys.length; index++ ){
    newObject[extractedkeys[index]] = extractedvalues[index] 
}

console.log(newObject);

newObject.key1 = 'modified';

console.log(newObject);

Answer 4

If you want to extract arrays of keys and values from an object using Object.keys() and Object.values(), then iterate through them to assign those items to a new object, give this a try:

let exampleObject = {key1: 'value1', key2: 'value2'};

let extractedKeys = Object.keys(exampleObject);
let extractedValues = Object.values(exampleObject)

console.log(extractedKeys, extractedValues)

let newObject = {};

for( let index = 0; index < keys.length; index++ ){
    newObject[extractedkeys[index]] = extractedvalues[index] 
}

console.log(newObject);

newObject.key1 = 'modified';

console.log(newObject);

Deep copying in Javascript without resorting to JSON or using variable assignments

Answer №1

Answer №2

Similar questions

Adjusting the size of SVG rectangle shapes within a group container

Firefox only loads images and jquery after a refresh of the page

Differences between Arrow function and regular function when used in Array.map()

What is the best way to reset everything back to its original position by clicking anywhere on the screen except for the specified div?

The PHP script's header() function is failing to execute

issues with the handler not functioning properly in html and javascript

Utilize the passed value within the $scope.$on function

What is the process for including paths as parameters in jvectormap?

Looking to crop a canvas without changing its dimensions using jQuery

The scraping tool from Snipcart encountered issues while trying to capture product data in a Next.js

Wondering how to optimize FullCalendar for mobile and touch events?

`Inability of ngmodel to bind integer values on select element`

Show JSON information from a jQuery post request

Using node.js version 10.0.0 to tinker with gulp

Do we always need to use eval() when parsing JSON objects?

Is there a way to submit two forms using just one button?

angular js using ng-table in a simple example

Setting the Datetimepicker to be used with every input field

Having trouble with the $.get function in AJAX with Rails 4? It seems

What could be the reason for the lack of error handling in the asynchronous function?