Pass by value vs pass by reference in JavaScript
Tags: javascript, webdev, programming, tutorial
Published: 2024-04-30 03:47:11

Hello there, fellow JavaScript enthusiasts! Today, we're going to dive into the intriguing topic of pass by value vs pass by reference in JavaScript. This concept is crucial to understand because it affects how we work with variables and how they are passed to functions.

In JavaScript, primitive data types such as numbers, strings, booleans, null, and undefined are passed by value. This means that when you pass a primitive value to a function, a copy of that value is created and passed to the function. Let's illustrate this with an example:

```javascript
function changeValue(num) {
    num = 42;
    console.log("Inside function:", num);
}

let myNumber = 10;
console.log("Before function call:", myNumber);

changeValue(myNumber);
console.log("After function call:", myNumber);
```

In this example, we have a function called `changeValue` that takes a number as a parameter and assigns it a new value of 42. We then declare a variable `myNumber` and assign it a value of 10. 

When we call the `changeValue` function and pass `myNumber` as an argument, a copy of `myNumber` is created and assigned to the `num` parameter inside the function. Therefore, modifying the value of `num` does not affect the original value of `myNumber`. As a result, the output will be:

```
Before function call: 10
Inside function: 42
After function call: 10
```

On the other hand, objects (including arrays and functions) in JavaScript are passed by reference. This means that when you pass an object to a function, you are actually passing a reference to that object. Any modifications made to the object inside the function will affect the original object. Let's see an example:

```javascript
function changeName(person) {
    person.name = "John";
    console.log("Inside function:", person);
}

let myPerson = { name: "Jane" };
console.log("Before function call:", myPerson);

changeName(myPerson);
console.log("After function call:", myPerson);
```

In this example, we have a function `changeName` that takes an object `person` as a parameter and modifies its `name` property. We declare an object `myPerson` with an initial `name` of "Jane".

When we call the `changeName` function and pass `myPerson` as an argument, a reference to `myPerson` is passed to the `person` parameter inside the function. Thus, any changes made to `person` will be reflected in the original `myPerson` object. The output will be:

```
Before function call: { name: "Jane" }
Inside function: { name: "John" }
After function call: { name: "John" }
```

Understanding the difference between pass by value and pass by reference is crucial when working with JavaScript. It helps us predict how variables will behave when passed to functions and ensures we don't encounter unexpected side effects.

That's all for today's JavaScript journey! I hope this explanation with real-world examples has shed some light on the pass by value vs pass by reference concept. Happy coding, and until next time!


**Follow me in [X/Twitter](https://twitter.com/ashsajal1), [LinkedIn](https://linkedin.com/in/ashsajal)**

**Email : ashsajal@yahoo.com**