JavaScript Value vs Reference Types

[Music] in JavaScript we have two categories of types on one side we have value types also called primitives and the other side we have reference types so in the value types category we have number string boolean symbol which is new in es6 we're going to look at that later in the course as well as undefined and know these are the primitive or value types on the other side we have objects functions and arrays so in the last lecture you learned that functions are also objects the same is true about a race so in a nutshell in JavaScript we have primitives and objects now in this lecture I'm gonna show you how primitives and objects behave differently because this is absolutely important for you to understand before we move on to the next section where I talk about prototypes so on this empty canvas I'm gonna define two primitives x and y I'm gonna set Y to X so here Y is 10 now I'm gonna change the value of x to 20 what I want you to note here is that X and y are two independent variables so I save the changes go back in the console let's log X X is 20 and Y is 10 they are independent so when we work with primitives this value is value that we have here is stored inside of this variable when we copy that variable that value that is stored in the variable is copied into this new variable so they are completely independent of each other now let's see what happens if we use a reference type or an object here so I'm gonna change this to an object that has a property called value and then instead of setting X to 20 I'm gonna set X dot value to 20 so save the changes back in the console let's log X so you can see value property is 20 now let's log Y we can see the value property of Y is also 20 so this is the takeaway when we use an object that object is not stored in this variable that object is stored somewhere else in the memory and the address of that memory location is stored inside that variable so then when we copy X into y it's the address or the reference that is copied in other words both x and y are pointing to the same object in memory and when we modify that object using either X or Y the changes are immediately visible to the other variable so here's the conclusion primitives are copied by value reference types or objects are copied by the reference let's take a look at another example so I'm gonna define a function called increase that takes a number and here we simply increase this number by 1 let's declare a number variable and set it to 10 and then call increase and pass this number now if I log this number on the console what do you think we're going to see let's have a look so save the changes we see 10 but dinner we increase the number well when we call increase and pass this number variable its value is copied into this parameter that is local in this function so this number variable here is completely independent of this other number variable here in this function we increment number by 1 so it will be 11 but after this function this number is going to go out of the scope so when we log this number on the console we're essentially dealing with this first number so I told you that primitives are copied by their value so here we are dealing with two independent copies that's why we see ten on the console now let's change this to a reference type or an object so I'm gonna change ten to an object that has a value property okay let's rename this variable to object and similarly I'm going to rename this parameter in this function to object and then increment object dot value now when we log this on the console what do you think we're gonna see we're gonna see 11 see we got this object with value 11 the reason for this is because when we call increase and pass this object this object is passed by its reference so this local parameter that we have here will point to the same object that we defined here so in this case we are not dealing with two independent copies we have two variables that are pointing to the same object so any changes we make to this object will be visible to the other variable so remember this in JavaScript we have value types also called primitives as well as reference types which are objects our primitives are number string boolean symbol undefined and no primitives or value types are copied by their value reference types or objects are copied by the reference hi guys thank you for watching my javascript tutorial this tutorial is part of my JavaScript course where you learn all the essential JavaScript features that every web and mobile application developer must know if you're an absolute beginner or have some experience in JavaScript and are looking for a fun and in-depth course that teaches you the fundamentals of JavaScript this course is for you this course is also packed with tons of exercises that help you master what you learned in the course in fact many of these exercises are questions that come up in technical programming interviews so if you're pursuing a job as a front-end or a back-end developer or if you simply want to have a more in-depth understanding of JavaScript I highly encourage you to enroll in the course for a limited time you can get this course with a discount using the link in the video description click the link to find out more about the course and enroll

Channel: Programming with Mosh

Views: 46,828

Rating: 4.9786096 out of 5

Keywords: Javascript, web development, web developer, front end, front-end, back-end, back end, mobile development, mobile developer, es6, learn javascript, javascript programming, programming, value type, reference type, value vs reference, programming with mosh, code with mosh

Id: fD0t_DKREbE

Length: 6min 47sec (407 seconds)

Published: Tue May 15 2018