Hey guys in this latest post we will understand about Shallow Copy in JavaScript in a very easy way. I was writing this post from the last 5 days(on my phone) and I completed it fully. I think you can make a benefit from it.
In my ongoing long journey of JavaScript, I have discovered many things and found very useful and want to share it.
Let's Go !!!
What is Shallow Copy?
- Making a shallow copy of an array or object means creating new references to the primitive values inside the object, copying them.
- That means that changes to the original array will not affect the copied array, which is what would happen if the only reference to the array had been copied (such as would occur with the assignment operator =).
A shallow copy refers to the fact that only one level is copied, and that will work fine for an array or object containing only primitive values.
- For objects and arrays containing other objects or arrays, copying these objects requires a deep copy. Otherwise, changes made to be nested references will change the data nested in the original object or array.
Example
const array = ['😉', '🙂', '😎']
const copyWithEquals = array
console.log(copyWithEquals === array) // true (The assignment operator did not make a copy)
array[0] = '😡'
console.log(...array) // 😡 🙂 😎
console.log(...copyWithEquals) // 😡 🙂 😎
-> In order to avoid the above this problem, Let's see 4 methods of a shallow copy.
Shallow copy using (...)
The spread operator (...) is a convenient way to make a shallow copy of an array or object when there is no nesting, it works great.
const array = ['😀', '😎', '😍']
const copyWithEquals = array
console.log(copyWithEquals === array) // true (The assignment operator did not make a copy)
const copyWithSpread = [...array] // Changes to array will not change copyWithSpread
console.log(copyWithSpeed === array) // false (The spread operator made a shallow copy)
array[0] = '😡'
console.log(...array) // 😡 😎 😍
console.log(...copyWithEquals) // 😡 😎 😍
console.log(...copyWithSpread) // 😀 😎 😍
Shallow copy using .slice()
For arrays specifically, using the built-in .slice() method works the same as the spread operator - creating a shallow copy of one level:
const array = ['😀', '😎', '😍']
const copyWithEquals = array
console.log(copyWithEquals === array) // true (The assignment operator did not make a copy)
const copyWithSlice = array.slice() // changes to array will not change copyWithSlice
console.log(copyWithSlice === array) // false (Using .slice() made a shallow copy of the array)
array[0] = '😡'
console.log(...array) // 😡 😎 😍
console.log(...copyWithEquals) // 😡 😎 😍
console.log(...copyWithSlice) // 😀 😎 😍
Shallow copy using .assign()
The same type of shallow copy would be created using Object.assign(), which can be used any object or array:
const array = ['😀', '😎', '😍']
const copyWithEquals = array
const copyWithAssign = [] // Changes to array will not change copyWithAssign
Object.assign(copyWithAssign, array) // Object.assign(target, source)
array[0] = '😡'
console.log(...array) // 😡 😎 😍
console.log(...copyWithEquals) // 😡 😎 😍
console.log(...copyWithAssign) // 😀 😎 😍
Shallow copy arrays using Array.from()
Another method to copy a JavaScript array using Array.from(), which will laso make a shallow copy, as shown in the below example:
const emojiArray = ["😎", "😀", "🙂"]
console.log(...emojiArray) // 😎 😀 🙂
const emojiArrayNotCopied = emojiArray
console.log(emojiArrayNotCopied === emojiArray) // true
// Make a shallow copy using Array.from:
const emojiArrayShallowCopy = Array.from(emojiArray)
console.log(emojiArrayShallowCopy === emojiArray) // false
eemojiArray[0] = "😡"
console.log(...emojiArray) // 😡 😀 🙂
console.log(...emojiArrayNotCopied) // 😡 😀 🙂
console.log(...emojiArrayShallowCopy) // 😎 😀 🙂
Hoping you understand many things here and will use this in your projects. ⚡
Need Help
Need help in raising fund to buy a Mechanical Keyboard. This pandemic has affected my family badly so can't ask my DAD for it. Please Help Me.
⚡ Thanks For Reading | Happy Coding 🍺
Originally at -> Here