Explain Codes LogoExplain Codes Logo

Pass variables by reference in JavaScript

javascript
functions
closures
encapsulation
Alex KataevbyAlex Kataev·Mar 2, 2025
TLDR

In JavaScript, objects and arrays are passed by reference. This means their properties or elements can be modified inside a function. On the contrary, primitives like strings and numbers are passed by value, meaning their original value won't be changed directly within the functions.

Let's look at an example:

function addProperty(obj) { // the new property will stick around like gum on your shoe obj.newProp = 'added'; } let myObj = {}; addProperty(myObj); console.log(myObj.newProp); // 'added'

See? The addProperty function slaps a new property newProp onto myObj thereby demonstrating that myObj is passed by reference into the function and hence the change is reflected in the object itself.

Tackling variable references: the ins and outs

Object operations on the table

JavaScript doesn't offer the option of passing variables by reference but we can mimic this behaviour. How? By performing operations on object properties. Since objects and arrays fall under reference types, their content can be modified.

Local treasures: Closures

Closures offer you the ability to preserve the state of a variable between function calls without messing with global variables. So not only can you access your variable, but modify them too in a controlled private scope, mimicking reference-like behaviour.

Packaging complexity: Encapsulation

When you are dealing with loops or repetitive variable operations, encapsulate these updates in the cloak of functions to improve readability and maintainability of your code.

Pulling the strings: Getters and Setters

In custom objects, think of getters and setters as the secret tunnel to simulate passing by reference. Object.defineProperty comes handy for creating properties that adjust their value on the fly.

Watchful reminders and notes-to-self

Changing faces: Re-assigning references

The moment you assign a new value to an object or array, your variable bid adieu to the initial reference and takes on a new robe, making it swing between pass-by-value behavior.

Alert! Alert! Security risk with eval

A word of caution, avoid using eval because it's like inviting trouble home. It poses security risks and might drastically dip the performance. Remember, your variable's safety comes first.

The role-player: Context

The context of your code is the stage where your variables perform, and plays a vital role in how references can be manipulated. Be aware of the variable scope and its lifecycle in your applications.

Master the variables: More Techniques, More Power

Turn functions into helpers

Functions can serve as the carpenters of parameters, modifying the properties of objects and producing reference-like effects.

The Array Saga: Handle with care

Working with arrays? Just a quick tip - you can tweak the elements, but remember reassigning a new array will change its reference, leaving the original array in your code unscathed.

Encapsulation Unpacked

Consider using an immediately-invoked function expression (IIFE) to wrap a private scope around your code blocks, giving you the reins of variable references.

Showcase these ideas with examples not just to guide others, but also to make these concepts second nature to you.