DEV Community

Cover image for JavaScript tips and tricks.
Syed Mohsin Raza
Syed Mohsin Raza

Posted on • Edited on

JavaScript tips and tricks.

The !! operator

To check either a value is truthy or falsey use !! operator you can call this double not or not not operator you can also go with Boolean function here.

console.log(!! 0)             // output: false
console.log(!! 1)            // output: true

console.log(Boolean(1))     // output: true
console.log(Boolean(0))    // output: false
Enter fullscreen mode Exit fullscreen mode

Convert string β†’ number

Convert string into a number

const string = '101'

console.log(+string)          // output: 101
console.log(Number(string))   // output: 101
Enter fullscreen mode Exit fullscreen mode

The reverse method

Use reverse method to reverse the order of array items notice that reverse method mutates the original array.

const numbers = ['1', '2', '3']

console.log(numbers.reverse())   // output: [ "3", "2", "1" ]
Enter fullscreen mode Exit fullscreen mode

The Math.min & max

Find minimum or maximum values from an array using Math.min & Math.max function.

const numbers = [1, 2 ,3, 4, 5]

console.log(Math.min(...numbers)) // output: 1

console.log(Math.max(...numbers)) // output: 5
Enter fullscreen mode Exit fullscreen mode

Merge Arrays

Use spread operator to merge arrays.

const fruits = ['🍎', '🍌']

const vegetables = ['πŸ₯”', 'πŸ₯•']

const food = [...fruits, ...vegetables]

console.log(food) // output: [ "🍎", "🍌" , "πŸ₯”", "πŸ₯•" ]
Enter fullscreen mode Exit fullscreen mode

The falsey values

In javascript there are nine falsey values.

undefined , null , NaN , 0 , 0n (BigInt 0), -0 ""(empty string),false,document.all
Enter fullscreen mode Exit fullscreen mode

The ternary operator

Ternary operator allows you to write if...else statement in a more compact.

let number = 1

if (number == 1) {
  console.log('number is one')
} else {
  console.log('number is not one')
}

// Syntax: condition ? exprIfTrue : exprIfFalse  (MDN)

console.log(number === 1 ? "number is one" : "number is not one");

Enter fullscreen mode Exit fullscreen mode

Remove duplicates from array

const fruits = ['🍎', '🍊', '🍎', '🍊']

// Method 1:
const filteredFruits = Array.from(new Set(fruits))
console.log(filteredFruits) // output: Array [ "🍎", "🍊" ]

// Method 2:
const filteredFruits = [...new Set(fruits)]  
console.log(filteredFruits) // output: Array [ "🍎", "🍊" ]
Enter fullscreen mode Exit fullscreen mode

The map method

Try using map method if you want to manipulate array items map method executes the given function on each element of array and return a new array based on the original array

const numbers = [1, 2, 3, 4, 5]

const mapedNumbers = numbers.map(element => element + 1) 

console.log(mapedNumbers) // output: [2, 3, 4, 5, 6]
Enter fullscreen mode Exit fullscreen mode

The includes method

To check that an array contains a certain value or not use includes method.

const hearts = ['🧑', 'πŸ’™', '🀍']

console.log(hearts.includes('🧑'))  // output: true

console.log(hearts.includes('❀️'))  // output: false
Enter fullscreen mode Exit fullscreen mode

The filter method

filter arrays based on conditions filter method takes a function as an argument and executes that function on each element of array and returns new array.

const numbers = [1, 5, 6, 7, 4]

const filteredArray = numbers.filter(element => element > 4)

console.log(filteredArray)  // output: [ 5, 6, 7 ]
Enter fullscreen mode Exit fullscreen mode

Scroll to top button

const button  = document.querySelector('button')

button.addEventListener('click', function () {
  window.scrollTo(0,0)
})

Enter fullscreen mode Exit fullscreen mode

scrolling from bottom to top of the page on clicking button move to top gif

Happy Coding 😊

Top comments (6)

Collapse
 
devsyedmohsin profile image
Syed Mohsin Raza • Edited

Thanks @lukeshiru Article is updated !

 
frankwisniewski profile image
Frank Wisniewski

oh yes, thank you…

Collapse
 
johnpalmgren profile image
John Palmgren

Nice tips πŸ™Œ

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

There is no !! operator - you're just using the ! (logical not) operator twice.

Also, a shorter way to write the duplicate removal one is:

const filteredFruits = [...new Set(fruits)]
Enter fullscreen mode Exit fullscreen mode
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
Sloan, the sloth mascot
Comment deleted

Some comments have been hidden by the post's author - find out more