Search justacoding.blog. [Enter] to search. Click anywhere to close.

October 4th, 2021

How Do I Get Better At JavaScript? (18 Tips)

If you find yourself asking the question – “how do I get better at JavaScript?“, we’ve compiled some useful tips, advice and best practices for your consideration.

This article is aimed at beginners. The focus is not only on actual JavaScript technical fundamentals, but there are also some practical pieces of advice included too. The idea is that implementing some of the advice may make it easier for you to actually learn JavaScript and progress your skills yourself.

So, let’s get started!

1. Practice debugging directly in the console where possible

Many beginners don’t realize this, but you can write code directly in the console. In fact, the browser in general (let alone the console) can be an extremely powerful tool — this is often overlooked.

Writing snippets in the console is especially useful as you don’t need to refresh the browser each time to see the results of whatever it is you are trying to test. This can obviously speed up the debugging process itself. You can practice JavaScript in the console, you don’t even need to open up an IDE or text editor!

A practical example may be: you’re trying to see what the result of "true" == true would evaluate to. Or you’re trying to debug some of your own code, breaking down statements and evaluating each piece in turn to find where the issue may be.

And this leads us to our next point.

2. Experiment with JavaScript types

Regarding JavaScript types, there are a lot of quirks. It’s good to understand some of the issues that can (and will) occur.

Take automatic type conversions, for instance.

It’s possible to declare a variable as one type (let’s say, a number) — and then redeclare it as a string, for instance. These are the kind of things you need to be aware of, and to watch out for. This is one of the (many) things TypeScript helps to solve (more on that later).

let initialValue = 15

// elsewhere in your code...
initialValue = "Hello"

initialValue.toFixed(2) // type error, 
// initialValue is not numeric as we initially thought :(

Another example of one of these type-related quirks would be string subtraction. What does "hello" - "goodbye" evaluate to? It doesn’t actually error – it evaluates to NaN (not a number).

How JavaScript types work and their many quirks is a topic in its own right. Getting better at JavaScript involves gaining familiarity with these quirks, and actively avoiding them in your own code.

Of course, regarding this trivial example, there is an easy way we can avoid that outside of the box. Which leads us to the next point.

3. Understand const vs let

You shouldn’t be using const, let or even var interchangeably. They are different. Understanding these differences is crucial on your path to getting better at JavaScript.

const cannot be redeclared or reassigned, whereas let can.

const youCannotChangeMe = "I cannot be changed"
youCannotChangeMe = "" // type error

let youCanChangeMe = "You can change me!"
youCanChangeMe = "... I can be redeclared"

Right away you can see that variables that aren’t meant to be reassigned should use const. Otherwise, they can use let. This makes for clearer, more understandable code — and it also prevents errors when actually implementing your solutions.

4. Use template literals

Think of the template literal as a more powerful, enhanced string. Instead of using quotes to initialize your string, use back-ticks:

You can now interpolate variables in the string easily by using ${...}.

// you can concatenate the variables with the pieces of the string...
const oldString = "My name is " + name + " and I am " + age + " years old"

// but it's much cleaner to interpolate them, like this
const newString = `My name is ${name} and I am ${age} years old`

I’d argue that template literals are a “quality of life” feature for developers. They simply make working with strings easier and less error-prone, and the code also looks tidier and more compact — which is a bonus. There is some extra functionality associated with template literals over the conventional string that you should be aware of, also.

Here’s a good overview of template literals in practice.

Also, I have an article: JavaScript Exercises for Beginners, Part 1: Strings that contains some JavaScript string-based exercises. If you want to brush up on working with strings in general within JavaScript, I’d definitely recommend checking that one out.

5. Get to grips with this

As a beginner, the usage of this in JavaScript can definitely be a tricky concept to grapple with.

The JavaScript this keyword refers to a different thing based on where it’s actually being used. It’s really important to familiarize yourself with these scenarios. Without this knowledge, you’ll likely run into extremely frustrating bugs and issues that will surely leave you scratching your head!

this
It’s important to understand how this works in JavaScript

As a general overview of this, consider these scenarios:

  • Within a method, this refers to the owner object
  • In a function, this refers to the global object
  • In a function in strict mode however, this is undefined
  • Outside of a method or function, this refers to the global object

There are a few other places where this can be used — I’d recommend this article from w3c schools as a good resource on this topic.

6. Understand Set, familiarize yourself with it’s usages

Having some familiarity with JavaSript’s Set type can make your code more efficient. It’s easy to gloss over these new(er) features, but if you’re serious about improving your JavaScript skills — you should be actively picking this stuff up along the way.

On first inspection, you may think Set is similar to the good old Array. But they are significantly different. In short, a Set is a data type which only allows distinct elements.

Right away, the benefits of this may be apparent to you.

As an example: if you want to ensure there are no duplicate elements when maintaining your data structure — using a set will handle that out of the box. You don’t need to manually check for the existence of values as you would when using an array — the set cannot store duplicates by nature.

// standard array with duplicates
const myArray = ["red", "blue", "green", "blue"]

// create a new set from the array
const mySet = new Set(myArray)
// we've de-duplicated the array values: 
// the set contains: ['red', 'blue', 'green']

The snippet above can be considered a quick way to “de-dupe” an array (remove duplicate elements). If you aren’t familiar with set, you may have naturally opted for a more long-winded approach to this problem!

For this reason, knowing the difference between the array and the set data types is important. This type of awareness and understanding will provide you with a broader ranges of tools, and in turn make you a better JavaScript developer. You’ll have more solutions to apply to whatever problems you need to tackle.

7. Understand your versions

ES5. ES6. ES7. ECMAScript. What’s all this?

If you’re unfamiliar with the various versions of JavaScript, and how the language has evolved over the years, it’s definitely worth familiarizing yourself.

ES5 added strict mode. ES6 added classes and modules, for instance. So you won’t be able to readily use those out of the box in ES5.

It’s simply handy to have some context and an understanding (even if it’s brief) of the major changes between each of the more recent JavaScript versions.

8. Enable strict mode

If getting better at JavaScript is your goal, you should have a good understanding of what strict mode is and why it’s so important.

javascript strict mode
It’s good practice to use strict mode!

To briefly summarise the purpose of strict mode; it makes your JavaScript less error-prone by (amongst other things) eliminating silent errors.

In general, you should use strict mode on all of your projects to help crack down on problematic code that may otherwise have gone unnoticed.

9. Practice JavaScript promises, understand async code

Understanding the various nuances and quirks is a key component to getting better at JavaScript. I’d argue that this (at least partially) determines how well you understand a given language and how “good” you are with it.

One of these concepts is asynchronous programming. With JavaScript in particular, I’d recommend a detailed look at promises.

It’s well worth a deep-dive exploring the topic of promises in depth, including (but not limited):

  • creating promises
  • consuming promises
  • chaining promises
  • handling errors

A good conceptual grasp of how asynchronous programming works in general will serve you well, so be sure to practice working with JavaScript’s promises.

10. Learn about destructuring

Think of destructuring as “unpacking” an object or an array.

Again, this is a quality of life change. It simply makes it easier to access only the specific properties or values you’ll want to work with.

const myObject = {
    name: "Edward",
    age: 44,
    location: "UK"
}
const { name, age } = myObject

// we have access to the name and age variables from myObject, now

On your quest to get better at JavaScript, I’d say it’s worthwhile to ensure you are doing things the “new(er)” way where possible. The ability to destructure objects or arrays landed in ES6, and as such, you should take advantage of this to make your code cleaner and more concise.

11. Know the DOM

Think of the DOM (the Document Object Model) as an interface which defines the HTML document. JavaScript can access and interact with this document.

The DOM itself is simply a standard for how JavaScript goes about performing these interactions (getting, changing, adding and deleting HTML elements).

Interacting with the DOM is hence an important JavaScript operation. As such, it’s good to be familiar with the inner-workings.

12. Know your APIs

If you want to get better at JavaScript, fleshing out your knowledge of all its key features and functionalities would be a great place to start.

There are several important APIs that you have access to on the window object. An example here would be the Storage API.

The Storage API can be used to store and retrieve data within the browser.

Another useful API would be the Fetch API, this can be used to make HTTP requests.

Definitely acquaint yourself with these various APIs. It’s highly likely you’ll be using them throughout your JavaScript work.

13. Learn about the spread operator

Here’s another ES6 feature. The spread operator.

Much like the ability to destructure, the spread operator will make your life easier as a developer.

For instance, adding a new value to a pre-existing array. The “old” way (without the spread operator) would look something like this:

const myArray = [1, 2, 3]
myArray.push(4)
// [1, 2, 3, 4]

And with ES6’s spread operator, we can do this:

const newArray = [...myArray, 5]
// [1, 2, 3, 4, 5]

We can do the same kind of thing for properties in objects, also. Only using something like {...obj, prop: val} instead.

It’s just a little cleaner and easier to work with.

For more detail on the various nuances of JavaScript’s spread operator, I’d recommend this article in particular: The Practical Usages of JavaScript Spread Operator.

14. Practice working with JavaScript’s closures

Closures can be another “gotcha” when working with JavaScript. Interviewers often ask about closures for this very reason; it can be a good gauge (or at least an indicator) as to where your understanding of JavaScript is really at.

Be sure to practice working with closures. A detailed understanding of what they are and how they work will hold you in good stead.

I’ve written a short articles specifically on this topic: JavaScript Closures and Lexical Scoping – Basic Examples, so I’d recommend checking that out!

15. Don’t start with a framework or a library

It may be tempting for beginners to jump right in with React, Vue, jQuery or any of the countless other JavaScript frameworks out there.

However, it’ll pay massive dividends if you acquaint your self with plain old JavaScript first. No frameworks or libraries, just native JavaScript.

To get better at JavaScript — you’ll need to use JavaScript. Practice JavaScript itself; the very fundamentals. Frameworks and libraries have their own opinions, abstractions and ways of implementing things. It’s definitely better not to get wrapped up in this right away. Frameworks and tools come and go, but the underlying JavaScript will always remain.

Focus on the fundamentals before diving in head first.

16. Adhere to a consistent code style

This isn’t specific to JavaScript, but you should always be mindful of the “style” of your code.

clean code
Aim for code that’s easy to read, well formatted and well structured

If you’re working in a project with others, there will likely already be a pre-defined guide in this regard. Obviously, you’ll want to adhere to this in this particular scenario.

To get better at JavaScript is to get better at coding in general. Writing neat, clean, well-formatted and easy to comprehend code is a vital factor here. Consistently styled and formatted code is easier to read and work with, subsequent developers that work on your code will surely thank you.

17. Get a good book

In the modern age, a lot of people rely on articles (like this one, hopefully) as well as YouTube tutorials to learn new technologies.

There’s obviously nothing wrong with this.

But the value of a good book cannot be understated. If you really want to get better at JavaScript, I’d recommend picking up some of the classics in this regard. In my opinion, taking a step away from the computer and consuming media in a different format (say on an e-reader, or with an actual physical book) can be really liberating.

Eloquent Javascript is one of the staples in this regard.

It’s not only about sitting down to practice JavaScript. A lot of learning takes place away from the screen, away from your immediate “work” environment.

18. Get better at JavaScript by… using TypeScript?

Once you’re well-versed with plain old JavaScript, in my opinion the next natural step would be to look at TypeScript.

If you’re not familiar, TypeScript is a strongly-typed language from Microsoft that builds upon JavaScript.

There are many, many advantages to using TypeScript and it’s extremely powerful. As such, I would definitely recommend adding it to your arsenal of skills.

As discussed, many of JavaScript’s “quirks” (some of which were covered in this article) become redundant through the application of TypeScript. It solves a lot of important problems, and it’ll make your code more robust.

However, as always — ensure you’re very well acquainted with JavaScript itself before doing so. It’ll make things much easier to pick up and you’ll have a solid foundation to build upon.

In summary and where to go from here

We’ve only just scratched the surface when it comes to techniques and tips you can apply to get better at JavaScript.

From here, I’d recommend either starting a new project or working on specifically-tailored exercises.

I’ve written numerous articles in both of these areas.

Start a new JavaScript project

Starting a new project is a great way to sustain motivation and improve your skillset along the way. With regards to project ideas, feel free to check out 8 React Project Ideas For Your Portfolio or 10 full-stack side project ideas for web developers.

You can use JavaScript solutions specifically when implementing these ideas.

Practice JavaScript exercises

In terms of exercises and challenges, I’ve started work on a mini-series which starts with JavaScript Exercises for Beginners, Part 1: Strings.

For something a little more difficult – check out 4 Challenging Coding Problems To Solve.

Some posts on justacoding.blog may contain affiliate links. These are special links to particular products or services that I would recommend, and as such, I may earn affiliate commission via these links.

Thanks for reading!

Have any questions? Ping me over at @justacodingblog
← Back to blog