In this article, I would like to introduce to you the concept of Variable and its operations in Javascript
1. Basics
In Javascript , variable are stored by two types of values: Primitive Value and Reference Value
Primitive Value (6): null , undefined , number , string , boolean , symbol
Reference Value (1): object
Looking here, you will see questions, NaN and Array . These two guys often meet but do not see any classification.
Primitive Value : NaN has a type of number
Refernce Value : array has an object type
You can verify by using the typeof statement
1 2 3 | <span class="token keyword">typeof</span> <span class="token number">NaN</span> <span class="token comment">// "number"</span> <span class="token keyword">typeof</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token comment">// "object"</span> |
2. Copying Primitive Value
When you specify a variable a stores Primitive Value into a variable b . Value created in variable a will create and copy to variable b
See the following example:
- Define a
variable aand initialize its value to10
1 2 | <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">10</span> |
- Define a
variable band initialize its value bya
1 2 | <span class="token keyword">let</span> b <span class="token operator">=</span> a |
- Specify
varaible bwith a different value
1 2 | <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">20</span> |
variable a and variable b not related to each other. So when you change the value of one guy, the other guy won’t change
1 2 3 | a <span class="token operator">=</span> <span class="token number">30</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> b <span class="token punctuation">)</span> <span class="token comment">// 20</span> |
3. Copying reference values
When you specify a Reference value from a variable to a variable another value stored in the variable is copied to the location of new developments
The difference is that the value is stored in both variable with the same address. Both varaible now refer to the same object
See the following example:
Declare variable x hold value as an object with name attribute:
1 2 3 4 | <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'thai 1'</span> <span class="token punctuation">}</span> |
Declare the variable y = x
1 2 | <span class="token keyword">let</span> y <span class="token operator">=</span> x |
Now both x and y refer to the same object Next we change the value of x , y will be changed accordingly
1 2 3 4 5 6 | x <span class="token punctuation">.</span> name <span class="token operator">=</span> <span class="token string">'thai 1'</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> x <span class="token punctuation">)</span> <span class="token comment">// {name: 'thai 1'}</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> y <span class="token punctuation">)</span> <span class="token comment">// {name: 'thai 1'}</span> |
4. Some common examples
1. Reference Value in the case of parameters passed to the function
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'thai'</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">editName</span> <span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> data <span class="token punctuation">.</span> name <span class="token operator">=</span> <span class="token string">"thai 1"</span> <span class="token punctuation">}</span> <span class="token function">editName</span> <span class="token punctuation">(</span> user <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> user <span class="token punctuation">)</span> <span class="token comment">// {name: 'thai'}</span> |
In this case, if:
Reference Valueis a parameter passed to thefunction- In the
functionwe want to transform thedata
=> Here you need to consider when transforming the data itself as it changes the original value
2. How to overcome guy on how?
If you want to fix this guy. You use some functions to create new data. Let’s call it clonedData. We can use Object.assign , Spread Operation (ES6)
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'thai'</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">editName</span> <span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> clonedData <span class="token operator">=</span> Object <span class="token punctuation">.</span> <span class="token function">assign</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token comment">// const clonedData = {...data}</span> clonedData <span class="token punctuation">.</span> name <span class="token operator">=</span> <span class="token string">"thai 1"</span> <span class="token punctuation">}</span> <span class="token function">editName</span> <span class="token punctuation">(</span> user <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> user <span class="token punctuation">)</span> <span class="token comment">// {name: 'thai'}</span> |
For Array you can refer here: https://futurestud.io/tutorials/clone-copy-an-array-in-javascript-and-node-js