education JavaScript

Write Cleaner JavaScript with These Style Tips

You’ve done it, you magnificent bastard. You’ve taken the leap. Bitten that bullet. Taken the advice of nearly all tech Twitter.

You, you glorious creature, have started learning JavaScript.

Now it’s time to level up your code.

This article outlines three style tips to use to write cleaner, more concise JavaScript. Neater code is easier to read (and therefore debug). Taking the time to learn these tips will help save time later on.

Let’s get started.

1. Use arrow function expressions

If you’re reading this, odds are you’ve already encountered JavaScript functions. They look something like this:

function myFunction(parameter) {

Good news, friends: there’s a better (read : more concise) way to write a function.

Meet the arrow function expression.

Its name is a mouthful, but trust me, the arrow function expression is your friend. Basically, it replaces function expressions with an arrow (‘=>’).

Here’s the general format:

(myParameter) => {

Why You Should Care

Cleaner code. Plain and simple. The arrow function expression is a great alternative to the regular function format — it is a time saver when coding, and is easier to read. It might not look like much — what’s a couple of words here, a phrase there? — but it’s an extra styling touch that makes your code just that much more readable.

2. Use 👏 template 👏 literals

Much like f-strings in Python, JavaScript template literals are intuitive, quick to write, and honestly? Kinda fun to use.

Template literals pretty much look like strings, but have one major difference: mutability (i.e., editability. That’s a word, right?) They’re a little slicker, a little more adaptable, and look just a tad edgier. (I mean, seriously — they use backticks. Pretty rad.)

Here’s what a template literal looks like :

let stringName = 
`Hello ${userName}!`

Why You Should Care

*Jazz hands* Reusability! Template literals let us repurpose our code when users and values change. (Something something “Circle of Life”, holds lion cub up on Pride Rock, etc.)

Strings are immutable — once you create a string, its contents can’t be changed. You can make a new string, or concatenate (combine) strings — but the original string’s contents won’t change.

Template literals act like strings, but with a twist: they contain variables. Sure, strings are immutable, but variables aren’t. This means that the same line of code can be repurposed for countless users, and countless input values.

Example) Using template literals to display worked hours//Create variables you want to use in your stringlet employeeName = 'Buffy'
let hoursWorked = 40//Create template literal
let myString = `${employeeName} worked ${hoursWorked} hours this week.`Output --> Buffy worked 40 hours this week.

3. Use the Map Method

What if you wanted to iterate through an array, square all of its contents, and create a new array of these squares? You’d probably use a for loop — and it might look something like this:

Creating a New Array Using a For Loop
1 const oldArray = [1, 2, 3, 4, 5, 6, 7]
2 const newArray = []
3 for (let i = 0; i < oldArray.length; i++) {
4 newArray.push(myArray[i]*i)
5 }


There’s an even more concise way to do this.

That’s where the map method comes in.

The map method eliminates the need for a for loop, as well as the const statement in line 2.

Here’s how we’d use the map method to produce the same new array:

Creating a New Array Using the Map Method
1. const oldArray = [1, 2, 3, 4, 5, 6, 7]
2. const newArray = => i * i)

Why You Should Care

Both methods produce the same output: a new array (creatively named ‘newArray’) which contains the new values: 1, 4, 9, 16, 25, 36, and 49.

The difference? In the first example, the for loop method accomplishes this in two lines, where the for loop does so in five.

The map method, template literals, and arrow function expressions are all great tools for writing concise code. Here are some great resources from MDN Web Docs if you’d like to learn more:

Learn about the Map Method

Learn about Template Literals

Learn about Arrow Function Expressions

Happy coding!

This story was originally published on gitconnected’s Level Up Coding publication. Read it here.

Header photo by Cookie the Pom on Unsplash