Tricks you should know when working JS

Saturday, 21/03/2020

Tram Ho

When I started learning Javascript , I found some tricks and today I will share with you some nice things, I think it will help you a lot in the process of coding.

1. Filter Unique Values

Set is included in es6, along with … spread operator , we can use it to create a new array with unique values.

<span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">]</span>
<span class="token keyword">const</span> uniqueArray <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> array <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> uniqueArray <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [1, 2, 3, 5]</span>

const array = [ 1 , 1 , 2 , 3 , 5 , 5 , 1 ]

const uniqueArray = [ ... new Set ( array ) ] ;

console . log ( uniqueArray ) ; // Result: [1, 2, 3, 5]

This trick works for array with primitive type : undefined , null , boolean , string and number (If you have an array containing object , function , and array , it doesn’t apply Set) !!!

2. Every and Some

The function every and some not two commonly used functions. But it is very useful in certain cases.

every : run through each element and test a certain condition. If pass through all elements in the array will return true . If an element fails the condition returns false

<span class="token keyword">const</span> random_numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">13</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">37</span> <span class="token punctuation">,</span> <span class="token number">18</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span>
<span class="token keyword">const</span> more_random_numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">30</span> <span class="token punctuation">,</span> <span class="token number">22</span> <span class="token punctuation">]</span>

<span class="token keyword">const</span> <span class="token function-variable function">isPositive</span> <span class="token operator">=</span> <span class="token punctuation">(</span> number <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> number <span class="token operator">&gt;</span> <span class="token number">0</span>
<span class="token punctuation">}</span>

random_numbers <span class="token punctuation">.</span> <span class="token function">every</span> <span class="token punctuation">(</span> isPositive <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// returns true</span>
more_random_numbers <span class="token punctuation">.</span> <span class="token function">every</span> <span class="token punctuation">(</span> isPositive <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// returns false</span>

const random_numbers = [ 13 , 2 , 37 , 18 , 5 ]

const more_random_numbers = [ 0 , - 1 , 30 , 22 ]

const isPositive = ( number ) => {

return number > 0

}

random_numbers . every ( isPositive ) ; // returns true

more_random_numbers . every ( isPositive ) ; // returns false

some : run through each element and test a certain condition. If an element is found to be eligible, return true . If all elements in the array are run without finding an appropriate condition, false

<span class="token keyword">const</span> random_numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">13</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">37</span> <span class="token punctuation">,</span> <span class="token number">18</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span>
<span class="token keyword">const</span> more_random_numbers <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">30</span> <span class="token punctuation">,</span> <span class="token number">22</span> <span class="token punctuation">]</span>

<span class="token keyword">const</span> <span class="token function-variable function">isPositive</span> <span class="token operator">=</span> <span class="token punctuation">(</span> number <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> number <span class="token operator">&gt;</span> <span class="token number">0</span>
<span class="token punctuation">}</span>

random_numbers <span class="token punctuation">.</span> <span class="token function">some</span> <span class="token punctuation">(</span> isPositive <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// returns true</span>
more_random_numbers <span class="token punctuation">.</span> <span class="token function">some</span> <span class="token punctuation">(</span> isPositive <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// returns true</span>

return number > 0

}

random_numbers . some ( isPositive ) ; // returns true

more_random_numbers . some ( isPositive ) ; // returns true

3. Convert to Boolean

In addition to the true boolean values true and false , all values in Javascript are truthy except 0 , '' , null , undefined , NaN is falsy

We can switch between true and false using ! ( negative operator ), operator ! can convert a type into a boolean

<span class="token keyword">const</span> isTrue  <span class="token operator">=</span> <span class="token operator">!</span> <span class="token number">0</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> isFalse <span class="token operator">=</span> <span class="token operator">!</span> <span class="token number">1</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> alsoFalse <span class="token operator">=</span> <span class="token operator">!</span> <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> isTrue <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: true</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: "boolean"</span>

const isTrue = ! 0 ;

const isFalse = ! 1 ;

const alsoFalse = ! ! 0 ;

console . log ( isTrue ) ; // Result: true

console . log ( typeof true ) ; // Result: "boolean"

This type of conversion is very convenient in conditional statements.

4. Convert to String

Quickly convert a number into a string , we can use the + '' operator + ''

<span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">+</span> <span class="token string">""</span> <span class="token punctuation">;</span>

console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> val <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: "1"</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> val <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: "string"</span>

const val = 1 + "" ;

console . log ( val ) ; // Result: "1"

console . log ( typeof val ) ; // Result: "string"

5. Get the Last Item (s) in an Array

The slice () method in an array can take a negative vowel, and if you include a negative integer, it will get from the end of an array instead of the starting point.

<span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">,</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">9</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> array <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [9]</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> array <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token operator">-</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [8, 9]</span>
console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> array <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token operator">-</span> <span class="token number">3</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Result: [7, 8, 9]</span>

let array = [ 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ] ;

console . log ( array . slice ( - 1 ) ) ; // Result: [9]

console . log ( array . slice ( - 2 ) ) ; // Result: [8, 9]

console . log ( array . slice ( - 3 ) ) ; // Result: [7, 8, 9]

Reference source: https://morioh.com/p/2a323b4a7909

Share the news now

Source : Viblo

Tricks you should know when working JS

1. Filter Unique Values

2. Every and Some

3. Convert to Boolean

4. Convert to String

5. Get the Last Item (s) in an Array

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