JavaScript - Reference vs Primitive Values/ Types
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about unexpected mutation, shared references and copying objects or arrays in JavaScript, Vue and React.
Recommended by 4 people across 4 different months, 2018 to 2021.
What it is
A 21-minute Academind tutorial by Maximilian Schwarzmuller on the difference between primitive values and reference values in JavaScript. It covers how each is stored (stack vs heap), what happens when you copy them, and how to clone objects and arrays with Object.assign(), slice() and Lodash cloneDeep.
What people said
Strong rec Roland · 2018-10 · Stack Overflow · on “Prevent prop from overwriting the data”
@Arman Charan is right on his answer. Object and arrays are not primitive types but reference. There is an awesome video explanation here => JavaScript - Reference vs Primitive Values/ Types [this video] So for reference types you first have to clone it on another variable and later modify this variable without the changes affecting the original data. However for nested arrays and objects in high level the spead and Array.from will not work. If you are using Lodash [LINK] you can use _.cloneDeep() to clone an array or an object safely. I like functional programming and I use Lodash which I strongly recommend. So you can do: let original_reference_type = [{ id:1 }, { id: 2 }] let clone_original =
Recommends naffetS · 2019-07 · Stack Overflow · on “Vue computed property changes the data object”
let terms = this.terms; This does not copy an array, it just holds a reference to this.terms . The reason is because JS objects and arrays are reference types. This is a helpful video: [this video] Anyways, copy the array using this.terms.slice() . If it's an object, you can use {...this.terms} .
Recommends Eugene Pro · 2020-05 · Stack Overflow · on “JavaScript Primitives and Stack”
[this video] This is what i'm referring to. The video explains how primitives get 'pushed' into a part of memory called "stack". However, it does not explain what happens when we change the value of a primitive.
Recommends user1063287 · 2021-11 · Stack Overflow · on “Why can I change a constant object in JavaScript?”
here is another beginner-friendly explanation of how primitive types and objects are saved in memory and their subsequently different behaviour (from 2017 so slightly dated, but a pretty good introduction to the topic): [this video]
Cites Daniel Cruz · 2020-10 · Stack Overflow · on “Why do new objects are created on each React render?”
Ok, I think I got the answer, but I would like to be corrected if I'm wrong: So for this to make sense we need to understand 3 things: Garbage collection Primitive vs References How equality comparisons work First, to address my previous statement: I want to know why this is the behavior of objects (array, functions, objects) declared inside functions as opposed to values(strings, numbers, booleans, etc.) that seem to maintain their place in memory and aren't being created from scratch on every function call. Both primitives and references are created from scratch on every function call due to garbage collection, for more info check [LINK] Primitives are saved into the stack and objects are