Pass by Value, Pass by Reference & How to clone JavaScript Objects

When we assign a primitive value to a variable, the actual data is stored in a memory called the “STACK” and the variable holds the address or the position of the data in the STACK.

When we assign a reference value to a variable, the actual data is stored in a memory called the “HEAP”. The memory address of this data is then copied on the STACK and the variable holds the position of this address in the STACK.

// Primitive Typeslet name = 'John';
let copyOfName = name;
name = 'Adam';console.log(name); // => 'Adam'
console.log(copyOfName) // => 'John'
// Reference Typeslet apple = {name: 'Apple', price: 120}
let copyOfApple = apple;
apple.price = 130;console.log(apple) // => {name: 'Apple', price: 130}
console.log(copyOfApple) // => {name: 'Apple', price: 130}

So if we create a copy of a primitive type, a copy of the data which is on the STACK, in this case, the actual data is copied

But if we copy a reference type, a copy of the data which is on the stack is created, in this case, the address of the data is copied and assigned to the new variable. This explains why modifying a copied object also modifies the original object.

function square(num) {
num = num*num;
return num;
}
function increasePriceByTen(fruit) {
fruit.price += 10;
}
let five = 5;
let squareOfFive= square(n1)
console.log(n1); // => 5
console.log(n2); // => 25
let apple = {name: 'Apple', price: 120}
let copyOfApple = apple
increasePriceByTen(apple);console.log(apple.price); => // 130
console.log(copyOfApple.price) // => 130
Image shows a graphical representation of internal memory management by Javascript. Shows primitive values are stored in the STACK and reference values are stored in the HEAP. Image shows how variables store the pointer to data stored in the stack.
let fruits = ['apple', 'banana', 'orange'];
let copyOfFruits = [];
for (index in fruits) {
copyOfFruits[index] = fruits[index];
}
// for arrays we can also use the `splice` method
let anotherCopyOfFruits = fruits.splice(0);
let basket = {
capacity: 200,
contents: ['banana', 'cherry']
}
let copyOfBasket = {};
for (key in basket) {
copyOfBasket[key] = basket[key];
}
let copyOfFruits = Object.assign([], fruits);
let copyOfBasket = Object.assign({}, basket);
let thirdCopyOfFruits = [...fruits];
let thirdCopyOfBasket = {...basket};
basket.contents.push('mango');console.log(basket.contents);
// => ['banana', 'cherry', 'mango']
console.log(copyOfBasket.contents);
// => ['banana', 'cherry', 'mango']
let nestedArray = [ [ 1, 2, 3 ] ];
let copiedArray = Object.assign([], nestedArray);
nestedArray[0].push(4);console.log(nestedArray);
// => [ [ 1, 2, 3, 4 ] ]
console.log(copiedArray);
// => [ [ 1, 2, 3, 4 ] ]
let basket = {
capacity: 200,
contents: ['banana', 'cherry']
}
let deepCopyOfBasket = JSON.parse(JSON.stringify(basket));

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store