10 Ways to Be a Better JavaScript Coder

Are you looking to improve your JavaScript skills—or just wondering what it takes to be a better JavaScript developer? If you want to improve your JavaScript skills, that’s a great professional choice. JavaScript is the most commonly-used language for developers, in large part because it’s the language of the browser. If an application uses the web, it’s using JavaScript. And if you’re using JavaScript—and you’re good at it—you can really turbocharge your career.

You should also try to get better at JavaScript because you like working with the language, not just for professional reasons. If you’re like me (I started out writing Ruby), you might find JavaScript intimidating at first—or even hate writing it. Fortunately, the more I work with JavaScript, the more I enjoy it.

So how can you get better at JavaScript? This was something I spent a lot of time thinking about when I worked as Director of Curriculum at Epicodus, a coding bootcamp based in Portland and Seattle. Here are some things that really helped me improve my JavaScript skills—and hopefully these tips will help you on your journey, too. If you are new to JavaScript, you can start learning the language with Epicodus’ free Introduction to Programming curriculum or freecodecamp.com’s JavaScript course.

If you’re further along in your journey, though, here’s what you can do next.

1. Get functional

Many JavaScript developers use JavaScript for object-oriented programming (OOP), especially developers who come from an object-oriented language like Ruby or C#. If your background is in OOP and you haven’t learned functional programming yet, it’s time to start. This isn’t a debate about whether functional or object-oriented programming is better. They are both extremely powerful ways of programming in JavaScript, which means you should know both. Because functional programming is more abstract and often more challenging for beginning coders, it’s common for developers—even mid-level developers—not to be very familiar with the paradigm.

I definitely found functional programming very intimidating at first. But as I learned more, the more I loved the functional approach. In fact, writing Functional Programming With JavaScript curriculum at Epicodus was one of the most fun things I ever did on the job. And just learning the basics of functional programming felt like one of the most powerful level-ups I’ve ever had as a coder.

At the very least, you should understand the following concepts:

• Immutability
• Pure functions
• Composition
• Closures
• Currying
• Recursion

You should also be really familiar with the most powerful functional methods in JavaScript, especially map(), reduce(), and filter().

Functional programming is very much a way of thinking. While objective-oriented programming means you’re often changing the state of an object, with functional programming, you should be thinking about immutability as much as possible. In other words, don’t change state! Even if you are an object-oriented programmer, limiting state changes will lead to better, cleaner code. And if you came into JavaScript as a functional programmer without a background in object-oriented programming, don’t neglect OOP.

2. Keep up with the latest specs

First off, you better not be using var anymore. At the very least, you should be familiar with all the features from ES6 (also known as ES 2015), including declaring variables with let and const. You might not use ES6 maps and sets much, but promises are another need-to-know feature. ES6 also makes modularizing your code easier with import and export statements.

And just being up-to-date with ES6, which came out in 2015, is a low bar to clear. Here are just a few examples of features you should know from later specs:

• Async functions from ES2017 (ES8)
• Object rest/spread properties from ES2018 (ES9)

Don’t worry about trying to memorize everything—that’s what documentation is for. Just familiarizing yourself with the specs is a great start.

JavaScript began updating its specs every year starting with ES6 in 2015. (ES5 came out in 2009.) If you haven’t done so already, check out the specs for recent years—for example, you can do a Google search for ES11 (also known as ES2020). ES2020 offers the Promise.allSettled() method, a nifty addition to the Promise prototype. And the more you know about promises, the better.

You don’t need to read up on the proposed changes for future ES specs unless you really want to be bleeding edge. Just make sure you keep up with the most recent changes to JavaScript, which means everything from ES2015 on.

3. Embrace asynchrony

Yes, asynchrony is hard, but it’s not as hard as it used to be. If you’re still in callback hell (stuck in ES5), you probably aren’t using promises and async functions enough. In addition to understanding how to write callbacks (if you started as a developer after the olden days of callback hell), you should know how to use the following tools for asynchrony:

• Promises, including the Fetch API for making HTTP requests
• Async/await, which is syntactic sugar for promises
• Bonus: Generators and observables allow you to run asynchronous code over time, unlike a promise, which can only be resolved once. Observables don’t exist in JavaScript yet (they are still in the proposed stage), but the RxJS library provides everything you need to explore observables further. And the RxJS library is so fun! Even cooler, you can go to rxjs.dev, open the console, and RxJS is preloaded—which means you can play around with observables in the console without setting up anything in your environment.

4. Know where the language ends and the framework begins

I got into React at a time when JavaScript had really hooked me. Sure, I understood JavaScript a lot better by then, but I also wanted to make sure I knew where the language ended and React-specific features began. React is more streamlined than frameworks like Angular and Ember, which is one of many reasons it’s my favorite framework. It’s also a lot easier to separate the framework from plain old JavaScript code. That means you know whether you are writing plain old JavaScript or actually using features that the React library provides.

If you’re using a framework, make sure you know when you are using JavaScript and when you are using the framework. Don’t just follow along with a tutorial and then not separate out the two. This was a big problem for some developers that got into Ruby on Rails without learning Ruby—they didn’t really understand what they could do with Ruby and how it was separate from the Rails framework. And this can be an issue with opinionated frameworks in general. When a framework tells you how to do something, that can be nice for beginners, but it also means you are learning the framework’s way of doing things, which might not be applicable to other tools you learn. React, on the other hand, is unopinionated. That means you do have to spend more time thinking about best practices, but it also means you will also be able to apply those best practices with other JavaScript applications.

You should be comfortable with JavaScript before you jump into learning frameworks. And as you learn new frameworks, think about how you can apply new concepts beyond the framework you are learning—whether that’s best practices that can be applied anywhere or JavaScript tricks that aren’t specific to the framework.

If you haven’t learned any frameworks yet, or are thinking about which one you should learn next, I highly recommend React, in part because it will also help you learn JavaScript better. A lot of React is just plain old JavaScript. Plus, because React takes a functional approach, you will learn how to be a better functional programmer, too.

5. Learn about prototypal inheritance

Yes, prototypal inheritance feels weird at first, especially If you previously learned a programming language that uses classical inheritance such as Ruby or C#. It can be tempting to use ES6 class syntax and pretend that JavaScript is based on classical inheritance as well. However, ES6 classes are just syntactic sugar—JavaScript is still using prototypal inheritance under the hood.

You’ll be doing your learning process a huge disservice if you don’t understand how inheritance really works in JavaScript. If you’re fuzzy on the difference, read Eric Elliot’s Master the JavaScript Interview: What’s the Difference Between Class & Prototypal Inheritance? And if you need any further hints that prototypal inheritance is important, just look at the beginning of that title: Master the JavaScript Interview. Understanding prototypal inheritance could make a big difference in terms of getting that next JavaScript job. The other nice thing about the article is that it really dives into the benefits of prototypal inheritance, so you can take advantage of it in your code.

6. Bling out your code editor

When I first started coding, I wanted to learn to code the old-fashioned way—without help from my code editor. That was silly! Your code editor can make it a lot easier for you to code. I use Visual Studio Code and take advantage of extensions wherever possible. If you’re not happy with your code editor or aren’t sure which one you want to use, I highly recommend VS Code, which is free.

So which extensions should you add? Well, there are a lot of good ones, and you might want to start with a curated list of recommendations to help you get started.

You should also have a linter, which pinpoints errors in your code and even provides suggestions on how to fix them. Having a good linter is like having a teacher always looking over your shoulder, showing you where your code is broken, and suggesting best practices along the way. I use ESLint, but there are other great JavaScript linters like JSLint and JSHint. You can add ESLint to VS Code with this extension. (You can also set it up with webpack or another module bundler, which I’ll discuss more in a moment.)

I also really like colorizing my code, which can really help me see where curly brackets begin and end. It makes code easier to read and indent. For VS Code, I use Bracket Pair Colorizer 2.

Finally, for testing, I’ve used the Jest extension and had a lot of success with it. This extension makes it really easy to continuously run tests in your code editor and debug your code. Not testing? Well, that leads me to my next tip.

7. Test your code, even if you are just coding to learn

Sometimes it’s fun to hack together a project as quickly as you can. In those cases, it might seem like testing your code is boring, takes more time, and isn’t necessary. However, that’s plain wrong. If you are choosing not to test your code, or, gasp, don’t know how to write good tests, you need to start testing now.

There are a lot of reasons to test code beyond just making sure it works. I’m a big fan of test-driven development (TDD) for writing code. TDD encourages you to start small and break a big problem into many smaller parts. You write the test first, then write just enough code to get it passing. Before you know it, all the little problems you’ve solved add up to a much bigger problem that would’ve been much more difficult to solve all at once.

TDD reduces frustration, especially further down the line when your projects become more complex. You know what works because you’ve already tested it. If new code breaks an old test, you’ll see that right away, instead of having a bug coming back to bite you later. There’s also the little dopamine rush that comes with getting a test passing and feeling you are on solid ground.

At this point, my preferred testing tool is Jest. If you want to learn about Jest and TDD, check out TDD with Jest. Or you can follow along with Test Driven Development and Environments with JavaScript to build a simple application that uses webpack, TDD, and Jest.

And yes, use a Jest extension with your code editor if you can!

8. Build an environment from scratch

When your projects get bigger, you should separate out your code using a module bundler like webpack. Maybe you are already using a module bundler at your current job, but someone else on your team created an environment that you reuse. Or maybe your team is using Docker, and you don’t need to think about it at all. But you should know how to build out a webpack environment from scratch to load modules, automatically run your tests, lint your code, and other fun stuff. And, if you still need to learn TDD, too, you can follow along with Test Driven Development and Environments with JavaScript to learn the basics of both webpack and TDD with Jest. 

9. Teach others what you’ve learned

When I taught coding, I realized I didn’t really understand concepts deeply until I could explain them. The better you understand something, the more simply you should be able to explain it. That means you aren’t just regurgitating complex information—you actually understand the concept deeply enough to break it down.

Just be careful that you’re not ‘splaining—if you’re explaining prototypal inheritance to someone that didn’t ask, that’s a red flag. Sharing information has to be a two-way street, which means checking in and making sure that the person you are sharing with actually wants to learn what you have to say.

10. Be humble and ask questions

It’s okay if you don’t know all of the answers, even about basic concepts. The more you learn, the more you realize you don’t know. Be curious and ask questions.

JavaScript can be challenging at first, and there are plenty of hiccups along the way. Early on in my coding journey, asynchrony tripped me up. Functional programming, when I first started learning it, was overwhelmingly abstract and made my head feel like it was two sizes too small. And that’s okay. I learned a lot in the process and I feel comfortable with those concepts now.

It’s worth it—and hopefully, you’ll feel the same way about the next steps in your JavaScript journey, too.