11 Useful JavaScript Tips

Saturday, 19/11/2022

Tram Ho

In daily programming work we often encounter problems such as: checking key to see if they exist, conditional manipulation of data, filtering value in array , etc.

Here I list some common cases that I personally love and are very helpful to make the code shorter and clearer. Some of you will wonder why not use the library, the library already has it all.

Sometimes killing chickens doesn’t need a buffalo knife
I always make good use of the built-in functions of js first

1. Conditions when adding Properties to the object

<span class="token keyword">const</span> isValid <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> age <span class="token operator">=</span> <span class="token number">18</span> <span class="token punctuation">;</span>

<span class="token comment">// Chúng ta cần sẽ dùng toán tử spread (...) để xử lý</span>

<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
  id <span class="token operator">:</span> <span class="token string">"1234"</span> <span class="token punctuation">,</span>
  name <span class="token operator">:</span> <span class="token string">"Tuan"</span> <span class="token punctuation">,</span>
  <span class="token operator">...</span> <span class="token punctuation">(</span> isValid <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span> isValid <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
  <span class="token operator">...</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> age <span class="token operator">&gt;=</span> <span class="token number">18</span> <span class="token operator">||</span> isValid <span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span> cart <span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</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> <span class="token string">"person :&gt;&gt; "</span> <span class="token punctuation">,</span> person <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const isValid = false ;

const age = 18 ;

// Chúng ta cần sẽ dùng toán tử spread (...) để xử lý

const person = {

id : "1234" ,

name : "Tuan" ,

... ( isValid && { isValid : true } ) ,

... ( ( age >= 18 || isValid ) && { cart : 0 } ) ,

} ;

console . log ( "person :>> " , person ) ;

person :&gt;&gt;  { id: '1234', name: 'Tuan', cart: 0 }

1 2	person :>> { id: '1234', name: 'Tuan', cart: 0 }

2. Check if a `Property` exists in an object

We can use keyword in to check if the property exists in Object

<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
  id <span class="token operator">:</span> <span class="token string">"123"</span> <span class="token punctuation">,</span>
  name <span class="token operator">:</span> <span class="token string">"tuan"</span> <span class="token punctuation">,</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> <span class="token string">"id in person :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token string">"id"</span> <span class="token keyword">in</span> person <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 string">"name in person :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token string">"name"</span> <span class="token keyword">in</span> person <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const person = {

id : "123" ,

name : "tuan" ,

} ;

console . log ( "id in person :>> " , "id" in person ) ;

console . log ( "name in person :>> " , "name" in person ) ;

id in person :&gt;&gt;  true
name in person :&gt;&gt;  true

id in person :>> true

name in person :>> true

3. Destructuring object with `Dynamic key`

We can also set an alias name for a variable that has been Destructuring

<span class="token keyword">const</span> productData <span class="token operator">=</span> <span class="token punctuation">{</span> id <span class="token operator">:</span> <span class="token string">"123"</span> <span class="token punctuation">,</span> name <span class="token operator">:</span> <span class="token string">"laptop"</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> deviceName <span class="token punctuation">}</span> <span class="token operator">=</span> productData <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 string">"deviceName :&gt;&gt; "</span> <span class="token punctuation">,</span> deviceName <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> extractKey <span class="token operator">=</span> <span class="token string">"name"</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span> extractKey <span class="token punctuation">]</span> <span class="token operator">:</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> productData <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 string">"data :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const productData = { id : "123" , name : "laptop" } ;

const { name : deviceName } = productData ;

console . log ( "deviceName :>> " , deviceName ) ;

const extractKey = "name" ;

const { [ extractKey ] : data } = productData ;

console . log ( "data :>> " , data ) ;

deviceName :&gt;&gt;  laptop
data :&gt;&gt;  laptop

deviceName :>> laptop

data :>> laptop

4. Loop an object to access `key` and `value` simultaneously

The key and the value can be accessed at the same time using the entries . function

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> id <span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> name <span class="token operator">:</span> <span class="token string">"laptop"</span> <span class="token punctuation">,</span> isSale <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span>

Object <span class="token punctuation">.</span> <span class="token function">entries</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter"><span class="token punctuation">[</span> key <span class="token punctuation">,</span> value <span class="token punctuation">]</span></span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token string">"id"</span> <span class="token punctuation">,</span> <span class="token string">"name"</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">includes</span> <span class="token punctuation">(</span> key <span class="token punctuation">)</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> <span class="token string">"key :&gt;&gt; "</span> <span class="token punctuation">,</span> key <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 string">"value :&gt;&gt; "</span> <span class="token punctuation">,</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const data = { id : 1 , name : "laptop" , isSale : true } ;

Object . entries ( data ) . forEach ( ( [ key , value ] ) => {

if ( [ "id" , "name" ] . includes ( key ) ) {

console . log ( "key :>> " , key ) ;

console . log ( "value :>> " , value ) ;

}

} ) ;

key :&gt;&gt;  id
value :&gt;&gt;  1

key :&gt;&gt;  name
value :&gt;&gt;  laptop

key :>> id

value :>> 1

key :>> name

value :>> laptop

5. Prevent error when accessing any `key` that does not exist in the object by using optional string ( `?.` )

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> id <span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> isSale <span class="token operator">:</span> <span class="token boolean">true</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> <span class="token string">"data?.name :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token operator">?.</span> name <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 string">"data?.name?.user :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token operator">?.</span> name <span class="token operator">?.</span> user <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 string">"data?.displayName :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token operator">?.</span> displayName <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const data = { id : 1 , isSale : true } ;

console . log ( "data?.name :>> " , data ?. name ) ;

console . log ( "data?.name?.user :>> " , data ?. name ?. user ) ;

console . log ( "data?.displayName :>> " , data ?. displayName ) ;

data?.name :&gt;&gt;  undefined       
data?.name?.user :&gt;&gt;  undefined 
data?.displayName :&gt;&gt;  undefined

data?.name :>> undefined

data?.name?.user :>> undefined

data?.displayName :>> undefined

Warning: optional string is used when you are not sure whether its Property exists or not in the data. If you are sure that the keys must be in the data and if they are not, then you should throw error to raise an lỗi instead of preventing them.

6. Check for `falsy value` values in an array

<span class="token keyword">const</span> fruitList <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">"apple"</span> <span class="token punctuation">,</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> <span class="token string">"mango"</span> <span class="token punctuation">,</span> <span class="token keyword">undefined</span> <span class="token punctuation">,</span> <span class="token string">""</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> filterFruitList <span class="token operator">=</span> fruitList <span class="token punctuation">.</span> <span class="token function">filter</span> <span class="token punctuation">(</span> Boolean <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 string">"filterFruitList :&gt;&gt; "</span> <span class="token punctuation">,</span> filterFruitList <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> isAnyFruit <span class="token operator">=</span> fruitList <span class="token punctuation">.</span> <span class="token function">some</span> <span class="token punctuation">(</span> Boolean <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 string">"isAnyFruit :&gt;&gt; "</span> <span class="token punctuation">,</span> isAnyFruit <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const fruitList = [ "apple" , null , "mango" , undefined , "" ] ;

const filterFruitList = fruitList . filter ( Boolean ) ;

console . log ( "filterFruitList :>> " , filterFruitList ) ;

const isAnyFruit = fruitList . some ( Boolean ) ;

console . log ( "isAnyFruit :>> " , isAnyFruit ) ;

filterFruitList :&gt;&gt;  [ 'apple', 'mango' ]
isAnyFruit :&gt;&gt;  true

filterFruitList :>> [ 'apple', 'mango' ]

isAnyFruit :>> true

7. Remove duplicate values in array.

I use this function very often (quickly)

<span class="token keyword">const</span> fruitList <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">"apple"</span> <span class="token punctuation">,</span> <span class="token string">"mango"</span> <span class="token punctuation">,</span> <span class="token string">"apple"</span> <span class="token punctuation">,</span> <span class="token string">"mango"</span> <span class="token punctuation">,</span> <span class="token string">"grapes"</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> uniqFruitList <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span> <span class="token keyword">new</span> <span class="token class-name">Set</span> <span class="token punctuation">(</span> fruitList <span class="token punctuation">)</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> <span class="token string">"uniqFruitList :&gt;&gt; "</span> <span class="token punctuation">,</span> uniqFruitList <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const fruitList = [ "apple" , "mango" , "apple" , "mango" , "grapes" ] ;

const uniqFruitList = [ ... new Set ( fruitList ) ] ;

console . log ( "uniqFruitList :>> " , uniqFruitList ) ;

uniqFruitList :&gt;&gt;  [ 'apple', 'mango', 'grapes' ]

1 2	uniqFruitList :>> [ 'apple', 'mango', 'grapes' ]

Note: this is a feature of ES6.

8. Check if a variable is of type array or not

Since array is essentially an array {0:{}, 1:{}, 2:{}....} so typeof it will return the value as object

<span class="token keyword">const</span> fruitList <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">"apple"</span> <span class="token punctuation">,</span> <span class="token string">"mango"</span> <span class="token punctuation">,</span> <span class="token string">"apple"</span> <span class="token punctuation">,</span> <span class="token string">"mango"</span> <span class="token punctuation">,</span> <span class="token string">"grapes"</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> <span class="token string">"typeof fruitList :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token keyword">typeof</span> fruitList <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 string">"Array.isArray(fruitList) :&gt;&gt; "</span> <span class="token punctuation">,</span> Array <span class="token punctuation">.</span> <span class="token function">isArray</span> <span class="token punctuation">(</span> fruitList <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const fruitList = [ "apple" , "mango" , "apple" , "mango" , "grapes" ] ;

console . log ( "typeof fruitList :>> " , typeof fruitList ) ;

console . log ( "Array.isArray(fruitList) :>> " , Array . isArray ( fruitList ) ) ;

<span class="token keyword">typeof</span> fruitList <span class="token operator">:</span> <span class="token operator">&gt;&gt;</span>  object
Array <span class="token punctuation">.</span> <span class="token function">isArray</span> <span class="token punctuation">(</span> fruitList <span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token operator">&gt;&gt;</span>  <span class="token boolean">true</span>

typeof fruitList : >> object

Array . isArray ( fruitList ) : >> true

9. Convert String to Number and Number to String using ‘ + ‘ . operator

The + operator is a special operator, so its position also determines its meaning in each specific case.

<span class="token keyword">const</span> numberId <span class="token operator">=</span> <span class="token string">"1234"</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 string">"+numberId :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token operator">+</span> numberId <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 string">"typeof +numberId :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token keyword">typeof</span> <span class="token operator">+</span> numberId <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 string">"numberId + '':&gt;&gt; "</span> <span class="token punctuation">,</span> numberId <span class="token operator">+</span> <span class="token string">""</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> <span class="token string">"typeof numberId + '' :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token keyword">typeof</span> numberId <span class="token operator">+</span> <span class="token string">""</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const numberId = "1234" ;

console . log ( "+numberId :>> " , + numberId ) ;

console . log ( "typeof +numberId :>> " , typeof + numberId ) ;

console . log ( "numberId + '':>> " , numberId + "" ) ;

console . log ( "typeof numberId + '' :>> " , typeof numberId + "" ) ;

+numberId :&gt;&gt;  1234
typeof +numberId :&gt;&gt;  number
numberId + '':&gt;&gt;  1234
typeof numberId + '' :&gt;&gt;  string

+numberId :>> 1234

typeof +numberId :>> number

numberId + '':>> 1234

typeof numberId + '' :>> string

10. Conditionally assign other values when the value is null and undefined using the `nullish coalescing` operator ( `??` )

<span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token keyword">undefined</span> <span class="token operator">??</span> <span class="token string">"no Data"</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 string">"data 1 :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token operator">??</span> <span class="token string">"no Data"</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 string">"data 2 :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token string">""</span> <span class="token operator">??</span> <span class="token string">"no Data"</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 string">"data 3 :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token number">5</span> <span class="token operator">??</span> <span class="token keyword">null</span> <span class="token operator">??</span> <span class="token string">"no Data"</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 string">"data 4 :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token comment">// Khi sử dụng cùng toán tử gán thì nó sẽ dựa trên giá trị hiện tại của nó</span>
data <span class="token operator">??=</span> <span class="token string">"no Data"</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 string">"data 5 :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>

let data = undefined ?? "no Data" ;

console . log ( "data 1 :>> " , data ) ;

data = null ?? "no Data" ;

console . log ( "data 2 :>> " , data ) ;

data = "" ?? "no Data" ;

console . log ( "data 3 :>> " , data ) ;

data = 5 ?? null ?? "no Data" ;

console . log ( "data 4 :>> " , data ) ;

// Khi sử dụng cùng toán tử gán thì nó sẽ dựa trên giá trị hiện tại của nó

data ??= "no Data" ;

console . log ( "data 5 :>> " , data ) ;

data 1 :&gt;&gt;  no Data
data 2 :&gt;&gt;  no Data
data 3 :&gt;&gt;
data 4 :&gt;&gt;  5
data 5 :&gt;&gt;  5

data 1 :>> no Data

data 2 :>> no Data

data 3 :>>

data 4 :>> 5

data 5 :>> 5

Many of you also confuse between ?? with the OR operator ( || )

The OR operator is used when you want to assign a different value according to the condition if the value is not true . Meaning if it is one of the following values ( 0 , ' ' , null , undefined , false , NaN )

<span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token keyword">undefined</span> <span class="token operator">||</span> <span class="token string">"no Data"</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 string">"data 1 :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token operator">||</span> <span class="token string">"no Data"</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 string">"data 2 :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token string">""</span> <span class="token operator">||</span> <span class="token string">"no Data"</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 string">"data 3 :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token number">5</span> <span class="token operator">||</span> <span class="token keyword">null</span> <span class="token operator">||</span> <span class="token string">"no Data"</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 string">"data 4 :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token comment">// Khi sử dụng cùng toán tử gán thì nó sẽ dựa trên giá trị hiện tại của nó</span>
data <span class="token operator">||=</span> <span class="token string">"no Data"</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 string">"data 5 :&gt;&gt; "</span> <span class="token punctuation">,</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>

let data = undefined || "no Data" ;

console . log ( "data 1 :>> " , data ) ;

data = null || "no Data" ;

console . log ( "data 2 :>> " , data ) ;

data = "" || "no Data" ;

console . log ( "data 3 :>> " , data ) ;

data = 5 || null || "no Data" ;

console . log ( "data 4 :>> " , data ) ;

// Khi sử dụng cùng toán tử gán thì nó sẽ dựa trên giá trị hiện tại của nó

data ||= "no Data" ;

console . log ( "data 5 :>> " , data ) ;

data 1 :&gt;&gt;  no Data
data 2 :&gt;&gt;  no Data
data 3 :&gt;&gt;  no Data
data 4 :&gt;&gt;  5
data 5 :&gt;&gt;  5

data 1 :>> no Data

data 2 :>> no Data

data 3 :>> no Data

data 4 :>> 5

data 5 :>> 5

11. Boolean conversion using the !!

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"This is not Empty :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token operator">!</span> <span class="token operator">!</span> <span class="token string">""</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> <span class="token string">"This is not Empty :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token operator">!</span> <span class="token operator">!</span> <span class="token string">"This is not Empty"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

console . log ( "This is not Empty :>> " , ! ! "" ) ;

console . log ( "This is not Empty :>> " , ! ! "This is not Empty" ) ;

This is not Empty :&gt;&gt;  false
This is not Empty :&gt;&gt;  true

This is not Empty :>> false

This is not Empty :>> true

It’s all the same, many of you still have questions !! what is different from !

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"This is Empty :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token operator">!</span> <span class="token string">""</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> <span class="token string">"This is Empty :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token operator">!</span> <span class="token string">"This is Empty"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

console . log ( "This is Empty :>> " , ! "" ) ;

console . log ( "This is Empty :>> " , ! "This is Empty" ) ;

This is Empty :&gt;&gt;  true
This is Empty :&gt;&gt;  false

This is Empty :>> true

This is Empty :>> false

Oh so if it was….

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"This is ... :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token operator">!</span> <span class="token operator">!</span> <span class="token operator">!</span> <span class="token string">""</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> <span class="token string">"This is ... :&gt;&gt; "</span> <span class="token punctuation">,</span> <span class="token operator">!</span> <span class="token operator">!</span> <span class="token operator">!</span> <span class="token string">"This is ..."</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

console . log ( "This is ... :>> " , ! ! ! "" ) ;

console . log ( "This is ... :>> " , ! ! ! "This is ..." ) ;

This is ... :&gt;&gt;  true
This is ... :&gt;&gt;  false

This is ... :>> true

This is ... :>> false

Actually it only has ! and !! only from the 3rd up oil on it is simply the negation of !! never mind.

Roundup

As always, I hope you enjoyed this article and learned something new.

Thank you and see you in the next posts!

If you find this blog interesting, please give me a like and subscribe to support me. Thank you.

Ref

https://tuan200tokyo.blogspot.com/2022/11/blog43-11-meo-huu-ich-in-javascript.html

Share the news now

Source : Viblo

11 Useful JavaScript Tips

1. Conditions when adding Properties to the object

2. Check if a `Property` exists in an object

3. Destructuring object with `Dynamic key`

4. Loop an object to access `key` and `value` simultaneously

5. Prevent error when accessing any `key` that does not exist in the object by using optional string ( `?.` )

6. Check for `falsy value` values in an array

7. Remove duplicate values in array.

8. Check if a variable is of type array or not

9. Convert String to Number and Number to String using ‘ + ‘ . operator

10. Conditionally assign other values when the value is null and undefined using the `nullish coalescing` operator ( `??` )

Roundup

Ref

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers

1. Conditions when adding Properties to the object

2. Check if a Property exists in an object

3. Destructuring object with Dynamic key

4. Loop an object to access key and value simultaneously

5. Prevent error when accessing any key that does not exist in the object by using optional string ( ?. )

6. Check for falsy value values ​​in an array

7. Remove duplicate values ​​in array.

8. Check if a variable is of type array or not

9. Convert String to Number and Number to String using ‘ + ‘ . operator

10. Conditionally assign other values ​​when the value is null and undefined using the nullish coalescing operator ( ?? )

Roundup

Ref

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers

2. Check if a `Property` exists in an object

3. Destructuring object with `Dynamic key`

4. Loop an object to access `key` and `value` simultaneously

5. Prevent error when accessing any `key` that does not exist in the object by using optional string ( `?.` )

6. Check for `falsy value` values in an array

7. Remove duplicate values in array.

10. Conditionally assign other values when the value is null and undefined using the `nullish coalescing` operator ( `??` )