5 JavaScript Features That You Might Not Know About

Learn 5 extremely useful JavaScript features to use in your next line of code

Optional Chaining

class Sandwich {
constructor(bread, toppings){
this.bread = bread
this.toppings = toppings
};
printOrder(){
console.log(this);
}:
};
let printVeggieToppings = (sandwich) => {
console.log(sandwich.toppings.veggie);
};
const yourSandwich = new Sandwich(
'Multigrain',
{
meat: 'Tofu',
cheese: 'Vegan Swiss',
veggie: 'Cucumbers'
},
);
yourSandwich.printOrder();
printVeggieToppings(marioSandwich);
Sandwich {
bread: 'Multigrain',
toppings: {
meat: 'Tofu',
cheese: 'Vegan Swiss',
veggie:'Cucumbers'
}
}
Cucumbers
TypeError: Cannot read property 'veggie' of undefined
let printVeggieToppings = (sandwich) => {
console.log(
sandwich && sandwich.toppings && sandwich.toppings.veggie
);
};
let printVeggieToppings = (sandwich) => {
if(sandwich && sandwich.toppings){
console.log(sandwich.toppings.veggie)
}
};
let printVeggieToppings = (sandwich) => {
console.log(sandwich?.toppings?.veggie);
};
class Sandwich {
constructor(bread, toppings){
this.bread = bread
this.toppings = toppings
};
printOrder(){
console.log(this);
}:
};
const yourSandwich = new Sandwich(
'Multigrain',
{
meat: 'Tofu',
cheese: 'Vegan Swiss',
veggie: 'Cucumbers'
},
);
yourSandwich.printOrder?.();

Nullish Coalescing

let favNumber = (num) => {
num = num || 'No number for you';
console.log(`Your favorite number is: ${num}`);
}
favNumber(9);
Your favorite number is: 9
Your favorite number is: No number for you
let favNumber = (num) => {
num = num ?? 'No number for you';
console.log(`Your favorite number is: ${num}`);
}
favNumber(0);
Your favorite number is: 0

Styling Console Log

Defer/Async Loading

//index.jsconst title = document.querySelector("h1");title.style.color = "blue";
//test.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>This needs to load NOW!</h1>
<script src="index.js"></script>
</body>
</html>
//test.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="index.js" defer></script></head>
<body>
<h1>This needs to load NOW!</h1>
</body>
</html>

Object Shorthand

const choiceOfCar = 'Jeep';
const makeOfCar = 'Wrangler';
const choiceOfCar = 'Jeep';
const makeOfCar = 'Wrangler';
const car = {
choiceOfCar: choiceOfCar,
makeOfCar: makeOfCar,
};
const choiceOfCar = 'Jeep';
const makeOfCar = 'Wrangler';
const car = {
choiceOfCar,
makeOfCar,
};
console.log(car);
{ choiceOfCar: 'Jeep', makeOfCar: 'Wrangler' }

I have deep passion for debugging and building full-stack applications, and enjoy doing so from different corners of the world.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store