Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • Mutable and Immutable Data Types in JavaScript
  • Mutable and Immutable Data Types in Computer Memory
  • Additional Resources
  1. 0: Foundations
  2. 0.4: JavaScript

0.4.3: Reference vs Value

Learning Objectives

  1. Difference between mutable and immutable data types

  2. Mutable data types are passed by reference (address) and immutable data types passed by value

  3. How to make an independent copy of a mutable data type

Introduction

What will array2.length return in the final line?

var array1 = [1, 2, 3];
var array2 = array1;
array1.pop(); // Remove the last element from array1
console.log(array2.length);

array2.length above returns 2. We assigned array2 to array1 and arrays are mutable data types, hence array2 references the same data as array1. Mutable data types are passed by reference and not by value.

If we wanted to copy array1 into an independent array2 variable, we could run the following code instead.

var array1 = [1, 2, 3];
// "..." syntax in front of an array is called the spread operator
// The spread operator copies all elements in an array
// The surrounding [] encapsulates copies of array1's elements into a new array
var array2 = [...array1];
array1.pop(); // Remove the last element from array1
console.log(array2.length);

Mutable and Immutable Data Types in JavaScript

Mutable data types are passed by reference. To make a copy we would use the JavaScript spread operator or a loop, not direct assignment to a new variable.

Immutable data types (aka primitive values) are passed by value. To make a copy we would assign the old variable to a new one, and any changes to either variable would not affect the other.

Data type
Immutable / Mutable

Boolean

Immutable

Number

Immutable

String

Immutable

Array

Mutable

Object

Mutable

Function

Mutable

Mutable and Immutable Data Types in Computer Memory

Computers store data broadly in 2 places: memory (RAM) and drive (SSD or disk). Memory is smaller, faster storage and drive is larger, slower storage. Apps run in memory and persistent data is typically stored in drive.

JavaScript references mutable data types with memory addresses because we do not know beforehand how large these data structures will be. JS can store the value of immutable data types directly without a memory address because immutable data types have a fixed size.

Consider the 2 examples at the start of this submodule. The following diagrams illustrate conceptually what happens in memory after each line of code.

Example 1:

var array1 = [1, 2, 3];
var array2 = array1;
array1.pop();

Example 2:

var array1 = [1, 2, 3];
// "..." syntax in front of an array is called the spread operator
// The spread operator copies all elements in an array
// The surrounding [] encapsulates copies of array1's elements into a new array
var array2 = [...array1];
array1.pop();

Additional Resources

Previous0.4.2: Common SyntaxNext0.4.4: Classes

explains reference vs value with a live coding example.

explains in more detail how arrays are stored in memory.

🪨
This video
This video
array2 references the same data structure as array1
array2 references a data structure independent from array1