Why Is a Variable Unaltered After Modify It Inside of a Function?

In JavaScript, it can sometimes be puzzling why changes to a variable inside a function don't appear to persist outside of the function. This often arises due to JavaScript's handling of variable scope and pass-by-reference versus pass-by-value behavior. In this article, we'll explore why variables may appear unaltered after modification within a function and offer explanations with examples.

01. Understanding JavaScript's Variable Scope

To understand why a variable is unaltered, we first need to understand JavaScript's variable scope. The scope of a variable refers to the context in which it is accessible. JavaScript has two main types of scope:

Global Scope: Variables declared outside of any function are accessible throughout the entire script.
Local Scope: Variables declared inside a function are only accessible within that function.

When you modify a variable inside a function, it may or may not reflect the changes outside the function, depending on the scope in which it was declared.

02. Pass-by-Value vs. Pass-by-Reference

Another critical factor in this behavior is how JavaScript passes variables to functions. JavaScript uses two methods for passing data to functions:

Pass-by-Value: When primitive data types (like numbers, strings, and booleans) are passed to a function, a copy of the value is passed, meaning any modifications to the variable within the function will not affect the original variable.
Pass-by-Reference: When non-primitive data types (like objects and arrays) are passed to a function, the reference (memory address) is passed, meaning the function can modify the original variable.

We'll explore this concept in more detail with examples in the following sections.

03. Example: Pass-by-Value with Primitives

Let's consider a scenario with a primitive data type, such as a number. In this case, when we modify the variable inside a function, the original variable remains unchanged due to pass-by-value.

Example 1: Pass-by-Value with a Number


let num = 5;

function modifyNumber(value) {
  value = value + 10;
  console.log(value); // Logs 15
}

modifyNumber(num);
console.log(num); // Logs 5 (Original value remains unchanged)

In this example, we pass the value of the variable num to the function. Inside the function, the value of value is modified, but the original num variable remains unchanged because JavaScript passed a copy of the value (pass-by-value).

04. Example: Pass-by-Reference with Objects

On the other hand, when passing non-primitive data types, like objects, to functions, JavaScript passes a reference to the object rather than a copy. This means any changes made to the object inside the function will also affect the original object.

Example 2: Pass-by-Reference with an Object


let person = { name: 'John', age: 30 };

function modifyPerson(obj) {
  obj.age = 35;
  console.log(obj.age); // Logs 35
}

modifyPerson(person);
console.log(person.age); // Logs 35 (Original object is modified)

In this example, the person object is passed to the function. The function modifies the age property of the object. Since objects are passed by reference, the changes are reflected in the original person object outside the function.

05. Why Doesn't Variable Update? Common Pitfalls

In some cases, variables may not update as expected inside a function, even with pass-by-reference objects. This can be caused by:

Re-declaring the variable: If you re-declare a variable inside the function (especially using let or const), the change won't affect the variable outside the function because you're working with a local copy.
Using non-mutating methods: If you try to modify a variable by using methods that do not change the original object (like concat() for arrays or Object.assign() for objects), the changes won't reflect outside the function.
Shadowing variables: If you declare a variable with the same name inside the function, it may "shadow" the outer variable, leading to confusion about which variable you're modifying.

06. Conclusion

The behavior of variables inside functions can be confusing at first, especially when variables appear unaltered after modification. However, understanding the concepts of variable scope and pass-by-value versus pass-by-reference can help you grasp how JavaScript handles variables. By knowing the differences between primitive and non-primitive data types and how they are passed to functions, you can avoid common pitfalls and write more predictable code.

Primitive data types are passed by value, so changes inside the function do not affect the original variable.
Non-primitive data types are passed by reference, so changes inside the function will modify the original variable.
Be mindful of variable shadowing and redeclaration, as they can lead to unexpected behavior.

Understanding these concepts will help you work more effectively with variables in JavaScript functions.