Value vs Reference
This article will explore variables and types, both primitive and complex, with the goal of solidifying our understanding of JavaScript values and references.
Variables and Types
JavaScript is loosely typed, which means that variables can store values of any type.
What is the difference between a variable and a value?
A variable is a container for a value. Further, values have types, variables do not.
The value 5
has an intrinsic (i.e. innate) type of 'Number'
and the value of '5'
has an intrinsic type of 'String'
. This cannot be changed. The assignment of the variable can be changed, but the value itself cannot.
Note: typeof
returns the type of the underlying value, which the variable is assigned to. See MDN for further details.
So now that we have a better sense of variables and values, what are the different value types we can have?
JavaScript Types:
Primitive
- String
- Number
- Boolean
- Null
- Undefined
- Symbol
Complex
- Object
What about Arrays
and Functions
? Well, those are both just Objects too!
What is the difference between a value and a reference?
OK, now we get to the core of it. As we have seen, there are two categories of types: primitives and complex (i.e. Object).
We cannot change the value of a primitive, but we can change the value of a reference.
Examples
Primitives: when working with primitives, we work directly with the value
Reference (i.e. Object): when working with objects, we work on a reference to the value
Pass by value vs Pass by reference
You can either pass a specific value to a function (e.g. a primitive such as a Boolean
or Number
) or you can pass in a reference (e.g. an Object
).
Passing values
Changing a value passed into a function, will not change the value of the original variable.
Passing references
Passing in and changing the value of a complex type (i.e. Object) will modify all variables that point to that value.
Going further, this can sometimes have unexpected consequences if we want to copy an object.
As we see, copying a reference did not give us a unique object. Instead object a
and object b
point to the same place in memory. To obtain a unique copy of an object, we would have to copy out each property individually.
Note: this can get very complicated with nested objects, so to avoid deep recursion, we often perform a “shallow copy” and copy the first level of an object.
Conclusion
- JavasScript has seven data types: 6 primitive types and 1 complex type
Arrays
andFunctions
are of typeObject
, and therefore are treated as references
- Values have types, variables do not
- When accessing a primitive type, we work directly with the value
- When accessing an object (i.e. complex type), we work on a reference to the value
- When passing values into functions, Objects are passed by reference, while primitives are passed in by copying the value.