I’ve spent the past 15 years of my career working as a web developer. Over those years, I’ve learned and created various JavaScript shortcuts to help ease development. So, I figured I’d share them with you. This short write up lists some of the tips and tricks that I’ve picked up during my career.

The first snippet I’ll cover is one I’ve only used in a very specific, unique circumstance. It may not be relevant to all of you, but I wanted to share for the few it would apply to. The rest are snippets I use on nearly a daily basis. No matter your situation or requirements, you should be able to find at least one that you can adopt.

An Uncommon Function For An Uncommon Requirement

This first JavaScript shortcut is a function came about due to a requirement for a work project I was assigned to. The project required a CSV or text file to be uploaded, parsed on a separator (comma, tab, etc.), and the contents displayed in a spreadsheet format.

The design called for an alpha character to be displayed in each of the grid headers for each column, like in Excel – “A”, “B”, “C”, and so on. The number of columns to display was determined by the data in the uploaded file. The majority of files uploaded were expected to have fewer than 10 columns, but there was the possibility that a file could contain several more.

This situation brought up the need to derive an alpha character from a numeric index. I spent some time browsing for a function that would handle this, but I couldn’t find anything that truly fit what I needed. So, I created a function myself. Maybe my efforts on this function will save some of you the time of having to write your own.

The Function

The function I wrote up accepts one integer parameter and returns a corresponding alpha character. Index of 1 returns “A”, 26 returns “Z”, 27 returns “AA”, 52 returns “AZ” and so on up to 702 which returns “ZZ”. This allowed an alpha label to be displayed for each column in a file with up to 702 columns.

**This function is limited to going no higher than 702 as any file with more than that number of columns would be entirely impractical.**

function getAlphaFromIndex(index) {
	if (!index) return;
	index = Number(index);
	
	const asciiA = 65;	//code for A
	const asciiZ = 90;	//code for Z

	let code = null;
	let char = null;
	let prefix = null;
	let preCharCode = null;
	let preChar = null;
	let charIndex = null;

	prefix = Math.ceil(index / 26);
	if (prefix > 1) {
		preCharCode = asciiA + (prefix - 2);
		preChar = String.fromCharCode(preCharCode).toString();
		charIndex = index - (26 * (prefix - 1));
	} else {
		preChar = "";
		charIndex = index;
	}
	
	code = asciiA + charIndex - 1;
	if (code > asciiZ) {
		code = asciiA;
	}
	
	char = String.fromCharCode(code);

	return preChar + char;
}

Snippets I Use On the Daily

These are some shortcuts that I have come to rely on in my daily JavaScript development.

ECMAScript ES6 Functions

These functions were introduced in 2015 with ECMAScript ES6. Before the arrival of this functionality, an equivalent for these would probably entail using substring() and indexOf().

I’ve listed the functions I am referring to and their respective equivalents below. The equivalents are for situations when you are only wanting a true/false response.

Number 1:

String.startsWith("We the people")

equivalent:

String.indexOf("We the people") === 0

Number 2:

String.endsWith("famous last words")

equivalent:

endsWith()

which would look something like this:

var haystack = "famous last words";
var needle = "rds";
haystack.substring(haystack.length - needle.length, haystack.length) == needle;

Number 3:

String.includes("whats up")

equivalent:

String.indexOf("whats up") !== -1

includes() also works for arrays

Number 4:

Array.includes("droids")

equivalent:

Array.indexOf("droids") !== -1

The advantage of using these is functions is cleaner, much more readable code.

JSON Debugging

This next piece is a trick I often use for debugging JSON objects.

It is very common during development to console log variables containing multidimensional arrays, nested arrays, nested objects, large API call payloads, large API call response bodies, or whatever else the case may be. However, expanding the arrays in the browser console one by one is very cumbersome and tedious.

A JavaScript shortcut to work around this is to right-click on the logged variable in the browser console by right-clicking on the variable and select Store as global variable from the menu.

This creates a variable named temp1 (then temp2, temp3, and so on for subsequent globals). Variable names may be different per browser, but they should follow a similar fashion.

You can then copy the contents of that variable to your clipboard by running this in the browser console:

copy(temp1)

If the variable needs to be converted to JSON or string format, you can do that by running this:

copy(JSON.stringify(temp1))

Now paste the value in your clipboard into a text file, and you will see the full variable contents.

A text editor with a formatter would be useful to pretty-print the variable contents. Or, you can use something like jsonlint.com instead, which is a very handy tool for formatting and validating JSON objects and making the data readable.

I use the above method quite often for debugging JSON bodies, providing example request payloads, providing example request responses, and for other purposes.

Wrapping Up

When writing code, I have often found that less is more and that the simplest solution is normally the best one. Learning new ways to take something complex and make it easier keeps development from getting too monotonous.

Hopefully, you’ve found at least one trick that will save you time in your work going forward! Please let me know what you think in the comments below.