Trong bài viết này, mình xin giới thiệu tới bạn đọc Khái niệm về Variable và các hoạt động của nó ở trong Javascript
1. Khái niệm cơ bản
Trong Javascript, variable được lưu trữ bởi 2 loại giá trị: Primitive Value và Reference Value
Primitive Value (6) : null, undefined, number, string, boolean, symbol
Reference Value (1): object
Nhìn vào đây thì các bạn sẽ thấy thắc mắc, NaN và Array. Hai thằng này thường gặp những lại không thấy xếp vào loại nào.
Primitive Value: NaN có kiểu là number
Refernce Value : array có kiểu là object
Các bạn có thể kiểm chứng bằng việc dùng câu lệnh typeof
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
Khi bạn chỉ định một variable a lưu trữ Primitive Value vào một variable b. Value được tạo ở variable a sẽ tạo và copy vào variable b
Hay xem ví dụ sau:
- Khái báo một
variable avà khởi tạo giá trị cho nó là10
1 2 | <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">10</span> |
- Khái báo một
variable bvà khởi tạo giá trị cho nó là bằnga
1 2 | <span class="token keyword">let</span> b <span class="token operator">=</span> a |
- Chỉ định
varaible bbằng một giá trị khác
1 2 | <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">20</span> |
variable a và variable b không có quan hệ gì với nhau. Nên khi bạn thay đổi giá trị một trong 2 thằng thì sẽ không làm thay đổi thằng kia
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
Khi bạn chỉ định Reference value từ một variable vào một variable khác, value được lưu trong variable được copy vào vị trí của biến mới
Sự khác nhau là value được lưu ở cả 2 variable có cùng address. Cả 2 varaible bây giờ tham chiếu tới cùng 1 object
Xem ví dụ sau:
Khai báo biến x giữ giá trị là một object có thuộc tính name:
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> |
Khai báo biến y = x
1 2 | <span class="token keyword">let</span> y <span class="token operator">=</span> x |
Bây giờ cả x và y cùng tham chiếu tới một object
Tiếp đến ta thay đổi giá trị của x thì y sẽ bị thay đổi theo
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. Một số ví dụ thường gặp
1. Reference Value trong trường hợp tham số truyền vào 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> |
Ở trường hợp này, nếu:
Reference Valuelà một tham số truyền vàofunction- Trong
functionta muốn biến đổidata
=> Ở đây bạn cần cân nhắc khi biến đổi chính data vì nó làm thay đổi giá trị gốc
2. Cách khắc phục thằng trên như thế nào ?
Nếu muốn khắc phục thằng trên. Bạn trên dùng một số hàm để tạo ra những data mới. Tạm gọi đó là clonedData đi. Ta có thể sử dụng 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> |
Đối với Array bạn có thể tham khảo ở đây: https://futurestud.io/tutorials/clone-copy-an-array-in-javascript-and-node-js