DEV Community

Firas Lajmi
Firas Lajmi

Posted on

JavaScript tips and tricks.

In this article we will look at some useful JavaScript tips and tricks.

location.reload()
This reloads the current document and works same as the reload button in your browser.This can be really handy when implementing a refresh button in the user interfaces.

const btnRefresh = document.querySelector('button')

btnRefresh.addEventListener('click',() => {
  location.reload()
})
Enter fullscreen mode Exit fullscreen mode

JavaScript styles
CSS styles applied using javascript are applied as inline styles.

Cakes & Bakes 🧁

document.querySelector('h1').style.color = "coral"

<h1 style="color: coral;">  // HTML Element
Enter fullscreen mode Exit fullscreen mode

Type coercion
Implicit conversion of values from one data type to another data type is named as type coercion i.e strings to numbers.

In case of plus operator values are concatenated and converted into strings.

console.log("2" * 10)  // output: 20
console.log(10 - '2')  // output: 8
console.log(2 + '2')   // output: '22'
Enter fullscreen mode Exit fullscreen mode

Active element
if you are having hard time figuring out which element is currently being focused use document.activeElement it returns the current focused element.

console.log(document.activeElement)
Enter fullscreen mode Exit fullscreen mode

Primitives
In JavaScript there are seven primitive data types.
number, string, boolean, undefined, null, BigInt, Symbol
Remainder operator
Remainder operator % simply returns the remainder of a division i.e 5 % 2 = 1.You can use remainder operator to check either a number is even or odd

const number = 10

console.log(number % 2 === 0 ? 'Even ❤️' : 'Odd 🧡') 
// output: Even ❤️
Enter fullscreen mode Exit fullscreen mode

Design mode
Set document.designMode to on to make your webpage content editable.
document.designMode = "on"
Contains method
To check either a HTML element contains a specific class or not.

<h1 class="title">Page title</h1>
document.querySelector('h1').classList.contains('title')
document.querySelector('h1').classList.contains('subtitle')
Enter fullscreen mode Exit fullscreen mode
// output: true
// output: false 
Var hoisting
Variables declared with var are hoisted but returns undefined.
console.log(a)
var a = 10;
Enter fullscreen mode Exit fullscreen mode
// output: undefined
Remove method
Remove methods allows you to remove an HTML from the document.
<h1>Page title ⚙️</h1> 
const pageTitle = document.querySelector('h1')
pageTitle.remove()
Eval method
Eval is a builtin Javascript function which allows you to evaluate the given values i.e strings, numbers.This can be used to build a simple calculator like this.
eval(2 * '5')  
// output: 10
Enter fullscreen mode Exit fullscreen mode
eval(12 / '2')  
// output: 6 
Typeof operator
The typeof operator allows you to check type of a value.
console.log(typeof 42);
// output: "number"
Enter fullscreen mode Exit fullscreen mode
console.log(typeof 'markdown ⚡');
// output: "string"
Enter fullscreen mode Exit fullscreen mode
console.log(typeof true);
// output: "boolean"
Enter fullscreen mode Exit fullscreen mode

Replace method
The replace method allows you to replace the very first instance of a string entity with the specified entity likewise replace we also have replaceAll that replaces all the instances.
const string = 'cake'
string.replace('c','b')

// output: 'bake'
Enter fullscreen mode Exit fullscreen mode

Default parameters
Set default parameters for functions using assignment operator in case no argument is passed the function will return the default values.

I wrote this article to cover this topic in detail.

 function printName(name = "Anonymous"){
  console.log(name)
 }
Enter fullscreen mode Exit fullscreen mode
 printName()  // output: "Anonymous"
Document url
The document.URL returns the document URL/location as a string.
console.log(document.URL)
Enter fullscreen mode Exit fullscreen mode

// output: "https://developer.mozilla.org/en-US/"
Strings index
Likewise arrays string indexes also start with 0.

let string = 'cake'
string[0]  // output: 'c'
string[1]  // output: 'a'
Enter fullscreen mode Exit fullscreen mode

Includes method
To check either a string or array contains a specific value or not. The method returns a boolean.

const string = 'JavaScript'

string.includes('J')  // output: true

const hearts = ['🧡', '💙', '🤍']

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

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

Hope you enjoyed reading this article! if you have something to say or have any questions feel 💯 free to comment below.

Top comments (0)