Khi học JS mình chắc chắn các bạn sẽ có câu hỏi làm thế nào để gán giá trị default nếu như giá trị mong muốn bị null hoặc undefined. Cách đây vài năm, tìm hiểu thì hẳn các bạn sẽ thấy người ta dùng toán tử logical OR (||) để làm điều đó, hoặc chuối hơn là dùng if/else phải không nào. Ví dụ dùng logical OR (||):
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">var</span> defaultValue <span class="token operator">=</span> <span class="token string">'Javascript Program'</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">getProgramName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> value<span class="token punctuation">;</span> <span class="token keyword">return</span> value <span class="token operator">||</span> defaultValue<span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">getProgramName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'Javascript Program'</span> |
Hoặc cách cực kỳ chuối, check if/else
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">var</span> defaultValue <span class="token operator">=</span> <span class="token string">'Javascript Program'</span><span class="token punctuation">;</span> <span class="token comment">// ví dụ thôi nhá, đừng dùng cách này</span> <span class="token keyword">function</span> <span class="token function">getProgramName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> value<span class="token punctuation">;</span> <span class="token comment">// nếu value không có gía trị thì lấy default</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">===</span> <span class="token keyword">null</span> <span class="token operator">||</span> value <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> defaultValue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> value<span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">getProgramName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'Javascript Program'</span> |
Còn ở thời nay, xịn xò hơn bạn đã có toán tử nullish coalescing (??). Ví dụ:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">var</span> defaultValue <span class="token operator">=</span> <span class="token string">'Javascript Program'</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">getProgramName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> value<span class="token punctuation">;</span> <span class="token keyword">return</span> value <span class="token operator">??</span> defaultValue<span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">getProgramName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'Javascript Program'</span> |
Vậy câu hỏi đặt ra, cả hai toán tử || và ?? như nhau vậy cần gì JS hỗ trợ thêm cái ?? làm chi.
Định nghĩa ??
Theo như MDN docs viết: “The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.”
Nghĩa là toán tử sẽ trả về giá trị phía bên phải nếu giá trị phía bên trái là null hoặc undefined, ngược lại sẽ trả về phía bên trái.
Khác biệt ?? và ||
Về cơ bản ?? và || mục đích như nhau, nhưng với || sẽ “thêm thắt” đôi chút.
Toán tử || sẽ trả về giá trị phía bên phải nếu giá trị phía bên trái là falsy, không chỉ có null/undefined như ??.
Về falsy chỉ cần nhớ, có 8 giá trị mà khi biên dịch JS sẽ cho đó là false:
- false
- undefined
- null
- NaN
- 0
- -0
- 0n
- ” (empty string)
Vì vậy khi dùng toán tử || nó sẽ trả về giá trị bên phải trong trường hợp vế trái rơi vào 8 trường hợp trên (toán tử ?? chỉ có 2 trường hợp). Ví dụ:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">var</span> defaultValue <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> <span class="token keyword">var</span> value <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value <span class="token operator">||</span> defaultValue<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// in ra 10</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value <span class="token operator">??</span> defaultValue<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// in ra 0</span> <span class="token comment">// ...các bạn ví dụ thêm với các giá trị trên sẽ thấy</span> |
Vì vậy JS hỗ trợ toán tử mới ?? để tránh những case này, làm cho code work theo ý muốn hơn.
Bonus
Bạn có thể sử dụng kết hợp toán tử optional chaining (?.) và nullish coalescing (??) cùng nhau. Ví dụ
1 2 3 4 5 6 7 | <span class="token keyword">var</span> defaultValue <span class="token operator">=</span> <span class="token string">'Javascript Program'</span><span class="token punctuation">;</span> <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> program<span class="token operator">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>program<span class="token operator">?.</span>name <span class="token operator">??</span> defaultValue<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'Javascript Program'</span> |
Như vậy sẽ trông pro hơn hẳn.
Tóm lại
Thực ra nếu bạn là C# developer bạn sẽ thấy ôi, C# cũng có ?? vậy không lẽ mấy bác Microsoft mượn idea? Không đâu, thực ra ngược lại mới đúng, JS mượn idea ?? từ C# đó.
Tóm lại:
??chỉ check 2 trường hợp duy nhấtnullvàundefined- Còn
||sẽ checkfalsy(8 trường hợp) - Sử dụng
??sẽ tránh check nhiều điều kiện không mong đợi, tránh lỗi trên trời rơi xuống, recommend hơn.