Shallow copy
A shallow copy means that certain (sub-)values are still connected to the original variable.
Spread Operator ...
- The
spread operatoris a new addition to the features available in the JavaScriptES6version - The spread operator
...is used to expand or spread aniterableor anarray
_7numbers = [1, 2, 3];_7numbersCopy = [...numbers];_7numbersCopy.push(4);_7_7console.log(numbers); // [1, 2, 3]_7console.log(numbersCopy); // [1, 2, 3, 4]_7// numbers array is unaffected
_7nestedNumbers = [[1], [2]];_7numbersCopy = [...nestedNumbers];_7_7numbersCopy[0].push(300);_7console.log(nestedNumbers); // [[1, 300], [2]]_7console.log(numbersCopy); // [[1, 300], [2]]_7// Both have been changed because they share the same reference
for...loop
_11numbers = [1, 2, 3];_11numbersCopy = [];_11_11for (i = 0; i < numbers.length; i++) {_11 numbersCopy[i] = numbers[i];_11}_11_11numbersCopy.push(4);_11console.log(numbers); // [1, 2, 3]_11console.log(numbersCopy); // [1, 2, 3, 4]_11// numbers array is unaffected
Array.map()
- The
map()method in JS creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method. - Generally,
map()method is used to iterate over an array and call a function on every element of the array.
_11numbers = [1, 2, 3];_11double = (x) => x * 2;_11_11numbers.map(double);_11_11numbers = [1, 2, 3];_11numbersCopy = numbers.map((x) => x);_11_11identity = (x) => x;_11numbers.map(identity);_11// [1, 2, 3]
Array.filter()
_2// What if you’re filtering for even numbers?_2[1, 2, 3].filter((x) => x % 2 === 0); // [2]
This function returns an array, just like map, but it’s not guaranteed to be the same length.
The input array length was 3, but the resulting length is 1.
If your filter's predicate always returns true, however, you get a duplicate!
Every element passes the test, so it gets returned.
_2numbers = [1, 2, 3];_2numbersCopy = numbers.filter(() => true);
Array.reduce()
- I almost feel bad using reduce to clone an array, because it’s so much more powerful than that. But here we go…
_6numbers = [1, 2, 3];_6_6numbersCopy = numbers.reduce((newArray, element) => {_6 newArray.push(element);_6 return newArray;_6}, []);
Array.slice()
- slice returns a shallow copy of an array based on the provided start/end index you provide.
_10//If we want the first 3 elements:_10_10[1, 2, 3, 4, 5].slice(0, 3);_10// [1, 2, 3]_10// Starts at index 0, stops at index 3_10If we want all the elements, don’t give any parameters_10_10numbers = [1, 2, 3, 4, 5];_10numbersCopy = numbers.slice();_10// [1, 2, 3, 4, 5]
Array.concat()
_2[1, 2, 3].concat(4); // [1, 2, 3, 4]_2[1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]
concatcombines arrays with values or other arrays- If you give nothing or an empty array, a shallow copy’s returned
_2[1, 2, 3].concat(); // [1, 2, 3]_2[1, 2, 3].concat([]); // [1, 2, 3]
Array.from()
This can turn any iterable object into an array. Giving an array returns a shallow copy.
_3numbers = [1, 2, 3];_3numbersCopy = Array.from(numbers);_3// [1, 2, 3]
Deep copy
A deep copy means that all of the values of the new variable are copied and disconnected from the original variable
JSON.parse() and JSON.stringify()
JSON.stringify()turns an object into a string.JSON.parse()turns a string into an object.Combining them can turn an object into a string, and then reverse the process to create a brand new data structure.
_7nestedNumbers = [[1], [2]];_7numbersCopy = JSON.parse(JSON.stringify(nestedNumbers));_7_7numbersCopy[0].push(300);_7// nestedNumbers -> [[1], [2]]_7// numbersCopy -> [[1, 300], [2]]_7// These two arrays are completely separate!