Commit36 //#JavaScript30 - Day 14 [Object and Arrays - Reference VS Copy]
In this challenge we will use javascript to better understand object and arrays in terms of reference versus copy
I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!
Today's challenge comes from JavaScript30.
I already published an article today covering another subject in my JS React course. So let’s get right into this challenge!
JavaScript30 - Day 14
So this will be an object and array challenges to illustrate the differences between reference versus copy. Nothing super fun or pretty today. It’s kind of like an array cardio again. We’ll basically be looking at our console log a bunch!
// start with strings, numbers and booleans
let age = 100;
let age2 = age;
console.log(age, age2);
age = 200
console.log(age, age2);
let name = 'Janet';
let name2 = name;
console.log(name, name2);
name = 'Twixmixy';
console.log(name, name2);
In the console log you can see that age
and name
are updated accordingly.
// Let's say we have an array
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
// and we want to make a copy of it.
const team = players;
console.log(players, team);
Confirming our console log output is basically a duplicate array.
// You might think we can just do something like this:
team[3] = 'Lux';
console.log(players, team);
So even though we updated the team
array, it went back and updated the players
array as well.
Note that this is different than what was done with numbers, strings, and booleans.
When you update an array it’ll always reference back. So we need to make a copy instead of a reference.
// So, how do we fix this? We take a copy instead!
const team2 = players.slice();
team2[2] = 'Winona';
console.log(team2);
This gives us a sliced out new variable so we can edit it as we see fit going forward.
// or create a new array and concat the old one in
const team3 = [].concat(players);
console.log(team3);
This creates another array for us so we could edit it as needed going forward.
// or use the new ES6 Spread
const team4 = [...players];
team4[0] = 'Joe';
console.log(team4);
Again, creating a new variable and copying the array, this is the ES6 spread version. Then making an update to the newly created variable.
const team5 = Array.from(players);
team5[2] = 'Rolf';
console.log(team5);
Finally Array.from also can be used in creating a new variable and copying the array to manipulate as needed.
// with Objects
Same thing can be done with Objects
const person = {
name: 'Wes Bos',
age: 80
};
// and think we make a copy:
const captain = person;
captain.number = 99;
console.log(person);
We ended up adding a new property to the original variable.
// how do we take a copy instead?
const cap2 = Object.assign({}, person, { number: 102, age: 26 });
console.log(cap2);
Just like before we need to declare a new variable.
// We will hopefully soon see the object ...spread
I just tried it out and it seemed to work…
const cap3 = {...person};
cap3.age = 37;
console.log(cap3);
// Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
Basically, nested objects aren’t properly protected by a variable declaration copy.
const janet = {
name: 'Janet',
age: 37,
social: {
twitter: '@Twixmixy',
instagram: 'PigletSkates'
}
}
console.clear();
console.log(janet);
const dev = Object.assign({}, janet);
dev.age = 38;
console.log(dev);
dev.social.twitter = '@PigletSkates';
console.log(janet);
You can see in the screen capture that it did fine updating my age in the new variable and did not effect the original, but when I applied a change to my twitter handle it did effect the original variable.
Object.assign only does one level deep. There is the ability to do cloneDeep. The instructor says you can google it to look up the reference. They warn against doing these types of updates. There may be a better way to manage data and coding.
Alternatively if you really need it you can do the “poor mans” deep clone by using JSON, but it could effect the performance.
This was a pretty cool lesson for the lack of front facing interaction! What did you think of it?