Javascript Pass By Value and Pass By Reference | My First Blog
"Javascript" as a programming language is both powerful and strange in equal measure. On the other hand, its versatile nature allows developers to build powerful and complex applications for a variety of platforms including web, mobile devices and even desktops! One one end its easy to understand concepts and easy coding style allows lot of beginners to adopt Javascrit very quickly in a very short span of time, and on the other end it has some truly strange and bizarre quirks that can leave even experienced developers scratching their heads! Starting with this very first blog, I will try to share you very easy understnading of some quirky to very important concepts in an easy to understand beginner friendly explanations from my past experiences.
Hello World, My name is Priyanku Hazarika, and I have been working with various startups globally from the past few years, and helping them to build cool softwares and products using Javascript. My experience includes Javascript as my primary language, Node.js, Typescript, Frontend technologies like React.js, Vue.js, Redux etc. I also have been working on containarizing applications and deploying them on various cloud platforms like AWS, Google cloud etc. I have also used databases like MySql, Postgres, Oracle, MongoDB, cloud databases like AWS Dynamo DB etc. Few a times i also worked on serverless using AWS lambda and more. Apart from this I have also been exploring protocols like OCPP (Open Charge Point Protocol) and OCPI (Open Charge Point Interface) that allows us to build standard EV Charging infrastructures. I have also helped few companies globally, to setup their EV Charging Infrastructure using these protocols. Ok, I feel I have said enough about myself, now lets get back to our Topic as titled “Javascript Pass By Value and Pass By Reference” and try to understand the underlying concept. I have picked up this topic randomly to start, and will continue to share knowledge on more random concepts of Javascript further!
Before going to Pass By Value and Pass By Reference, we have to understand about two type of memory that javascript uses. Usually Javascript uses Stack Memory and Heap Memory mainly while execution. I am sure you all are aware about what is Stack and Heap, so I am not gonna explain about that anymore. Also, as we know that there are two types of datatypes in javascript, Primitive Data types that include - Number, String, Boolean, null, undefined, Symbol and BigInt, the other is Non-Primitive Data types that includes Array, Objects and Functions. Now simply from a javscript point of view, javascript uses Stack Memory to store Primitive Data types and Heap Memory to store Non-Primitive Data types during execution. Here the main concept of Pass By Value and Pass By Reference kicks in! These two concepts comes when you try to give the value of one variable to another variable and later on try to change that another variable. For eg. you have a variable named “variableA” like let variableA = 'just some value' and another variable “variableB” and you have set the value of variableB equals to variableA like let variableB = variableA, so that variableB holds the value of variableA. Now if you try to change the value of variableB to some other value like this variableB = 'just some another value', here only the value of variableB changes to “just some another value”, and the value of variableA still remains the same. Let me show you a code sample by logging the values of variableA and variableB to explain it more clearly below.
In the code above, we can see that after changing variableB, the value of variableA didnot change. This is what Pass By Value is all about. Whenever a variable with primitive data type is given a value, javascript stores it in the stack, and whenever the value of one variable is assigned to another variable like variableB = variableA, a copy of the first variable (in our case variableA) is made available in the stack and then that copy is assigned to another variable (in our case variableB) and that is the reason why changing variableB doesnot effect variableA, because in variableB we are changing the copy, not the original value! This is what Pass By Value is all about in javascript i.e we are passing the copied value of a variable to another variable!
But but but!!! This is not the case when we are working with Non-Primitive variables. Non-Primitive Data types are always passed by reference. Let me explain you in more detailed what I mean.
As I have already said that in javascript, values with Non-primitive data types are always stored in the heap memory during execution. Let us take an example, lets say you have declared a variable variableA like this let variableA = {"someProperty": "just some value"}, here the variableA holds an Object data type value and another variable variableB like this let variableB = variableA, so we have assigned the value of variableB to hold the value of variableA. Now if we do something like variableB.someProperty = "just some another value", then the value of variableA will also change along with variableB. Let me show you this with some code samples to make it more clear!
As you can see above, while changing a property of variableB, the same property of variableA also got changed. This is what pass by reference is! Let me explain you what happened behind the scene. So whenever a non-primitive variable is given a value, javascript stores it in the heap memory, and whenever the value of one variable is assigned to another variable like variableB = variableA, the reference of the first variable (in our case variableA) is given to another variable (in our case variableB). So in our case, variableB is refering to the value of variableA, unlike the previous case (in pass by value), this time a copy is not made, rather, directly the reference of the value of one variable is given to the another variable, and this is the reason why changing the value of variableB effects variableA, since both the variables are refering to the same value! Lets see it with a diagram below from memory perspective.
Also I want to make a note that in functions, whenever you pass any values as input in functions, they are always passed by value. Even if you are passing a variable to a function which is of non-primitive data types, they are always passed as a value not by reference. This is why i said, javascript can be confusing and weird and so I am here to help you 😉.
I hope this blog has been informative and useful for you. Whether you’re looking to learn something new or just seeking some inspiration, I trust that this post has provided you with valuable insights and perspectives. Thank you for taking the time to read it, and I wish you all the best in your endeavors! Additionally, I invite you to stay tuned for more informative and cool concepts like this one!
Cover Image by CopyrightFreePictures from Pixabay
