Passing Data in JavaScript: Value vs. Reference

Last Updated: 25th April, 2024

Passing data in JavaScript

Passing data in JavaScript refers to the way that data is sent from one function to another. There are two ways to pass data in JavaScript: by value and by reference.

When passing data by value, a copy of the value is created and passed to the function. This means that any changes made to the value within the function will not affect the original value.

When passing data by reference, a reference to the original value is passed to the function. This means that any changes made to the value within the function will also affect the original value.

Overview of value and reference types

In JavaScript, there are two types of data: value types and reference types.

Value Types: Value types are data types that store a single value, and they are stored in memory as their actual values. When a variable is assigned a value type, a copy of that value is made and stored in the variable. This means that changes to the variable do not affect the original value.

The most common examples of value types in JavaScript are number, string, and boolean.

• Number: This value type stores numerical values such as 1, 2, 3, etc.
• String: This value type stores a sequence of characters such as "hello" or "world".
• Boolean: This value type stores a value of either true or false.

When a value type is passed as an argument to a function, a copy of the value is made and passed to the function. Any changes made to the value within the function do not affect the original value.

Reference types: Reference types are data types that store a reference to a value, rather than the actual value itself. When a variable is assigned a reference type, it stores a reference to the value in memory, rather than the value itself. This means that changes made to the variable affect the original value.

The most common examples of reference types in JavaScript are objects and arrays.

• Object: This reference type stores a collection of key-value pairs and is defined using curly braces { }.
• Array: This reference type stores a collection of values and is defined using square brackets [ ].

When a reference type is passed as an argument to a function, a reference to the original value is passed to the function, rather than a copy of the value. This means that changes made to the value within the function affect the original value.

Pass-by-Value

When you pass a variable of a primitive data type as an argument to a function, a copy of the variable's value is created and passed to the function. Any changes made to the copy inside the function do not affect the original variable outside the function.

Example

Loading...
 Run

In this example, we define a function called double that takes a parameter called number. Inside the function, we multiply the parameter by 2 and assign the result back to the number variable. We then return the number variable.

We declare a variable called num and assign it the value of 5. We then call the double function and pass in num as an argument. The returned value is assigned to a new variable called doubledNum. Finally, we log the values of num and doubledNum to the console.

As expected, the value of num is still 5 because the double function did not modify it. Instead, the function created a copy of the value of num, doubled it, and returned the new value.

Pass-by-Reference

In JavaScript, objects and arrays are passed by reference. This means that when you pass an object or an array to a function, any changes made to the object or array inside the function also affect the original object or array outside the function.

Passing Objects

In JavaScript, objects are passed into functions by reference. This means that when an object is passed into a function, any changes made to the object inside the function will also affect the original object outside the function. This is because the object reference is being passed, not the object itself.

Example

Loading...
 Run

In this example, we pass the person object into the updatePerson function, which then changes the age property of the object. When we log the age property outside the function, it has been updated to 31.

Common pitfalls when passing objects: One common pitfall when passing objects is that multiple functions may accidentally modify the same object. For example:

Loading...
 Run

In this example, we pass the person object into two separate functions that each modify a different property of the object. However, since the object reference is being passed, both functions modify the same object, resulting in unexpected behavior.

Making copies of objects: To avoid modifying the original object, we can make a copy of the object before passing it into a function. There are several ways to make a copy of an object, such as using the spread operator or Object.assign() method. Here's an example using the spread operator:

Loading...
 Run

In this example, we make a copy of the person object using the spread operator, and modify the age property of the copied object. The original object remains unchanged, and we return the modified copy.

Passing Arrays

Like objects, arrays are passed into functions by reference in JavaScript. This means that any changes made to an array inside a function will also affect the original array outside the function.

Example:

Loading...
 Run

In this example, we pass the numbers array into the addNumber function, which then adds the number 4 to the array using the push() method. When we log the numbers array outside the function, it has been updated to [1, 2, 3, 4].

Common pitfalls when passing arrays One common pitfall when passing arrays is that multiple functions may accidentally modify the same array, leading to unexpected behavior. For example:

Loading...
 Run

In this example, we pass the numbers array into two separate functions that each modify the array in a different way. However, since the array reference is being passed, both functions modify the same array, resulting in unexpected behavior.

How to make copies of arrays: To avoid modifying the original array, we can make a copy of the array before passing it into a function. There are several ways to make a copy of an array, such as using the slice() method or the spread operator. Here's an example using the spread operator:

Loading...
 Run

In this example, we make a copy of the numbers array using the spread operator, and add the number 4 to the copied array. The original array remains unchanged, and we return the modified copy.

Pros and Cons of Pass-by-Value and Pass-by-Reference

Both pass-by-value and pass-by-reference have their advantages and disadvantages. Pass-by-value can be useful in situations where you want to ensure that the original variable is not modified. This is because a copy of the variable is created, and any changes made within the function do not affect the original value. Pass-by-reference, on the other hand, can be useful when working with large objects or arrays. This is because passing a reference to the object rather than a copy can save memory and increase performance.

However, pass-by-reference can also lead to unintended consequences if not used properly. Modifying an object within a function can have unintended side effects on other parts of your code, making it difficult to debug. Pass-by-value can also create performance issues if large objects or arrays are constantly being copied.

Conclusion

In conclusion, understanding the differences between pass-by-value and pass-by-reference in JavaScript is important for creating efficient and effective code. By carefully considering the pros and cons of each approach, you can make informed decisions when designing and implementing your applications.