Master these JavaScript Fundamentals to Land Your Next Job

We're going to learn about JavaScript concepts that could significantly help you get your next job — from closures to array methods, you'll learn what JavaScript concepts you should master to land a new job.

In this article, we’re going to learn more about the JavaScript fundamentals that you should know before applying for your next job. These tools will leverage your existing JavaScript skills to improve your code, making you a better developer. We’re going to cover some of the basics like value and reference types, and go on to cover some more advanced concepts, such as high order functions.

Whether you’re already working with JavaScript, or you’re still studying and learning more about this fantastic programming language, you might have noticed something: There’s always something new to learn about it.

JavaScript has been one of the most important programming languages for some years now, and the numbers of developers and jobs available are growing very fast day after day. That leads to more code written, more frameworks and libraries created, more patterns and concepts created by developers, and also to more things to study every single day. In fact, one of the most required skills to be a successful developer is the ability to learn something new each day.

There’s no recipe or guide that every JavaScript developer should go through to be a master of this programming language, but we can go over some concepts or fundamentals that are widely used today and start to learn them, with the intent to master them and become a better JavaScript developer. Let’s get started and learn about those fundamentals.

Value and Reference Types

Some of the most important things in JavaScript, and something a lot of developers can’t distinguish between, are value and reference types. In JavaScript, we have five primitive types: String, Number, Boolean, null, and undefined. When we create a variable and pass one of those types to that variable, we’re passing that type to that variable by value.

    var myName = “Leonardo”;
    var myAge = 22;

When we pass that variable to another variable, we’re copying it by value.

    var myName = “Leonardo”;
    var name = myName;

As you may know, JavaScript is an object-oriented programming language, so everything in JavaScript is an object unless it’s one of those primitive data types above. The difference between value and reference types is: Primitive data types are passed by value, while objects are passed by reference.

So that means that when you create a variable by value, and you modify that variable value, you’re changing the actual value stored in that variable. And when you’re changing an object, you’re modifying the reference to that object, not the actual object itself.

    var person = { 
     name: “Leonardo”
    };

    var otherPerson = person;

In the example above, we have an object called person which holds an object, and we created a new object called otherPerson to which we assigned the person object. Now, both variables are referencing the same object, which means if we change the value of the object, both variables will change.

How the DOM Works

Browsers are one of the most central elements in web development. We’ve always been willing to create, modify and improve our ways to develop web applications, so we can get a lighter and faster application running, benefiting our user. To do that, you need to know how the DOM works under the hood, and what’s happening in your browser when you’re entering a website.

We can use JavaScript to manipulate the DOM, and before the invention of some awesome frameworks and libraries that we have today like React, Vue, and Angular, we used a lot of vanilla JavaScript or even jQuery to do that work for us. For example, if we have a div with id="container", we would execute the following code to get that specific element:

    var myDiv = document.getElementById("container");

One of the things that you should know clearly is: JavaScript is just the language that we use to manipulate the DOM; the DOM is the element tree that our browser creates when it loads a page.

This is only one of the many ways that we can iterate in the DOM with vanilla JavaScript. Before we had so many tools and support for web development technologies like jQuery and MooTools were widely used.

Array Methods (map, filter, reduce)

In your applications, you certainly will deal with a lot of arrays, so iterating with them should be no problem for you. You should know at least how to iterate with them using some powerful array methods like map, filter, and reduce. These particular array methods are very powerful because, given an initial array, we can change it into something else while keeping the original list intact. That’s a really nice point and one of the reasons why they’re widely used, so let’s learn the differences between them.

.map

This method takes an array and creates a new array with the results of calling a provided function on every element in the calling array. For example, let’s imagine that we have an array of numbers, and we want to return a new away multiplying all numbers by 2. This is how we would do it:

    const arr = [10, 20, 30, 40, 50];

    const newArr = arr.map(number => number * 2);

    console.log(newArr)
    // [20, 40, 60, 80, 100]

.filter

This method’s pretty similar to the .map method. It also returns a new array with that same original array list intact, but the difference here is just this: it removes elements based on a condition. For example, let’s imagine that we have an array of names, and we want to remove and return the element equal to “Leonardo”. This is how we would do it:

    const names= ["Ramon", "Renato", "Jason", "Leonardo"];

    const newNames = names.filter(name => name === "Leonardo");

    console.log(newNames)
    // ["Leonardo"]

.reduce

Of the three methods, this is the most complex and the one that a lot of developers don’t understand, but when you pay attention and use it one time, you’ll never forget. This method simply applies a function across the whole array and returns a single value.

    const arr = [10, 20, 30, 40, 50];

    const newArr = arr.reduce((previous, curr) => previous + curr);

    console.log(newArr)
    // 150

Closures

Whenever we declare a new function in JavaScript, we create a new function scope. For example, let's imagine that we have a function called sayMyAge, and inside that function, we have a year variable that refers to the actual year and a variable called myAge that is the age calculated.

    function sayMyAge(yearOfBirth: number) {
     const year = 2020;
     const myAge = year — yearOfBirth;
     return `Your age is: ${myAge}`;
    };

Since this function has its own scope, and as we know in JavaScript all the variables and functions that we have inside a function will belong to that function, if we try to call it outside of our function, we’re going to receive an error.

    console.log(year); // ReferenceError
    console.log(myAge); // ReferenceError

We're receiving this error because these variables are not available to the global scope, only to a function scope, in our case, the sayMyAge function scope. Basically, a closure gives you access to an outer function’s scope from an inner function.

.apply, .call and .bind

At this point, you might know that functions are objects in JavaScript, so we can benefit from them using these three methods to control the invocation of a function. The apply and call methods are pretty similar— we can use them to "borrow" methods and for setting the this value explicitly.

.call

    const me = { 
      name: “Leonardo“ 
    };

    function greeting(param1, param2) {
      return `Hello ${param1}, you're ${param2} years old`;
    }

    console.log(greeting.call(me,"Leonardo","22"));

What's happening here is that the first parameter of the call method sets the this value, which is the me object that we created first. The rest of the parameters are the arguments to the actual function that we created.

.apply

Although similar to the call method, the apply method, instead of passing the parameters in a comma-separated format, passes them as an array after the context object. This is an example of the apply method:

    const me = { 
      name: “Leonardo“ 
    };

    function greeting(param1, param2) {
      return `Hello ${param1}, you're ${param2} years old`;
    }

    console.log(greeting.apply(me, ["Leonardo","22"]));

.bind

Normally, we use the bind method to call a function with the this value set explicitly. It easily allows us to set which specific object will be "bound" to the this value when a function is invoked.

    const me = { 
      name: “Leonardo“ 
    };

    function greeting(param1, param2) {
      return `Hello ${param1}, you're ${param2} years old`;
    }

    const myBind = greeting.bind(me);

    console.log(myBind("Leonardo", "22"));

High Order Functions

This is a concept that some developers struggle to learn, even though they use it very often in their code — they just might not be able to explain exactly how it works. Basically, a higher-order function is a function that can either accept another function as a parameter or one that returns a function as a result.

For example, the map, filter and reduce methods that we learned a few moments ago are some built-in high order functions in JavaScript. Let's imagine that we have an array of numbers, and we want to multiply each number of that array by two.

    const arr = [1, 2, 3, 4]

    const newArr = arr.map(number => number * 2);

As we know, the map method receives a function as a parameter — that's the whole definition of a high order function. You might have been using them every day in your code without even realizing it.

Hoisting

This is one of the beauties of JavaScript, a thing that we don’t have in a lot of programming languages, but we do have in JavaScript and it makes a lot of difference in our applications, without us noticing it. Hoisting in JavaScript is a mechanism where our variables and functions are moved to the top of their local scope if they were declared inside a function, or to the top of their global scope if they were declared outside of a function. This happens after JavaScript compiles all of your code.

So for example, let’s imagine that we have a variable called name, which is a string, and before the declaration of that variable, we want to console that variable. What would be the response?

    console.log(name) // undefined
    const name = "Leonardo";

It returns undefined to us because the trick here is: the only thing that’s moved to the top of the scope is the variable declaration, not the value of the variable, so when we try to access the value of the variable, it returns undefined.

This is pretty powerful and changes a lot of things in our code, and you should know how it can affect your code and how to deal with it. There are also some tricks related to the var, let, and const that you should know, for example, var declarations can be accessed from outside of their initial scope, whereas declarations made with let and const are not.

Conclusion

In this article, we learned some JavaScript fundamentals, concepts, and patterns that are widely used nowadays by a lot of companies and developers. We covered some nice fundamentals such as variable and reference types, and we learned about closures and high order functions. The whole idea here is just to give you a path that you can follow to become a better developer, but reminding you that there are a lot of other concepts and fundamentals that you could learn about that aren’t covered in this article. So, feel free to seek them out, and don’t stop learning!

Let’s master JavaScript! Thanks for reading.