javascript variable assignment by reference

Object references and copying

One of the fundamental differences of objects versus primitives is that objects are stored and copied “by reference”, whereas primitive values: strings, numbers, booleans, etc – are always copied “as a whole value”.

That’s easy to understand if we look a bit under the hood of what happens when we copy a value.

Let’s start with a primitive, such as a string.

Here we put a copy of message into phrase :

As a result we have two independent variables, each one storing the string "Hello!" .

Quite an obvious result, right?

Objects are not like that.

A variable assigned to an object stores not the object itself, but its “address in memory” – in other words “a reference” to it.

Let’s look at an example of such a variable:

And here’s how it’s actually stored in memory:

The object is stored somewhere in memory (at the right of the picture), while the user variable (at the left) has a “reference” to it.

We may think of an object variable, such as user , like a sheet of paper with the address of the object on it.

When we perform actions with the object, e.g. take a property user.name , the JavaScript engine looks at what’s at that address and performs the operation on the actual object.

Now here’s why it’s important.

When an object variable is copied, the reference is copied, but the object itself is not duplicated.

For instance:

Now we have two variables, each storing a reference to the same object:

As you can see, there’s still one object, but now with two variables that reference it.

We can use either variable to access the object and modify its contents:

It’s as if we had a cabinet with two keys and used one of them ( admin ) to get into it and make changes. Then, if we later use another key ( user ), we are still opening the same cabinet and can access the changed contents.

Comparison by reference

Two objects are equal only if they are the same object.

For instance, here a and b reference the same object, thus they are equal:

And here two independent objects are not equal, even though they look alike (both are empty):

For comparisons like obj1 > obj2 or for a comparison against a primitive obj == 5 , objects are converted to primitives. We’ll study how object conversions work very soon, but to tell the truth, such comparisons are needed very rarely – usually they appear as a result of a programming mistake.

An important side effect of storing objects as references is that an object declared as const can be modified.

It might seem that the line (*) would cause an error, but it does not. The value of user is constant, it must always reference the same object, but properties of that object are free to change.

In other words, the const user gives an error only if we try to set user=... as a whole.

That said, if we really need to make constant object properties, it’s also possible, but using totally different methods. We’ll mention that in the chapter Property flags and descriptors .

Cloning and merging, Object.assign

So, copying an object variable creates one more reference to the same object.

But what if we need to duplicate an object?

We can create a new object and replicate the structure of the existing one, by iterating over its properties and copying them on the primitive level.

We can also use the method Object.assign .

The syntax is:

• The first argument dest is a target object.
• Further arguments is a list of source objects.

It copies the properties of all source objects into the target dest , and then returns it as the result.

For example, we have user object, let’s add a couple of permissions to it:

If the copied property name already exists, it gets overwritten:

We also can use Object.assign to perform a simple object cloning:

Here it copies all properties of user into the empty object and returns it.

There are also other methods of cloning an object, e.g. using the spread syntax clone = {...user} , covered later in the tutorial.

Nested cloning

Until now we assumed that all properties of user are primitive. But properties can be references to other objects.

Now it’s not enough to copy clone.sizes = user.sizes , because user.sizes is an object, and will be copied by reference, so clone and user will share the same sizes:

To fix that and make user and clone truly separate objects, we should use a cloning loop that examines each value of user[key] and, if it’s an object, then replicate its structure as well. That is called a “deep cloning” or “structured cloning”. There’s structuredClone method that implements deep cloning.

structuredClone

The call structuredClone(object) clones the object with all nested properties.

Here’s how we can use it in our example:

The structuredClone method can clone most data types, such as objects, arrays, primitive values.

It also supports circular references, when an object property references the object itself (directly or via a chain or references).

As you can see, clone.me references the clone , not the user ! So the circular reference was cloned correctly as well.

Although, there are cases when structuredClone fails.

For instance, when an object has a function property:

Function properties aren’t supported.

To handle such complex cases we may need to use a combination of cloning methods, write custom code or, to not reinvent the wheel, take an existing implementation, for instance _.cloneDeep(obj) from the JavaScript library lodash .

Objects are assigned and copied by reference. In other words, a variable stores not the “object value”, but a “reference” (address in memory) for the value. So copying such a variable or passing it as a function argument copies that reference, not the object itself.

All operations via copied references (like adding/removing properties) are performed on the same single object.

To make a “real copy” (a clone) we can use Object.assign for the so-called “shallow copy” (nested objects are copied by reference) or a “deep cloning” function structuredClone or use a custom cloning implementation, such as _.cloneDeep(obj) .

Lesson navigation

• © 2007—2024  Ilya Kantor
• about the project
• terms of usage
• privacy policy

Quick Tip: How JavaScript References Work

Share this article

The Bottom Line on JavaScript References

Quick example of assign-by-value:, quick example of assign-by-reference:, how to create a new reference, how references work when values are passed as function parameters, how to change the original value in a compound variable, passed as a function argument via a javascript reference, how to store a compound value through assign-by-value, how to store a scalar primitive value through assign-by-reference, frequently asked questions (faqs) about javascript references.

TL;DR: There are NO pointers in JavaScript and references work differently from what we would normally see in most other popular programming languages. In JavaScript, it’s just NOT possible to have a reference from one variable to another variable. And, only compound values (e.g.. Object or Array) can be assigned by reference.

The following terms are used throughout the article:

• scalar – a singe value or unit of data (e.g. integer, boolean , string)
• compound – comprised of multiple values (e.g. array, object, set)
• primitive – a direct value, as opposed to a reference to something that contains the real value.

JavaScript’s scalar types are primitives, but some languages, such as Ruby, have scalar reference types. Note that in JavaScript, the scalar primitive values are immutable while compound values are mutable.

• The typeof value assigned to a variable decides whether the value is stored with assign-by-value or assign-by-reference.
• On variable assignment, the scalar primitive values (Number, String, Boolean, undefined, null, Symbol) are assigned-by-value and compound values are assigned-by-reference.
• The references in JavaScript only point at contained values and NOT at other variables, or references.
• In JavaScript, scalar primitive values are immutable and compound values are mutable.

In the code snippet below, we are assigning a scalar primitive value (a number) to a variable and thus assign-by-value applies here. Firstly, the variable batman is initialized and when the variable superman is assigned with the value stored in batman , it creates a new copy of the value and stores it. When the variable superman is modified, batman is left unaffected, as they point to distinct values.

In the code snippet below, we are assigning a compound value (an array) to a variable and thus assign-by-reference applies here. The variables flash and quicksilver are references to the same value (aka shared value). The references will point to the updated value when the shared value is modified .

When the compound value in a variable is reassigned, a new reference is created. In JavaScript, unlike in most other popular programming languages, the references are pointers to values stored in variables and NOT pointers to other variables, or references.

In the code snippet below, the variable magneto is a compound value (an Array), thus it is assigned to variable (function argument) x as a reference.

The Array.prototype.push method invoked inside the IIFE mutates the value in the variable magneto via a JavaScript reference. But, the reassignment of variable x creates a new reference and further modifications to it do NOT affect the reference to the variable magneto .

The solution here would be to modify the existing compound value that the reference is pointing to. In the code snippet below, variable wolverine is a compound value (an Array) and, on IIFE invocation, the variable (function argument) x is assigned by reference.

The Array.prototype.length property can be used to create an empty array by setting its value to 0 . Thus, the variable wolverine is changed to the new value set in variable x via a JavaScript reference.

The solution here would be to make a manual copy of the compound value and then assign the copied value to a variable. Therefore, the reference of assigned value does NOT point back to the original value.

The recommended approach to create a (shallow) copy of the compound value (Array object) is to invoke Array.prototype.slice method on it with no arguments passed.

The solution here would be to wrap scalar primitive value in a compound value (i.e. an Object or Array) as its property value. Thus, it can be assigned-by-reference. In the code snippet below, scalar primitive value in variable speed is set as a property on object flash . Therefore, it is assigned-by-reference on IIFE invocation to variable (function argument) x .

A good understanding of references in JavaScript can help developers to avoid many common mistakes and write better code.

Happy coding!!

What is the difference between primitive and reference values in JavaScript?

In JavaScript, data types are divided into two categories: primitive (or basic) types and reference types. Primitive types include Number, String, Boolean, Null, Undefined, and Symbol. These types store actual values. For example, if you assign a number to a variable, JavaScript stores the actual number, not a reference to it. On the other hand, reference types include Objects, Arrays, and Functions. These types do not store the actual value. Instead, they store a reference or a pointer to the location in memory where the value is stored. This difference is crucial when you’re performing operations like comparison or copying variables.

How does JavaScript handle reference types when assigning them to a new variable?

When you assign a reference type (like an object or an array) to a new variable, JavaScript does not create a new copy of that value. Instead, it creates a new reference to the same memory location. This means that if you modify the new variable, the original variable will also be affected because they both point to the same data.

What is the concept of pass-by-reference in JavaScript?

In JavaScript, when you pass a reference type (like an object or an array) to a function, it is passed by reference. This means that the function does not receive a new copy of the value. Instead, it gets a reference to the original value. Therefore, if the function modifies the value, the change will be reflected outside the function as well.

How can I clone or copy an object without affecting the original object in JavaScript?

To clone or copy an object without affecting the original object, you can use methods like Object.assign() or the spread operator (…). These methods create a new object with the same properties as the original object, but they do not create a reference to the original object. Therefore, changes to the new object will not affect the original object.

What is the difference between shallow copy and deep copy in JavaScript?

A shallow copy creates a new object and copies over the values of the original object’s properties. However, if the property value is a reference type, it copies the reference, not the actual value. Therefore, changes to the nested objects will affect both the original and the copied object. On the other hand, a deep copy creates a new object and recursively copies all the values of the original object’s properties, including nested objects. Therefore, changes to the copied object will not affect the original object. You can create a deep copy using methods like JSON.parse(JSON.stringify(object)).

How does the ‘this’ keyword work in JavaScript?

The ‘this’ keyword in JavaScript refers to the object that the function is a property of. The value of ‘this’ is determined at the time of function invocation. However, the behavior of ‘this’ can be confusing when it is used inside callbacks or event handlers, as it may not point to the object you expect.

How can I change the context of ‘this’ in a function?

You can change the context of ‘this’ in a function using methods like call(), apply(), or bind(). These methods allow you to invoke a function with a specified ‘this’ value and arguments.

What is a closure in JavaScript?

A closure in JavaScript is a function that has access to its own scope, the outer function’s scope, and the global scope. Closures are created every time a function is created, at function creation time. They are commonly used to create private variables or functions.

How does garbage collection work in JavaScript?

Garbage collection in JavaScript is an automatic memory management process. When an object is no longer reachable or needed, the JavaScript engine’s garbage collector frees up the memory occupied by that object. Reachability is determined by whether there is a reference to the object.

What is the difference between ‘==’ and ‘===’ in JavaScript?

The ‘==’ operator in JavaScript performs type coercion and then checks for equality. This means that it converts the operands to a common type before comparison. On the other hand, the ‘===’ operator checks for both value and type equality, without performing type coercion. Therefore, ‘===’ is often recommended for equality checks to avoid unexpected results due to type coercion.

JavaScript; Elm; Python Developer

The Difference Between Values and References in JavaScript

In JavaScript, you can pass by value and by reference.

The main difference between the two is that passing by value happens when assigning primitives while passing by reference when assigning objects.

Let's discuss values and references in more detail in this post.

1. Understanding primitive and objects

JavaScript provides 2 categories of data types: primitives and objects .

The primitives are numbers, booleans, strings, symbols, and special values null and undefined .

The second category is objects. Particularly the plain object, arrays, functions, and more — are all objects.

Saying it differently, anything that is not a primitive value is an object.

The simple rule of passing by value is that all primitive values in JavaScript are passed by value. Simple as that.

Passing by value means that every time you assign a value to a variable, a copy of that value is created. Every single time.

Let me show you how pass by value manifests itself.

Let's say you have 2 variables a and b :

The first statement let a = 1 defines a variable a initialized with the number 1 .

The second statement let b = a defines another variable b and initializes it with the value of a variable — which is passing by value. Simpler, a copy of the number 1 is assigned to b .

Later, b = b + 2 increases by 2 and becomes 3 . b variable changes, and this change doesn't affect the value of a .

3. References

The pass by reference, however, manifests itself differently.

When creating an object you're given a reference to that object. If 2 variables hold the same reference, then changing the object reflects in both variables.

Let's check the following code sample:

The first statement let x = [1] creates an array, defines a variable x , and initializes the variable with a reference to the created array.

Then let y = x defines a variable y , and initializes y with the reference stored in x variable. This is a pass by reference.

y.push(2) mutates the array by pushing an item 2 . Because x and y variables reference the same array, this change is reflected in both variables.

Note: for simplicity, I say that variables hold references to objects. But strictly saying variables in JavaScript hold values that are references to objects .

4. Comparing values and comparing references

Understanding the difference between values and references is important when you want to compare objects.

When using the strict comparison operator === , 2 variables having values are equal if they have the same value. All of the below comparisons are equal:

one and oneCopy have the same value 1 . The operator === evaluates to true as longs as both operands are 1 , no matter where the value is taken from: a literal 1 , variable's value, expression 2 - 1 .

But the comparison operator === works differently when comparing references. 2 references are equal only if they reference exactly the same object.

ar1 and ar2 hold references to different array instance:

ar1 and ar2 reference arrays of the same structure, however ar1 === ar2 evaluates to false because ar1 and ar2 reference different array objects.

The comparison operator returns true only when comparing references pointing to the same object: ar1 === ar11 or ar1 === ar1 .

In JavaScript primitive types are passed around as values: meaning that each time a value is assigned, a copy of that value is created.

On the other side objects (including plain objects, array, functions, class instances) are references. If you modify the object, then all variables that reference that object are going to see the change.

The comparison operator distinguishes comparing values and references. 2 variables holding references are equal only if they reference exactly the same object, but 2 variables holding values are equal if they simply have 2 same values no matter where the value originates: from a variable, literal, etc.

Often, however, you might want to compare objects by their structure rather than by reference. Check out the post How to Compare Objects in JavaScript .

Like the post? Please share!

About Dmitri Pavlutin

Popular posts.

How to Use Variables and Data Types in JavaScript – Explained With Code Examples

A variable is like a box where you can store data or a reference to data.

In this article, you will learn how to create and use variables. You'll also learn about the different data types in JavaScript and how to use them.

Let's get started!

Table of Contents

What is a variable example #1, what is a variable example #2, what is a variable example #3, how to declare a variable, variable assignment and initialization, how to call a variable, how to name variables, reserved words in javascript, rules for naming variables in javascript, popular variable naming conventions, variable data types.

Primitive Data Types

Reference types in JavaScript

When a child is born, they are given a name and throughout their life, they'll be referred to b y that name (unless the name gets changed at some point).

Have you seen anyone without a name? How were you able to call them? In an ideal world, everyone should have a name or a unique way we can refer to them. In JavaScript, every variable has a name.

Everyone must have a name or a way by which we can refer to them.

In a math equation, when we say x = 1 it means, "anywhere you see x , you should replace it with 1 ". In this case, x is a variable, while 1 is the value of it. That is: x points to 1 .

This means that without x , there will be no reference to 1 . There could be other occurrences of 1 in the equation but those will be different than the 1 which x was referring to. For example:

In the code snippet above, x refers to the value 1, and y It also refers to another value 1, but note that both values are distinct, just like you can have two different brands of bottled water even though they both contain water.

So, when we mention the variable name x , we get the value assigned to that variable.

A variable can be conceptualized as a container. The variable's name serves as its identifier, its value represents the container's contents, and its type specifies the nature of those contents.

A popular water brand here in Nigeria is known as "Eva".

Let's say you bought Eva water, took it home, and placed it amongst other water brands. You can easily say to someone, "Please get me the Eva water over there" and because of the name, it becomes easy for the person to identify and get exactly what you need.

Just as you can easily distinguish your Eva water from other water brands by its name, a variable is uniquely identified by its name within a program. While there may be multiple variables storing data, the specific name of a variable allows you to reference its contents precisely.

In JavaScript, values are assigned a name and anytime we need that value, we simply mention the name to which it was assigned. When the code executes, the name of that variable is replaced by the value it refers to.

In the case of the analogy above, the content of the bottle is water and the type is a liquid. But assuming we have a variable x which refers to the value 1 , the type of the variable is number .

In the code snippet above, number is printed to the console because variable x holds the value 1 which is a number.

Variables exist in our program to help us hold values and be able to refer to them whenever we need to . Anywhere a variable is mentioned, the value of that variable is what's being used for the computation at the time .

The program above declares/creates a variable called score .

In JavaScript, creating variables is that simple. The type of the variable is the type of the value stored in it. That is, if the variable score holds a value of 1 , the type for the score variable is number . So we can say, score is a number variable.

To create a variable, we have to do the following;

Declare the variable using one of these keywords: let , const or var .

Determine a name to call the variable and write it on the same line as the keyword used in step 1.

Notice that this time, we did not give it a value. We just simply created a container that will store something. For now, it is empty. Although it has no content at the moment, we'll surely provide content for it.

We can assign a value to a variable by using the assignment ( = ) operator—the variable name to the left of it, and the value to the right.

The code snipped above assigns 1 as the value of score (this is called variable assignment ).

When we combine variable declaration and assignment in one operation, it is called variable initialization .

As seen above, we declare the variable score , and immediately on the same line, assign the value 1 to it.

This means that we provided an initial value for the variable when it was created.

If you want to use a variable for an operation at any time in your program, you can simply just "call" it. To call a variable is the same as mentioning or using it.

In the code snippet above, the variable score was used in the line of code. Therefore, It will be replaced with its actual value 1 during the code execution. This means we'd have 1 + 1 executed, resulting in 2 .

In the next section, let's learn how to properly name our variables in other to ensure our codes are neat and readable.

Just like naming a human or pet or labeling an object, we always put in much thought to ensure that the name tells a story and gives an idea of how we feel about the role of that pet, human, or object.

JavaScript is somewhat liberal when it comes to how variable naming can be done and also how long it could be.

For example, pneumonoultramicroscopicsilicovolcanoconiosis is a valid variable name in JavaScript even though it is long.

It is generally a good practice to give meaningful names to variables and they should be of a reasonable length.

Let your variables be simple and contextual. For example: author , publishedDate , readTime , shouldCompress , and so on.

It should be self-explanatory. Just avoid cryptic names where possible.

Even though we can create variables as we wish, some names are already being used within JavaScript to mean something specific. These names cannot be used by a developer to identify a variable. They are called reserved words.

For instance, the keyword catch is used to properly handle an error and prevent it from crashing an application. Hence, you cannot call a variable catch in your program.

Below are all the reserved words in JavaScript:

arguments await break case catch class const continue debugger default delete do else enum eval export extends false finally for function if implements import in Infinity instanceof interface let NaN new null package private protected public return static super switch this throw true try typeof undefined var void while with yield

NOTE : You do not need to memorize these keywords. If you try to use them, you'll get an error and you'll learn to recognize and know them with experience.

Also, JavaScript has some rules that you must follow when naming variables as well as generally accepted conventions (best practices) that you should know about. Let's talk about them in the next section.

Reserved words cannot be used as variable names.

The first letter of your variable name should be an alphabet, underscore (_), or a dollar sign ($). You cannot use a number as the first character of your variable name. Even though other kinds of special characters are allowed to start a variable name, as a way of good practice and avoiding complexities at the start, you should just always start with a letter. Using an underscore or dollar sign is symbolic by convention and we'll learn what they mean in the future.

The rest of the variable name may contain anything but symbols, punctuations, and reserved characters (+, -, *, and so on).

Variable names are case-sensitive. This means Boy and boy will be treated as different variables in your program.

A variable name can be as long as is necessary for it to make sense. There is no limit imposed by the language.

Spaces are not allowed in variable names.

Variable names with multiple words should use camel casing. That is, the first word has to be all lowercase while the first letter of subsequent words should be uppercase: studentRegistrationNumber

Use uppercase letters for constant variables: const PI = 3.1432

If a constant variable is composed of multiple words, use snake casing (separation of words with an underscore): const PROGRAM_NAME = "Vacation planner"

If a variable is meant to be private, prefix its name with an underscore: let _memorySize = 2042 . Note : This is just to let the team (others working on the project) know that the author intends to use it as private. It doesn't prevent the value of the variable from being accessed (there are other ways to ensure this).

It is common practice to prefix Boolean variables with is or has : let isMarked = true .

In the next section, we'll learn about different data types and how to work with them.

Data type simply means "type of data" 😉.

The word "data" in this context means a piece of information. We'll use the word "value " sometimes to mean data and vice versa.

In JavaScript, we store values of different types in variables. These values have different attributes/properties and the type of data a variable holds will determine the operations you can perform with that variable.

For example, if you have water (value) stored in a container (variable), you can use the water (value) to wash or drink, but if what is stored in the container are candies, you can eat them but you won't be able to use them for washing.

If you have a variable that holds numbers, you can use them to perform arithmetic operations. If the variable holds a Boolean, you cannot use it for arithmetic operations but it can be used for logical operations.

The data types in JavaScript are categorized into two primary groups, namely;

Primitive : Number, String, Boolean, Undefined, Null, BigInt, Symbol

Reference : Object, Array, Function

In this article, we will not talk about Symbols and BigInt to avoid complexities. The goal is to do our best to explain fundamental concepts to beginners in the most simple way possible.

Let's consider primitive data types.

Primitive Da ta Types

Variables having these type of data are called primitives because they hold simple values. The word primitive can be translated to mean non-complex.

Primitive values are usually a single unit like 1, "cup", null, undefined, true, and so on. Let's briefly consider how these data types are used and what kind of operations you can perform with them.

• NUMBER: In JavaScript, all numbers are floating-point values. Whether they are numbers without decimal points like a whole number that can be negative, positive, zero, or values with a decimal point like 0.2, -0.5, 1, -2, 0. They are all of the number type.

This type of value can be used in arithmetic operations like multiplication, division, subtraction, addition, modulus, and so on.

To check the data type of a variable's value, use the typeof operator like this: typeof variableName . That is: typeof score1

In the code snippet above, score1 is a variable which holds a value of 2 , score2 holds a value of 5 , while the averageScore variable stores the result from dividing the sum of score1 and score2 by 2 , which evaluates to 3.5 .

Using the typeof operator on the score1 variable will return number .

Exercise : Copy the code in the snippet above and run it in your code editor to see how it works for you. You can play around with the values and use the typeof operator to check the variables' data type.

When performing arithmetic operations, you may run into other Number types like Infinity , -Infinity and NaN .

Infinity means something without any limit. One way to reach infinity is to divide a number by 0.

In the code above, we divided 12 by 0 and logged the result to the console which prints out Infinity .

Negative Infinity is used to denote a number that is less than any natural number. To arrive at negative infinity, copy the code in the snippet below and run it in your coding environment.

NaN means Not a Number. This will occur when you try to carry out an impossible mathematical operation as shown below:

The first line in the code above tries to divide a string by a number and the result is NaN .

You will not often reach infinity or -Infinity as a beginner doing basic/intermediate stuff, but it is something you should be aware of so that you do not get worked up when you see it occur in your code (this is something you do not want to cram in your head). NaN is will occur more often than the others. When you see it, just know something is wrong with the operation you are trying to perform.

• STRING: In JavaScript, a string is a collection of characters enclosed in quotes: "Cathy" .

The snippet below shows how a string can be used in a JavaScript program:

I am sure you noticed the + operator used with strings. When this occurs, the result is that the string on the right and that on the left will be joined together to become one. This is called string concatenation.

The code above is simply saying, "Create a variable called author and store the text "sleekCodes" as its value, create another variable publishedDate and store the text "14 August 2023" in it."

Then in line 4, we tell the JavaScript engine to log (print) the string "Written by: Sleekcodes " to the console. Line 5 also says log " Published on: 14 August 2023 " to the console.

Notice that in the code above, during execution, author gets replaced with the value "Sleekcodes" and publishedDate gets replaced with "14 August 2023" where used.

Strings are used to depict or convey data in text/alphabetic format. A string can be made up of zero or more characters. A string that has no character in it is called an empty string. For example: "" .

• BOOLEAN : When we need to represent data in two possible states only like true/false, on/of, or yes/no, we use Boolean values. The value of a Boolean variable is either true or false .

The code above will print the statement "Tola is qualified", because the value of the variable isQualified is true. That operation is a type of conditional operation. This is where Boolean values shine.

Exercise : Change the value of isQualified to be false and observe what happens.

• UNDEFINED : This is both a value and a data type. undefined is used to indicate that a variable has no defined value. For instance, when a variable is declared ( let age ), and you try to access its value, the result would be undefined .

In the code snippet above, because age isn't given any explicit value, the compiler assigns the value undefined to the variable by default.

Exercise : Use the typeof operator on the variable age and see what you get. Also, assign the value undefined to age and use the typeof operator on it again to see the result.

• NULL : Null is a value we can assign to a variable to indicate that it has no value. It is used to represent "empty" or "unknown".

As seen in the code snippet above, instead of letting the compiler assign undefined for us, we explicitly indicate that the variable has no value by assigning the value null to it.

This means age is empty or unknown.

People often get confused about the difference between undefined and null . One is the default value assigned to a variable without an explicit value, while the other ( null ) is a value assigned to a variable by the programmer deliberately to indicate that the variable is empty. As a rule of thumb, do not assign undefined to a variable, instead use null (the compiler auto-assigns undefined where needed).

Primitive data types have no complexity. They are plain and simple (a single value). This statement will make more sense when you read about how reference types work in the next section.

Consider the image below.

Part A above is the code you write, while Part B is what happens when the code runs. For primitive data types, the value is simply assigned to the variable (it is straightforward).

Primitive values are passed by value (they generate no reference). Do not worry about what this means yet because we'll explain in the next section.

Reference Types in JavaScript

Reference data types are data passed by "reference". A thorough understanding of this statement is crucial throughout your career as a JavaScript developer, so do well to pay close attention to the concept we are about to learn.

Consider the image below carefully.

In the image above, part A is the code you write, while part B is what happens "behind the scenes".

When you create a variable whose data type is in the reference category (objects, functions, arrays), instead of the value being directly assigned to the variable, a reference is generated for the value and that reference is what gets assigned to the variable .

The reference gets assigned to the variable, but it points to the actual value.

This means that when you try to use the variable anywhere, you are working with the reference to the actual value and anything done to the reference affects the actual value.

Think of it like a middleman between the actual value and the variable name.

Consider the example below:

You should notice that, changing name in staffInfo object (line 8), causes the name in studentInfo object to change too (as seen in the output of line 9).

In fact, both variables are pointing to the same value technically (see image below);

When we say that a variable is passed by reference , it means that anywhere that variable is used, you are interacting with a reference (that points) to its actual value.

So in the code snippet above, when studentInfo was assigned to staffInfo , we just made staffInfo to store the reference of the studentInfo variable, effectively saying that both staffInfo and studentInfo variables are pointing to the same value.

Therefore, if the reference generated for studentInfo is 000xx2 and it is true that during execution, variables are replaced by whatever they hold, then staffInfo = studentInfo would become staffInfo = 000xx2 during execution, while staffInfo.name would become 000xx2.name .

If we had written studentInfo.name , then during execution, it becomes 000xx2.name , it should be clear now that both studentInfo and staffInfo holds references to one value. They are like different roads to one destination.

There are three main reference data types that you'll mostly come across in your journey as a JavaScript developer: Object, Array, and Function. Let's look into them one after the other.

• OBJECT : An object is a data structure used to store complex data in key/value pairs. The variable created in the previous session has an object type like this:

You can see that it isn't primitive (simple). Unlike primitive types with just simple values, an object can be used to store different information which can be made up of even primitive and reference types.

Objects store data in key/value pairs like so: {key: value}

In the code snippet above, name is key, while "John Doe" is its value. Also, age is key, while 205 is its value.

If you notice, both name and age have primitive values (string and number).

To access the value of an object, we use the object name, dot (.) notation, and the key whose value we want to access. For example: objectName.key .

Objects can also contain nested objects like so:

In the above example, the studentInfo object has a nested object called beneficiary . beneficiary is a key whose value is an object (reference type). Objects can still hold arrays and functions too.

Accessing the value associated with a key in an object within another object (nested object) is natural. We simply use dot notation. Like so: parentObjectName.nestedObjectName.key

For example, to access the name of the beneficiary in studentInfo object above, we simply write studentInfo.beneficiary.name .

This is not all that you need to know about objects but it is a very sound way to start.

• ARRAY : An array is a kind of object but stores data using automatically assigned indexes instead of keys.

An array is created by writing a comma-separated list of values enclosed with square brackets: [0, 1, 2, 3, "Tosin", "Mike", {name: "Abel Joe", age: 250}]

If you pay close attention to the values used in the array above, you'll notice that they are of different data types. Yes, arrays also allow you to store values of different types in one place but this is strongly discouraged (you shouldn't do it at all). The values in an array should all be of the same type .

Example of a proper array: let scores = [1, 3, 5, 6, 9, 12]

To access a value in an array, we simply specify the array name, followed by a square bracket [] without any space between the name and the bracket. Then inside the square bracket, provide the index of the value you wish to access. That is: arrayName[index] .

What's an index and how do we know what index refers to the value we want to access?

An index is simply a number automatically assigned to an array value . You can think of it as an address for values in the array. Arrays are 0 indexed (meaning they start counting from zero) .

To determine the index of the value you wish to access, start counting from the start of the array and your count should start from 0.

Consider the image below;

To access the value 80 in the scores array depicted in the image above, we simply write scores[3]

There is a lot you can do with arrays as a JavaScript developer. For now, this is a simple introduction to the array data type.

• FUNCTION : A function is a different kind of variable and it's declared differently (using the function keyword instead of let , const or var ). It is a construct used to carry out a specific task.

For example, if you need to add two numbers together multiple times within your code, it's best practice to create a dedicated function for this task. By reusing this function, you avoid redundant code and improve code maintainability compared to repeatedly writing the addition logic. Wait!!! You are not lost. The example below will confirm this 😊

Scenario 1 (without function):

Scenario 2 (with function):

You will agree that, scenario 2 contains less code, looks neater, and even feels more natural.

Functions allow us write helpers that we can call to get a specific job done for us any time we want. We just have to tell it how to do the job once and call it anytime we need it to do that job (passing in any information required for the task as arguments) and it delivers.

Function Syntax:

To write a function, we use the function keyword, followed by the name of the function: functionName , a pair of brackets () , and a pair of curly braces {} .

There are a few things/conventions you should have in mind when writing functions:

Function names should follow the same naming rules as variables.

Function names should be verbs (to depict an action).

The code logic for the actual task should be written between the opening { and closing } curly braces.

If there are values required to carry out the task, they should be passed into the function as arguments. In this case, during the function declaration, parameters should be stated between the opening ( and closing ) brackets in a comma-separated fashion. That is: function addNumbers(num1, num2)... .

If no data is required to carry out the task, then the opening ( and closing ) brackets should be left empty: function sayHi()... .

A parameter is a variable defined between the opening ( and closing ) of a function during its declaration: function doSomething (param1, param2) {...} .

An argument is the value passed into the function during its invocation/call: doSomething(1, 2)

As seen above, to call/invoke a function, write the function name, followed by an opening and a closing bracket (without any whitespace). Required arguments should be provided between the opening and closing brackets (if any).

To drive this concept home, let's create a function to multiply two digits:

It's as simple as that.

Having done that, let's call/invoke the function.

Notice that while creating the function, we declared two parameters: num1 and num2 . When calling the function, we assigned values to the two arguments: 1 and 2.

return keyword

Functions may return values or not.

If a function contains a return statement, like the multiplyNumbers function, then it will return a value if everything goes well. If there is no return statement for the function, it will return undefined .

If we invoke sayHi , it would log the text Hi to the console and it will also return undefined .

Remember that functions are like helpers, when you send a helper to carry out an assignment, you may require them to give you feedback (the result of the task they carried out) or you may not need feedback.

If you need feedback, add a return statement about what feedback you need. Otherwise, do not add a return statement to the function.

There is still a lot to learn about every data type we have highlighted in this article so take your time to practice these basics and when you feel comfortable enough using them, you'll see the need to dive deeper.

Variables are "pointers" to values. When you mention (use) a variable anywhere in your code, the variable identifier (name) is replaced with the value it points to. It's just like calling someone's name. The name doesn't respond, the person (value) behind the name is what you hope to get as a response.

By way of retention, do not try to cram all these rules and conventions. Feel free to refer back to this article when programming and in a short amount of time, you'll be used to all of them and you won't need to refer to any article ever again to name your variables properly.

If you should have anything in mind, remember to start variables with a lowercase letter if the variable is made of multiple words, subsequent words should start with uppercase letters. That is: age , dateOfBirth .

To create a variable, use the keyword let , const , or var , followed by the variable name. If you wish to initialize the variable, then on the same line before the semi-colon, input the assignment operator and variable value after it.

For example: let score; or let score = 3; (if you wish to initialize during declaration).

If you wish to use a variable, just mention its name and the value will be used during the execution of your code.

This article also showed you the different data types in JavaScript and how to use them.

Did this post help? Let’s keep the conversation going. Feel free to share your thoughts or questions on Twitter (x) or LinkedIn. You can find me on Twitter (x) @asoluka_tee and Tochukwu Austin Asoluka on LinkedIn.

Self taught FullStack Web Developer. I'm in love with JavaScript.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

DEV Community

Posted on Oct 9, 2023

Understanding Reference vs. Value in JavaScript

JavaScript is a versatile and powerful programming language used for both front-end and back-end web development. One fundamental concept that every JavaScript developer should grasp is the difference between reference and value when working with variables. In this article, we will explore this distinction, its implications, and provide plenty of code examples to make it crystal clear.

What's the Difference?

In JavaScript, variables can hold either primitive data types (such as numbers, strings, booleans, etc.) or reference data types (like objects and arrays). The key difference between reference and value lies in how they are stored and manipulated in memory.

Value Types (Primitive Types)

Value types store the actual value in the variable. When you assign a value type variable to another variable or pass it as an argument to a function, a copy of the value is created. This means that changes to the new variable won't affect the original variable. Here are some examples of value types:

Reference Types

Reference types store a reference to the actual object in the variable. When you assign a reference type variable to another variable or pass it as an argument to a function, you're passing a reference to the same object in memory. This means changes to one variable will affect the other. Here are some examples of reference types:

Pass by Value vs. Pass by Reference

Pass by Value (Primitive Types)

When you pass a primitive type as an argument to a function, you're passing a copy of the value. Any changes made to the parameter inside the function do not affect the original value outside the function.

In this example, the modifyNumber function doesn't affect the originalNum variable because it's a copy of the value.

Pass by Reference (Reference Types)

When you pass a reference type as an argument to a function, you're passing a reference to the original object. Any changes made to the object inside the function will also affect the original object outside the function.

In this example, the modifyArray function modifies the original array because it receives a reference to it.

Copying Values vs. Cloning Objects

Copying values and cloning objects are two common operations in JavaScript, and understanding reference vs. value is essential here:j

Copying a primitive type creates a new variable with the same value, while cloning an object creates a new object with the same properties and values.

In JavaScript, understanding the distinction between reference and value is crucial for effective programming. It affects how data is shared, modified, and manipulated in your code. Remember: Value types store the actual value, and changes to one variable won't affect others. Reference types store a reference to the object, and changes to one variable will affect others referencing the same object.

Mastering this concept will help you write more predictable and bug-free JavaScript code in your projects. Happy coding!

Top comments (2)

Templates let you quickly answer FAQs or store snippets for re-use.

• Education computer science
• Work Software Engineer
• Joined Nov 9, 2021

The example you've provided has a mistake in the expected output. In JavaScript, when you assign an object to another variable, both variables reference the same object in memory. So, modifying the object through one variable will reflect in the other. `let person1 = { name: "Shameel", age: 29 }; let person2 = person1; person2.name = "Sam";

console.log(person1); // Output: { name: "Sam", age: 29 } console.log(person2); // Output: { name: "Sam", age: 29 }`

• Education B.Sc. in Software Engineering
• Joined Jan 24, 2024

great article but the example of objects has a little bug though ;) let person1 = { name: "Shameel", age: 29}; let person2 = person1; person2.name = "Sam"; console.log(person1); // Output: { name: "Shameel", age: 29} console.log(person2); // Output: { name: "Sam", age: 29}

but both names will be Sam on the console :))

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Mastering Computer Systems: A Comprehensive Collection of Free Programming Resources

GetVM - Sep 24

PLANSEARCH: Improving reasoning for LLMs

Christian Engel - Sep 24

Alex Gulakov Blog - AIResearch.js.org: Search Extract Vectorize AI Answers

vtempest - Sep 24

Deploy Express JS container image on Lambda AWS

Janith Disanayake - Sep 24

We're a place where coders share, stay up-to-date and grow their careers.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Object.assign()

The Object.assign() static method copies all enumerable own properties from one or more source objects to a target object . It returns the modified target object.

The target object — what to apply the sources' properties to, which is returned after it is modified.

The source object(s) — objects containing the properties you want to apply.

Return value

The target object.

Description

Properties in the target object are overwritten by properties in the sources if they have the same key . Later sources' properties overwrite earlier ones.

The Object.assign() method only copies enumerable and own properties from a source object to a target object. It uses [[Get]] on the source and [[Set]] on the target, so it will invoke getters and setters . Therefore it assigns properties, versus copying or defining new properties. This may make it unsuitable for merging new properties into a prototype if the merge sources contain getters.

For copying property definitions (including their enumerability) into prototypes, use Object.getOwnPropertyDescriptor() and Object.defineProperty() instead.

Both String and Symbol properties are copied.

In case of an error, for example if a property is non-writable, a TypeError is raised, and the target object is changed if any properties are added before the error is raised.

Note: Object.assign() does not throw on null or undefined sources.

Cloning an object

Warning for deep clone.

For deep cloning , we need to use alternatives like structuredClone() , because Object.assign() copies property values.

If the source value is a reference to an object, it only copies the reference value.

Merging objects

Merging objects with same properties.

The properties are overwritten by other objects that have the same properties later in the parameters order.

Copying symbol-typed properties

Properties on the prototype chain and non-enumerable properties cannot be copied, primitives will be wrapped to objects, exceptions will interrupt the ongoing copying task, copying accessors, specifications.

Browser compatibility

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Polyfill of Object.assign in core-js
• Object.defineProperties()
• Enumerability and ownership of properties
• Spread in object literals

• DSA with JS - Self Paced
• JS Tutorial
• JS Exercise
• JS Interview Questions
• JS Operator
• JS Projects
• JS Examples
• JS Free JS Course
• JS A to Z Guide
• JS Formatter

Reference and Copy Variables in JavaScript

In this article, we will talk about pass-by-value and pass-by-reference in JavaScript. JavaScript always passes by value, but in an array or object, the value is a reference to it, so you can ‘change’ the data. JavaScript has 5 primitive data types that are passed by value, they are Boolean , NULL , undefined , String , and Number . It has 3 non-primitive data types that are passed by reference, they are Array , Function , and Object . In non-primitive data types, we have some challenges for copying data. As we know objects are created at some place in the computer’s memory. When we declare any property it creates a space in memory.

Example: The address is a data type that is passed by value just like a number, string, and address points to the location in memory.

Pass by value in case of number.

Pass by value in case of string

Pass by reference in case of array

Now if you change the data from “team” array it also affects the “players” array

It’s an array reference, not an array copy. They both point to the same array. We have 4 ways to do it. By using these methods the primary array will not change.

Pass by reference in Object: The same point goes for objects, it also affects the original object.

There are two ways to do it.

One more thing you need to think about what will happen in the case of an equal and equality operator. When we use these operators on reference type variables they check the reference. If the property has a reference to the same item then the comparison will give output as “true”, otherwise it will return “false.”

This can be corrected by stringifying the array.

We can change the name property of object person, but we are unable to reset the reference person since it has been marked as const.

But we can correct this thing by stringifying the array.

Pass by reference in case of functions: If we pass the object in the function, it will change both the objects.

We can resolve this problem by parsing and stringifying the object.

Please Login to comment...

Similar reads.

• Web Technologies
• JavaScript-Misc
• How to Underline in Discord
• How to Block Someone on Discord
• How to Report Someone on Discord
• How to add Bots to Discord Servers
• GeeksforGeeks Practice - Leading Online Coding Platform

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

JS Tutorial

Js versions, js functions, js html dom, js browser bom, js web apis, js vs jquery, js graphics, js examples, js references, javascript assignment, javascript assignment operators.

Assignment operators assign values to JavaScript variables.

Shift Assignment Operators

Bitwise Assignment Operators

Logical Assignment Operators

The = Operator

The Simple Assignment Operator assigns a value to a variable.

Simple Assignment Examples

The += operator.

The Addition Assignment Operator adds a value to a variable.

Addition Assignment Examples

The -= operator.

The Subtraction Assignment Operator subtracts a value from a variable.

Subtraction Assignment Example

The *= operator.

The Multiplication Assignment Operator multiplies a variable.

Multiplication Assignment Example

The **= operator.

The Exponentiation Assignment Operator raises a variable to the power of the operand.

Exponentiation Assignment Example

The /= operator.

The Division Assignment Operator divides a variable.

Division Assignment Example

The %= operator.

The Remainder Assignment Operator assigns a remainder to a variable.

Remainder Assignment Example

Advertisement

The <<= Operator

The Left Shift Assignment Operator left shifts a variable.

Left Shift Assignment Example

The >>= operator.

The Right Shift Assignment Operator right shifts a variable (signed).

Right Shift Assignment Example

The >>>= operator.

The Unsigned Right Shift Assignment Operator right shifts a variable (unsigned).

Unsigned Right Shift Assignment Example

The &= operator.

The Bitwise AND Assignment Operator does a bitwise AND operation on two operands and assigns the result to the the variable.

Bitwise AND Assignment Example

The |= operator.

The Bitwise OR Assignment Operator does a bitwise OR operation on two operands and assigns the result to the variable.

Bitwise OR Assignment Example

The ^= operator.

The Bitwise XOR Assignment Operator does a bitwise XOR operation on two operands and assigns the result to the variable.

Bitwise XOR Assignment Example

The &&= operator.

The Logical AND assignment operator is used between two values.

If the first value is true, the second value is assigned.

Logical AND Assignment Example

The &&= operator is an ES2020 feature .

The ||= Operator

The Logical OR assignment operator is used between two values.

If the first value is false, the second value is assigned.

Logical OR Assignment Example

The ||= operator is an ES2020 feature .

The ??= Operator

The Nullish coalescing assignment operator is used between two values.

If the first value is undefined or null, the second value is assigned.

Nullish Coalescing Assignment Example

The ??= operator is an ES2020 feature .

Test Yourself With Exercises

Use the correct assignment operator that will result in x being 15 (same as x = x + y ).

Start the Exercise

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Javascript - assign function to variable (reference/value)

I am trying to change the definition of a function:

This results in the variable a keeping it's original assignment i.e. the function producing alert('a') .

Is there any way of passing around a reference to a javascript function so that I can alter it later?

• 3 No, you really can't do this with a simple variable. You can keep a function reference as an object property, and then manipulate that property value. –  Pointy Commented Feb 19, 2014 at 17:15
• @RocketHazmat, that's not what he wants. He wants to overwrite A with B on the third line. –  Prisoner Commented Feb 19, 2014 at 17:16
• I think prototype is good choice for this, is not? –  Suman Bogati Commented Feb 19, 2014 at 17:16
• @RocketHazmat Yes [limit] –  Serge K. Commented Feb 19, 2014 at 17:18
• @NathanP.: Ah, I see now. :) –  gen_Eric Commented Feb 19, 2014 at 17:19

3 Answers 3

Would you expect the value of a to change after the following snippet? Snippet in question:

No, right? So why would you expect reassigning b to also affect a ?

After line 1 , you have a pointing to a function instance:

After line 2 , you have a new variable b , also pointing to the same function instance. So now you have two variables, both pointing to the same instance:

After line 3 , you have reassigned b to something else (a new function), but a is still pointing to the original function:

You can do what you want by doing something like this:

Now calling a() or b() will alert the string b .

• According to you 'a is still pointing to the original function:' then why last line alerts 20? –  Suman Bogati Commented Feb 19, 2014 at 17:26
• It shouldn't be alerting 20 anywhere; the code is only alerting the string literals a or b . –  Vivin Paliath Commented Feb 19, 2014 at 17:28
• Ok, I understand. But is there any way to accomplish what I want, more than one variable pointing to the same function, In such a way that when I update one, the other changes? –  Marcus Commented Feb 19, 2014 at 17:28
• @Marcus Yes, you can do this by wrapping the function in another and then changing the inner function. I will post some code. –  Vivin Paliath Commented Feb 19, 2014 at 17:29
• @VivinPaliath I was with your exmaple not with OP. –  Suman Bogati Commented Feb 19, 2014 at 17:29

There is no way to do this. Javascript does not have "pointers". It has reference values , and as such, a is a reference to the value of a, not to the memory location of a.

So, for this set of instructions

this is the progression

You could produce the result you're looking for like this:

This code would produce the desired effect you're looking for because they'll both call fn() and you're changing the common underlying reference.

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged javascript or ask your own question .

• The Overflow Blog
• Where developers feel AI coding tools are working—and where they’re missing...
• He sold his first company for billions. Now he’s building a better developer...
• Featured on Meta
• User activation: Learnings and opportunities
• Preventing unauthorized automated access to the network
• Should low-scoring meta questions no longer be hidden on the Meta.SO home...
• Announcing the new Staging Ground Reviewer Stats Widget

Hot Network Questions

• How is the universe able to run physics so smoothly?
• Lovecraftian (but not written by Lovecraft himself) horror story featuring a body of water that glowed blue at night due to the creatures in it
• Is the Earth still capable of massive volcanism, like the kind that caused the formation of the Siberian Traps?
• Why would an escrow/title company not accept ACH payments?
• Is there a faster way to find the positions of specific elements in a very large list?
• What is the mechanical equivalent of an electronic AND gate?
• How do Cultivator Colossus and bounce lands interact?
• Were Soviet doctors and nurses actually as callous as "Voices from Chernobyl" portrays in the prolog?
• What is the simplest formula for calculating the circumference of a circle?
• Are there individual protons and neutrons in a nucleus?
• Do "always prepared" Spells cost spell slots?
• Musicians wearing Headphones
• Does a ball fit in a pipe if they are exactly the same diameter?
• The answer is not single
• Secure flag cookies are sent on a non-secure connection
• How can moving observer explain non-simultaneity?
• Does the old type of rubber hose Dunlop valves haves any pros compared to the modern ones without rubber?
• Measurement and comparison of logical observable parity with stabilizer parity in stim
• What should you list as location in job application?
• How do I link a heading containing spaces in Markdown?
• How to map a list of elements to a list of positions of a matrix
• What kind of Fibonacci subword at this offset?
• What causes, and how to avoid, finger numbness?
• How would I calculate the gravity at a given depth on a planet with two distinct layers with different densities?