Write less Javascript

Mar 01 2023

Make your code look cleaner by writing less. You can achieve this by using so-called shorthand Javascript techniques. I've included a few that I use most frequently. 🙏

Empty, null & undefined checks

Before

let created;

if (date !== null || date !== undefined || date !== '') {
    created = date;
} else {
    created = 'Today';
}

After

const created = date || 'Today';

This was a major gamechanger for me. Use the OR operator to check if the date is empty, undefined or null before copying its value to the created variable. When it is empty you can state what you would like the value of the variable to be by declaring it after the OR operator.

One line if..else statements

Before

const type = 'Latte';
let isCoffee;

if (type === 'Latte') {
    isCoffee = true;
} else {
    isCoffee = false;
}

After

const type = 'Latte';

const isCoffee = type === 'Latte' ? true : false;

console.log(isCoffee);
// true

Write what you would normally write inside the IF parentheses, before the question mark. You can then write right after the question mark what you would like to return if the IF statement was true. Declare the else return value after the colon.

Inception alert, you can even do a nested one, here's an example:

const type = 'Latte';
const isIced = true';

const isCoffee = type === 'Latte' ? (isIced === true ? false : true) : false;

console.log(isCoffee);
// false

This statement checks if type equals to Latte, if so, check if isIced is true.

If this is the case, isCoffee becomes false because we all know that iced Latte is an abomination. 👽

I added parentheses to make it more clear but you can write this line without them.

Declaring multiple variables

Before

let x;
let y = 'Jason';
let z = 3;

After

let x, y='Jason', z=3;

Declare the variables in one line, it doesn't matter whether the variables are Strings, Integers or empty. Just make sure to include only the same variable declarations. You can do the same for const and var declarations.

Converting Strings into Numbers

Before

let num1 = parseInt("1337");
let num2 = parseFloat("13.37");

After

let num1 = +"1337";
let num2 = +"13.37";

You can use this technique to convert a String into an Integer or Double. The first line converts a String into an Integer while the second line converts it into a Double.

One line Function declaration

Before

function sendCongrats(name) {
  console.log('Happy bday ' + name + '!');
}

After

sendCongrats = name => console.log('Happy bday ' + name + '!');

Use the arrow operator instead of writing long function declarations and parentheses. I use this for functions with simple tasks such as return or print out values to the console.

One line forEach statement

Before

names.forEach(function(name) {
  console.log(name);
});

After

names.forEach(name => console.log(name));

Use the arrow operator for your forEach statments when you quickly want to quickly manage the values.

Initialize object properties

Before

var cat = 'Miaow';
var dog = 'Woof';
var bird = 'Peet peet';

var someObject = {
  cat: cat,
  dog: dog,
  bird: bird
}

After

let cat = 'Miaow';
let dog = 'Woof';
let bird = 'Peet peet';

let someObject = {
  cat,
  dog,
  bird
}

console.log(someObject);

//{
//  cat: "Miaow",
//  dog: "Woof",
//  bird: "Peet peet"
//}

Save yourself some time by not typing the variable name 2 times.

Stalk me on Twitter
Follow Frizky