Pass by Value or Pass by Reference?
In JavaScript , we have functions and we have arguments that we pass into those functions. But how JavaScript handles what you're passing in is not always clear. There is no "pass by reference" for any variable in JavaScript. All variables and arguments are assigned by value, but for objects the value of the variable is a reference. Because of this, when you pass an object and change its members, those changes persist outside of the function. This makes it look like pass by reference . So, Primitive values like number, string, boolean are passed by value while Objects and arrays are passed by reference like above said.With Primitive Data Types
In the case of Primitive Data Types , if you change the value of a Primitive Data Type inside a function, this change won't affect the variable in the outer scope. This means that any changes to that variable while in the function are completely separate from anything that happens outside the function. Let's take a look at the following example:
var toDay = "Sunday";
function changeDay(tmpDay){
tmpDay = "Monday";
}
alert(toDay); // "Sunday"
changeDay(toDay);
alert(toDay); // "Sunday"
In the above example, we are changing the "toDay" variable inside of the function changeDay, and display it after calling the function, it still has the value "Sunday" . This is because when primitive types are passed by value. This means that any changes to that variable while in the function are completely separate from anything that happens outside the function. This is what is meant when we say we are passing by value in JavaScript.
With Objects
In the case of Objects , if you change the value of an Object property inside a function, this change will affect the variable in the outer scope . All variables and arguments are passed by value, but for objects the value of the variable is a reference. Passing by reference involves having two references point to the same object in memory. This means you can mutate and object or function by assigning it to another object or passing it as a parameter to a function. Let's take a look at the following example:
var thisWeek = {
toDay: "Sunday"
};
function changeDay(tmpWeek){
tmpWeek.toDay = "Monday";
}
alert(thisWeek.toDay); //Sunday
changeDay(thisWeek);
alert(thisWeek.toDay); //Monday
In the above example, we are changing the "toDay" variable inside of the function changeDay, and display it after calling the function, the value of toDay is changed to "Monday" . This is because when you pass an object into the function, you are not passing a copy. You are passing reference that points to the thisWeek object. So when you change a property of that object in the function, you are changing the property of the object in the outer scope .
Understanding the difference between pass by value and pass by reference is key to understanding how JavaScript objects and primitives work.
Related Topics
- JavaScript Interview Questions (Part2)
- JavaScript Interview Questions (Part3)
- Is JavaScript a true OOP language?
- Advantages and Disadvantages of JavaScript
- Difference Between JavaScript and ECMAScript?
- What is noscript tag?
- Escaping Special Characters in JavaScript
- What is undefined x 1 in JavaScript?
- JavaScript : Logical Operators
- Difference between '=', '==' and '===' operators?
- How to reload a page using JavaScript?
- How to write html code dynamically using JavaScript?
- How to add html elements dynamically with JavaScript?
- How to load another html page from javascript?
- What Is The Disadvantages Using InnerHTML In JavaScript?
- What is Browser Object Model
- How to detect the OS on the client machine in JavaScript?
- Difference between window, document, and screen in Javascript?
- Difference between the substr() and substring() in JavaScript?
- How to replace all occurrences of a string in JavaScript?
- How to test a string as a literal and as an object ?
- What is Associative Array? How do we use it?
- What is an anonymous function in JavaScript?
- What is the use of 'bind' method in JavaScript?
- Pure functions Vs. Impure functions in javascript
- Is Javascript a Functional Programming Language?
- What's the Difference Between Class and Prototypal Inheritance?
- How to prevent modification of an object in Javascript?
- What is 'this' keyword in JavaScript?
- How Does Function Hoisting Work in JavaScript?
- What do mean by NULL in Javascript?
- What does the delete operator do in JavaScript?
- What is the Infinity property used for in Javascript?
- Event bubbling and Event Capturing in JavScript?
- What is "strict mode" and how is it used in JavaScript?
- What is the difference between .call() and .apply()?
- Entire content of a JavaScript source file in a function block?
- What is an immediately-invoked function expression?
- What is escape & unescape String functions in JavaScript?
- What is the instanceof operator in JavaScript?
- What Are RESTful (REpresentational State Transfer)Web Services?
- What is Unobtrusive JavaScript & Why it's Important?
- What Does JavaScript Void(0) Mean?
- What are JavaScript Cookies?
- Difference between Client side JavaScript and Server side JavaScript
- TypeError: document.getelementbyid(...) is null
- Uncaught TypeError: Cannot read property of undefined In JavaScript
- What's the difference between Null and Undefined?