Why You Should Learn Vanilla JS First

Dec 07, 2015

When it comes to front-end web development, JavaScript is one of the most useful programming languages to know. If you want functionality in your websites, it's pretty much required to know at least a little JavaScript. Though it’s become much, much easier to use JavaScript with libraries like jQuery and Underscore, there are still cases where developers can be tripped up by some quirky feature in JavaScript. This is why I’m a believer that developers should know and understand the JavaScript programming language before jumping into the big libraries.

 

Learn the Basics

This part is probably obvious. Before getting to far ahead with theory, the first thing a developer needs to do is get the basics down. Things like variables, functions, arrays and so on are extremely important. It’s also important to know the different ways of doing things. Let’s look at some examples of different ways to do the same things:

// Creating arrays
var arr1 = ['first', 'second'];
var arr2 = new Array('first', 'second');


// Creating objects
var obj1 = {};
var obj2 = new Object();


// Creating functions
var func1 = function(){}; // I'll talk more about this later
function func2(){}

These are just a few examples, but I think my point is clear. There are multiple ways to do things in JavaScript. This comes in handy when you start looking at other people’s code. If you’ve gotten used to creating objects a certain way and all of a sudden you see someone making them a different way, it’ll completely throw you off if you don’t know what you’re looking at. I found myself in a situation like this with if/else statements.

// I always wrote them like this
var equal;
if (5 === 5) {
  equal = true;
} else {
  equal = false;
}


// I was confused by
var equal;
5 === 5 ? equal = true : equal = false;

// Just to be clear, these 2 pieces of code do the exact same thing.

This is why I say learn the basics COMPLETELY.

 

Understanding How JavaScript Works

The next step is to actually understand how JavaScript works under the hood. Remember this from earlier:

// Creating a variable that contains an anonymous function
var func1 = function(){};

// Creating a function
function func2(){}

Although in most cases these two functions will work pretty much the same way, they’re actually quite different. The difference comes from the way JavaScript engines work. Let’s take a look at a case where these functions are actually quite different:

console.log(func1);
console.log(func2);

var func1 = function() {
  return 'Hello from func1.';
}

function func2(){
  return 'Hello from func2.';
}

If you put this code in an HTML document between some script tags and run it in a web browser, what do you think the output will be in the console? I’ll show you:

undefined
function func2(){
  return 'Hello from func2.';
}

Was it what you expected? This has to do with something called hoisting (var statement & function statement) which is explained in the MDN. My goal is not to get too deep into the nitty gritty of how things work, just to show you that sometimes things don’t work the way you might be expecting. Understanding this and all of JavaScript’s other little quirks will make you a much better developer in the long run.

 

Events and the DOM

Once you know how JavaScript works, you need to get an understanding of events and the Document Object Model (DOM). Events are things like when a user clicks on your page, mouses over something, or types something in an input. The browser “listens” for these events and using JavaScript you’re able to do things in response to these events. For example, if you want a user to get a popup when the click a certain button:

<button id="button">Click Me!</button>

 

function popup(){
  alert('I am a popup.');
}

// Here's the DOM and Event code
var elem = document.getElementById('button');
elem.addEventListener('click', popup, false);

This will produce a button on your website. When the user clicks on that button, it will fire the click event for that button, which will in turn call the popup() function. This wasn’t just an example of events, it was also an example of working with the DOM. What I did was I looked over the entire DOM for a specific element that has the id button and saved it to a variable. That was the line:

var elem = document.getElementById('button');

It’s important to understand what’s happening here, because once you start using a library like jQuery with all of the plugins, you’ll start to run into problems in your code that will be difficult to fix if you don’t know what’s going on.

 

JavaScript Libraries and Frameworks (jQuery)

I’m going to focus on jQuery here, but the spirit of this section goes for all the JavaScript libraries and frameworks out there. What exactly is jQuery? According to the website, “jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.”

I’ll be completely honest. jQuery makes building websites with JavaScript much easier. It abstracts a lot of the logic away and lets you do complex operations with just 2 or 3 functions. Let’s take a look at a jQuery solution to the code from the last section, assuming the same HTML:

// We’ll still create this function to keep it separate.
function popup(){
  alert('I am a popup.');
}

// jQuery DOM and Event code
$('#button').click(popup);

This is a tiny example, but even with this you can see how much less code that was. On a larger scale, with 100x more JavaScript, jQuery really comes in handy. What’s most important though is that you understand what happened. It’s pretty much the exact same thing as the previous example. We grab the element on the page with the id button. Then we add the popup function as the response to a click event on that button. Understand that these are just functions (methods on the jQuery object) that you can call. All these functions do is wrap other JavaScript code so that you don’t have to worry about all the legwork. If you have a deep understanding of JavaScript, it’s much easier to debug any errors (and you will have errors) you run into no matter what the library or framework.

 

Wrapping Things Up

Getting that understanding of JavaScript before jumping into something like jQuery is essential. I only showed basic examples, but most projects have much more complicated code. When it comes time to debug, having that deeper understanding of JavaScript will really help you out. A course I highly recommend is JavaScript: Understanding the Weird Parts (https://www.udemy.com/understand-javascript/learn/#/) by Anthony Alicea. Once you’ve learned the basics of JavaScript, this is the course I recommend if you want to deepen your understanding of how JavaScript really works under the hood.