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

  1. Primitive Values
// 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}
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.

Now that we know what primitive values and reference values are, let’s look at how to create true copies of JavaScript Objects.

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));

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

An Introduction To The Web Audio API

How to make a Tooltip in ReactJS🎖

Which front-end framework is the easiest?

Angular pipe

React Native 0.64.2 requires Fresco 2.5

Ansible Role

Understanding of DOM(Document Object Model), Shadow DOM, Virtual DOM.

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
Akshay Shegaonkar

Akshay Shegaonkar

More from Medium

Reactive markup using vanilla Javascript

What is the difference between ‘==’ and ‘===’? And why you need to know.

Some brief thoughts on Hy

How to solve sudoku puzzles using backtracking algorithms and TypeScript