Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Primitive Types & Reference Types in JavaScript

Primitive Types & Reference Types in JavaScript

An explanation of JavaScript's pass-by-value, which is unlike pass-by-reference from other languages.

Facts

  • JavaScript has 2 kinds of variable types: primitive and reference.
  • A fixed amount of memory is reserved after creation of every variable.
  • When a variable is copied, it's in-memory value is copied.
  • Passing a variable to a function via a call also creates a copy of that variable.

Primitive Types

The in-memory value of a primitive type is it's actual value (e.g. boolean true, number 42). A primitive type can be stored in the fixed amount of memory available.

  • null
  • undefined
  • Boolean
  • Number
  • String

Primitive types are also known as: scalar types or simple types.

Reference Types

A reference type can contain other values. Since the contents of a reference type can not fit in the fixed amount of memory available for a variable, the in-memory value of a reference type is the reference itself (a memory address).

  • Array
  • Object
  • Function

Reference types are also known as: complex types or container types.

Code Examples

Copying a primitive:

var a = 13         // assign `13` to `a`
var b = a          // copy the value of `a` to `b`
b = 37             // assign `37` to `b`
console.log(a)     // => 13

The original was not changed, we can only change the copy.

Copying a reference:

var a = { c: 13 }  // assign the reference of a new object to `a`
var b = a          // copy the reference of the object inside `a` to new variable `b`
b.c = 37           // modify the contents of the object `b` refers to
console.log(a)     // => { c: 37 }

The original was also changed, since the reference got copied.

@katherinedragieva
Copy link

katherinedragieva commented Nov 17, 2018

Very helpful! Thanks 👍

@basantkumarpogeyan
Copy link

basantkumarpogeyan commented Dec 20, 2018

Excellent explanation

@EugeCos
Copy link

EugeCos commented Feb 22, 2019

Great explanation, thank you.
Wish I knew this before I spent a few hours trying to figure out why my object changes when I change its copy.

@bakhti-uzb
Copy link

bakhti-uzb commented Apr 4, 2019

Thanks , simple and clear explanation .

@sobhardwaj
Copy link

sobhardwaj commented Jun 27, 2019

wonderful article it is....thanks dude

@AlisonYoon
Copy link

AlisonYoon commented Aug 23, 2019

very clear, thanks!

@jessonjs
Copy link

jessonjs commented Sep 15, 2019

Concise, thanks!

@Julitree
Copy link

Julitree commented Nov 27, 2019

Clear to understand, Thanks!

@AhmadIbrahiim
Copy link

AhmadIbrahiim commented Dec 4, 2019

Thank you

@alfasin
Copy link

alfasin commented Jan 7, 2020

Thanks!

null is technically an object, try: typeof null
Arrays are also of type object.

What about Symbols?

@mshuber1981
Copy link

mshuber1981 commented Feb 12, 2020

Thank you, I was having trouble understanding this concept and this explanation really helped.

@SpyrosKo
Copy link

SpyrosKo commented Apr 29, 2020

I always have to refresh on what the types are and how they work and this was clear and easy to understand. Thank you.

@msindelic
Copy link

msindelic commented Oct 7, 2020

Great explanation.Thank you 👍👏

@babak-bekhrad
Copy link

babak-bekhrad commented Dec 13, 2020

Thank, It was so clear 👍

@shahalizada
Copy link

shahalizada commented Feb 8, 2021

VERY HELPFUL, THANK YOU...

@taesubyun
Copy link

taesubyun commented Mar 10, 2021

That's a good explanation! Thank you!

@JenniMont
Copy link

JenniMont commented Apr 15, 2021

GOod Explanation!! ;)

@berkeJr
Copy link

berkeJr commented Dec 5, 2021

That's so resourceful, thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment