Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do JavaScript primitive/object types passed in functions?
In JavaScript, understanding how data types are passed to functions is crucial. Primitive types are passed by value, while objects are passed by reference. This affects how modifications inside functions impact the original data.
Pass by Value (Primitives)
Primitive types (string, number, boolean, null, undefined, symbol, bigint) are passed by value. A copy is made, so changes inside the function don't affect the original variable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pass by Value Example</title>
</head>
<body>
<script>
function modifyPrimitive(value) {
value = value + 10;
document.getElementById('output').innerHTML += 'Inside function: ' + value + '<br>';
return value;
}
let originalNumber = 5;
document.getElementById('output').innerHTML += 'Original: ' + originalNumber + '<br>';
modifyPrimitive(originalNumber);
document.getElementById('output').innerHTML += 'After function: ' + originalNumber + '<br>';
</script>
</body>
</html>
Original: 5 Inside function: 15 After function: 5
Pass by Reference (Objects)
Objects (including arrays) are passed by reference. The function receives a reference to the same object in memory, so modifications affect the original object.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pass by Reference Example</title>
</head>
<body>
<script>
function modifyObject(obj) {
obj.age = 25;
obj.city = 'Mumbai';
document.getElementById('output').innerHTML += 'Inside function: ' + obj.name + ', ' + obj.age + ', ' + obj.city + '<br>';
}
let person = { name: 'Rohan', age: 12, city: 'Delhi' };
document.getElementById('output').innerHTML += 'Original: ' + person.name + ', ' + person.age + ', ' + person.city + '<br>';
modifyObject(person);
document.getElementById('output').innerHTML += 'After function: ' + person.name + ', ' + person.age + ', ' + person.city + '<br>';
</script>
</body>
</html>
Original: Rohan, 12, Delhi Inside function: Rohan, 25, Mumbai After function: Rohan, 25, Mumbai
Array Example
Arrays behave the same as objects since they are reference types:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Reference Example</title>
</head>
<body>
<script>
function modifyArray(arr) {
arr.push(4);
arr[0] = 'modified';
document.getElementById('output').innerHTML += 'Inside function: [' + arr.join(', ') + ']<br>';
}
let numbers = [1, 2, 3];
document.getElementById('output').innerHTML += 'Original: [' + numbers.join(', ') + ']<br>';
modifyArray(numbers);
document.getElementById('output').innerHTML += 'After function: [' + numbers.join(', ') + ']<br>';
</script>
</body>
</html>
Original: [1, 2, 3] Inside function: [modified, 2, 3, 4] After function: [modified, 2, 3, 4]
Comparison
| Type | Passed By | Original Modified? | Examples |
|---|---|---|---|
| Primitives | Value | No | string, number, boolean |
| Objects | Reference | Yes | objects, arrays, functions |
Key Points
- Primitive values are copied when passed to functions
- Objects share the same memory reference
- Reassigning the parameter itself doesn't affect the original (even for objects)
- Modifying object properties does affect the original
Conclusion
JavaScript passes primitives by value and objects by reference. Understanding this distinction helps prevent unexpected side effects when working with functions and ensures predictable code behavior.
284 Views
