DEV Community

Cover image for Important JavaScript Concepts
Toby
Toby

Posted on • Updated on

Important JavaScript Concepts

If you are new to programming and haven’t yet made up your mind on what programming language to learn, and you go online to read about programming languages and which to learn, most online forums will point you to one, JavaScript. WHY? Because JavaScript is the king of the web and the most in-demand programming skill that employers want.

JavaScript has an advantage that most other programming languages do not; it can be used for frontend, backend and mobile applications. This is one of the reasons why it’s the most sought-after programming language. It is dynamic, learners friendly and it will give you a job.

When learning a new language, most learners seem to overlook some topics because they think it’s not important. Well, I am a culprit of such activities as well. I know for a fact I won’t be able to fully grasp a class component as I used to. Not because I didn’t learn it, but because I’d rather have a functional component any day of my life. The only reason why I would ever use a class component is if the job requires me to. I know a lot of developers who share this sentiment as well.

Now, let’s talk about the most important topics and concepts that learners have to know. If you are learning JavaScript, please do not, skip these topics or concepts. They are key to your progression and knowledge of this language. So friends, let’s get into it.

Scope: Scope in simple terms is which function can access what variable. When variables are declared, not all functions will be able to access them depending on the context in which the variable was declared. in JavaScript, there are Global scopes and Local scopes. Global scopes are usually declared outside of the function, so they can be accessible to other functions. Local scope on the other hand is declared inside the function, so it can only be accessible inside the function. Knowing the difference between these two types of scope is a step in the progression.

Functions: Like I always say, everything is a function in JavaScript. Function is a shared term in all programming languages; that is to tell you how they can’t be done without. A Function is a house where all your codes are written, so they can be used later. These codes are designed to perform a particular task, and they can be called a Function when needed. No code can be called on its own, it has to be in a function when the use arises.

Events: I can say most, if not all Functions are triggered in an Event. When you click to submit a form on a website, the Event that happened on that action is an onClick event. There are so many other events in JavaScript that will make programming easier as a learner. Events are the ones responsible for making a website interactive. The type of interactivity the website displays depends on the type of Event that was triggered.

Conditional Statements: These are the logic in your block of code that determines what happens on the browser when an event is triggered. Conditional statements usually contain several logics in codes, where only one logic that meets the condition is triggered. The most popular and widely used Conditional is the if…else statement.

If(condition){

Run this block of code

} else {

Do this instead

}.
Enter fullscreen mode Exit fullscreen mode

There are other conditional statements like the Switch case and the else if conditional which is used along with the if-else when the condition is more than two (2).

Arrays: As a JavaScript developer, you are going to be working with Arrays a lot. Especially when it comes to APIs. You need to know the several Array Methods, how to use them, and the Spread operator. Knowing the several Array Methods, and when and how to use them is very important. There are several Array Methods such as map, filter, sort, some, concat, find, push, pop and a lot more. You can click this https://medium.com/@oluwatrillions/iterating-arrays-b1b869a230cd to understand in detail how some of these array methods work.

The DOM: Understanding that JavaScript can’t work on its own without HTML is a very good foundation to have. HTML is the background king of the internet, JavaScript is only building on it. Everything you see on the browser is over 50% HTML, some CSS and JavaScript. There is a relationship between HTML and JavaScript, and how the latter can access the former’s elements; that relationship is in the DOM. Here https://medium.com/@oluwatrillions/javascript-and-the-dom-72eea6da0443] is a very good article that breaks down the relationship and how JavaScript traverses the DOM.

Synchronous and Asynchronous: Understanding the Synchronous and Asynchronous behavior of JavaScript is very important. The order of the task is not important in an Asynchronous based behavior but it is in a Synchronous based task. In simpler terms, Synchronous runs the task as they are ordered until the whole block of code is completely run, while Asynchronous doesn’t necessarily follow the order. Asynchronous jumps to the next task if one of the tasks is delaying, and then presents the whole of the block of code as they were run.

Promises: This is the method that is used to run Asynchronous operations in JavaScript. When Promise is used in a Function or block of code, it runs the code Asynchronously and then presents the final result, not usually in the order the tasks were written. A Promise either rejects or resolves a block of code.

ES6 Modules: Also known as the JS 2015, these are the latest changes made to the JavaScript module. In the ES6 Module, you learn about the new features in JavaScript such as arrow functions, spread operator, the const and the let keyword, for/of, promises, new array methods such as the findIndex, find, from, key, and also new string methods like includes, startsWith, endsWith, and other new features added.

There are so many other important concepts and topics that need to be known. These are just a bit of them. You can take your time to read about these other outlined concepts:

Fetch()
Memoization
Closures
Higher Order Functions
Async/Await
Value and Reference Types
Call Stack
Recursion
Expression and Statements
This keyword.

Please let me know if this was helpful in your journey to being one of the best developers.

Top comments (0)