JS — A life changing coding trick with anonymous function

Anonymous function is one of the most overlooked features in the world of JavaScript. Yet, when used correctly, it can highly improve readability and reduce line of codes. Here I would like to introduce a trick that use anonymous function for assignment, which I find extremely useful.

The Problem

Modern coding practices suggest using const for variables that we know they won’t change. However, it becomes a bit messy when there is condition.

Say we have several conditions and we want to assign different values based on different conditions, we will end up with a long assignment chain like this:

const a = accountType === 'customer' ? ( accountStatus === 'active' ? 'active-customer-account' : 'pending-customer-account' ) : ( accountStatus === 'active' ? 'active-guest-account' : 'pending-guest-account' );

This is bad due to its unreadability. An alternative is to give up using const and use let instead:

let a;
if (accountType === 'customer') {
if (accountStatus === 'active') {
a = 'active-customer-account';
} else {
a = 'pending-customer-account';
}
} else {
if (accountStatus === 'active') {
a = 'active-guest-account';
} else {
a = 'pending-guest-account';
}
}

This is much more readable. However, it is still not ideal as we are losing the information of const. This approach also forces the developers to decapsulate the logic, making “noise” for other developers working together on the same code base.

Some may also suggest using a function:

function computeAccountLevel(accountType, accountStatus) {
if (accountType === 'customer') {
if (accountStatus === 'active') {
return 'active-customer-account';
} else {
return 'pending-customer-account';
}
} else {
if (accountStatus === 'active') {
return 'active-guest-account';
} else {
return 'pending-guest-account';
}
}
}
const a = computeAccountLevel(accountType, accountStatus);

This also works, but the function created is only relevant to a single variable, which is still noise for other developers. Besides, there are even more codes now.

The Trick

This kind of problems can be solved very easily with anonymous functions. By wrapping the logic inside an anonymous function, we can keep the const without sacrificing the readability or making noise, while minimizing the lines of code at the same time.

const a = (() => {
if (accountType === 'customer') {
if (accountStatus === 'active') {
return 'active-customer-account';
} else {
return 'pending-customer-account';
}
} else {
if (accountStatus === 'active') {
return 'active-guest-account';
} else {
return 'pending-guest-account';
}
}
})();

All the logic are kept together, which is much easier for coding tracing. It also makes the infamous switch usable in a practical way for assignment:

const a = (() => {
switch (accountType) {
case 'guest':
return 1;
case 'customer':
return 2;
case 'admin':
return 3;
default:
return -1;
}
})();

Besides, this trick is also extremely useful for object creation, which can potentially save many lines of code:

const a = {
name: customerName,
type: accountType,
authorityLevel: (() => {
switch (accountType) {
case 'guest':
return 1;
case 'customer':
return 2;
case 'admin':
return 3;
default:
return -1;
}
})()
};

Caution

The benefit of this trick is purely on the coding level. This means it improves readability, maintainability and also reduces lines of code, but it doesn’t really improve what is happening in runtime. Everything comes with price. The price of anonymous function is the extra resource needed for the function creation. Most codes in reality are not performance critical and the impact of this trick on non-performance critical logic is neglectable. Yet, for performance critical code logic, this trick brings more harm than good. We need to be really careful not to use this trick in those critical code blocks.

Thanks for reading! Hope you find this article helpful. Any comments would be highly appreciated. :D

Web developer from Hong Kong. Most interested in Angular and Vue. Currently working on a Nuxt.js + NestJS project.

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