The 7 Most-Used JavaScript Topics You Should Know

1. Promises

In a recent post, I wrote about recommendations for how you should allocate your time when learning JavaScript. At the very top of that list was asynchronous programming — specifically promises.

The promise is at the center of the asynchronous universe. Understanding how it works and using it correctly is essential to writing any modern JavaScript application.

It is very easy to write sloppy promise code that is both hard to read and to understand. Knowing good promise design patterns can help with that, as can async/await! (more or that later). But for now, here is a simple promise example:

fetch using promises.

Further Reading:

— ES6 Promises: Patterns and Anti-Patterns by Bobby Brennan

2. Async/Await

Writing code with promises can get messy very quickly. It can be difficult to read and write asynchronous code because we are so used to reading synchronous code from top to bottom. async and await allow us to write asynchronous code in synchronous ways.

One thing to definitely remember is that async/await is essentially just syntactic sugar on top of promises — much like how class is syntactic sugar for objects. They operate the same way under the hood.

Here is the same code block above for promise, now written with async and await:

fetch with async/await

Further Reading

— JavaScript async/await: The Good Part, Pitfalls and How to Use by Charlee Li

— 6 Reasons Why JavaScript Async/Await Blows Promises Away (Tutorial) by Mostafa Gaafar

3. Fetch

Both of the two examples above for promises and async/await use a function called fetch. fetch is JavaScript’s way of sending HTTP requests over the wire. It is therefore vital to making any real-world application with any kind of a backend server behind it.

fetch returns a promise, so you can use both async/await and traditional promise code when working with the function, as shown above.

Further Reading:

— The MDN Web Docs website has a very detailed article on using fetch that I highly recommend you read through!

4. Classes & Objects

Front-end JavaScript code is becoming more object-oriented in design than ever before. The popularity of component-based frameworks such as React is at an all-time high, and TypeScript is bringing concepts like interfaces and static type checking to our JavaScript code. It is for these reasons that it is imperative to know the ins and outs of JavaScript classes and objects.

Consider a very simple React component with TypeScript:

For just this one simple component, you have to understand classes, objects, constructors, and TypeScript interfaces.

Further Reading:

— This & Object Prototypes by Kyle

— The class documentation from the MDN Web Docs

— Classes vs. Interfaces in TypeScript

5. import/export

Component-based composition of your front-end applications is wildly popular right now. And typically, there is a one component per file rule that most developers follow. For these reasons, you are going to be using import and export a lot.

It may seem like a trivial thing to use, but don’t just brush over the topic as a whole. Using import and export correctly can significantly improve the performance and file size of your application.

Further Reading:

— ES6 Import & Export: A Beginner’s Guide by Adam Cowley

— Named Export vs Default Export in ES6 by Alankar Anand

6. How 'this’ works

If you have read the rest of this post or any of my other blogs, you will know how important asynchronous programming is in modern web applications.

In an asynchronous world, the context of the current code being executed is constantly changing. As the developer, you will have a much easier time making sense of asynchronous code if you understand how this is assigned to the current execution context.

Do you know what the rules of thumb are to know what this is going to be? What are the effects of using new or call or apply? If you don’t know, be sure to check out the further reading links below!

Further Reading:

— This & Object Prototypes by Kyle

— The Simple Rules to ‘this’ in Javascript by Arnav Aggarwal

7. Events & Event Listeners

In any user-facing application such as a web application, most of your code is going to revolve around listening to and responding to user interaction. There are many ways to go about this, so naturally, a number of design patterns have emerged specifically for how to best handle event data and responsive actions.

For example, MVC with 2-way data binding was popular for a long while. In this pattern, the model would update along with the view, facilitated by the controller. Whenever the model would change, the view would also change, and vice-versa. This made it very easy to write user interfaces but was difficult to debug when things went awry.

The most popular pattern today is based on some form of unidirectional data flow. In this pattern, the view components simply send the event data up to its parent components which then choose whether or not to update its own data or not. Then any changes are pushed back down to the child components which will update their own views.

Unidirectional data flow such as React’s Reflux is all about using events and event listeners. It would be extremely difficult to use React or any other modern framework without having a strong grasp of events and event listeners.

Further Reading:

— Understanding unidirectional data flow in React by Liz Denhup

— Unidirectional Data Flow? Yes. Flux? I Am Not So Sure. by Adam Neary