This is a JavaScript practice with JavaScript30 by Wes Bos without any frameworks, no compilers, no boilerplate, and no libraries.
view demo here
let age = 100;
let age2 = age;
age2 = 200;
let name = 'Kyle';
let name2 = name;
name2 = 'Chad';
it won't change the original one, does make sense
let players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
const team = players;
if we update the team[3]
team[3] = 'Chad';
that will also update the players[3]
too, and that is not what we want
to fix it, we take a copy instead
const team2 = players.slice();
const team3 = [].concat(players); // same way as team2
team2[3] = "Chad";
team3[3] = "Chad";
so that it won't change the original one (players)
use ES6 spread syntax
const team4 = [...players]; // just like take a copy
team4[3] = "Hello Kitty~ Meow";
or you can use Array.from()
as well
const team5 = Array.from(players); // same as team4
team5[3] = "Hello Kitty~ Meow";
think we make a copy of person
object and want to add number
property to only man
object
const person = {
name: "Tom",
age: 30
};
const man = person;
man.number = 100;
does it will also change the person
object ?
unfortunately ...yes, and that's not what we want
we can use Object.assign()
to fix this
Object.assign()
: first argument is an empty object ({}
), second is the object (person
) to fold in, third is the values we want to additionally fold in ({ number: 100 }
), it difference betweenslice()
andsplice()
in Arrays
const man2 = Object.assign({}, person, { number: 100 });
but there's a problem is the Object.assign()
only copy one level deep... so if you try:
const tom = {
name: 'Tom',
age: 30,
social: {
twitter: '@tomyes',
facebook: 'tomyes.coolman'
}
};
const tom2 = Object.assign({}, tom);
tom2.social.twitter = '@tom2_nobody';
the tom.social.twitter
is changed as well
if we need to get a clone deep (i.e. second level deep), we have to run a function and go online and find it where, it's called clone deep and that will clone every level as deep as you want. and before doing it, we might ask ourselves that is do we really need to do this?
there is some cheating way to do a clone deep by using JSON.parse(JSON.stringify())
, just pass in the tom
like:
const tom3 = JSON.parse(JSON.stringify(tom));
tom3.social.twitter = '@tom3_nobody';
so the tom.social.twitter
won't be changed
too see what's going on here, we can console.log()
...
through the JSON.stringify()
to turn the tom
object into a string
and then pass it to JSON.parse()
to construct into an object
-
THe
JSON.stringify()
methods converts a JavaScript value to a JSON string -
The
JSON.parse()
method parses a JSON string, constructing the JavaScript value or object described by the string