Lesson 2: What is JavaScript and How is it Used? #fullstackroadmap

I'm on YouTube

If you get tired of reading...

Here is the YouTube version of this lesson.

Introduction

This is part of my full-stack developer series, where you'll go from never having written a line of code to deploying your first full-stack web application to the internet. Click this link to get an overview of what this series is all about.

Please share this series with the hashtag #fullstackroadmap and help me spread the word!

Useful series links

• Series Table of Contents
• Github Repository - where you'll find all the code we write in this series
• YouTube Playlist
• Series Overview
• 100 Days of Code Challenge - I highly recommend you take this on while reading this series!
• My CodeWars Profile - Follow me and I'll follow you back. This is where we will do our coding challenges throughout the series!
• My Twitter Profile - Where you can stay updated

How to read this lesson

Unlike many of the posts I write, this one is going to be in the form of a detailed Q&A session. I have put the easier questions at the beginning and the harder ones at the end for the dedicated students out there.

What is the point of this lesson?

Context.

In just a few lessons, we will be talking about variables, data types, functions, loops, and much more, so it is important to get the 10,000 foot view of JavaScript before diving into those details.

What is JavaScript?

JavaScript is a programming language. It is unique to other languages like C++, Python, PHP, and others because it is the only language that can run in web browsers (although WASM will change that in the future, but no need to worry about it now).

More specifically, JavaScript is

What is a programming language? Well... That's a bit of a loaded question, so I've saved it for the end of this lesson (scroll down).

What can you do with JavaScript?

If you asked this 20 years ago, you might have been laughed at. Since then, JavaScript has become capable of building complex web applications like Facebook. Here are some other things you can do with JavaScript.

• Run complex machine learning models with TensorFlow.js
• Build Desktop applications like Visual Studio Code (the code editor I am writing this post in right now) with the Electron framework
• Build complex, high-performing web apps like YouTube, Facebook, and Reddit using front-end frameworks like React, Angular, or Vue.
• Convert your web apps into Mobile apps without changing your code using frameworks like ReactNative for React apps and NativeScript for Angular and Vue apps.

Speaking of frameworks...

What is a JavaScript Framework?

A "framework" is nothing more than an abstraction on top of a specific language. In JavaScript, you'll most commonly see front-end development frameworks like React, Angular, and Vue, but frameworks come in all shapes and sizes. There are also back-end frameworks for JavaScript like ExpressJS, or even more abstracted and advanced–NestJS.

When thinking about frameworks, just remember that the goal of a framework is to enable the developer to accomplish something in less time.

You could create Facebook without a framework, but it would take infinitely longer to do, and would be infinitely harder to maintain over the years. Not to mention, smart developers working at Facebook would inevitably get frustrated with how tedious their work was and create a framework to fix it (cough cough, that's how React was built, which is the framework Facebook currently uses).

So in summary, all of these things that we can do with JavaScript these days are enabled by frameworks that have been built over the years.

Is JavaScript similar to Java?

You'll read it all over the internet. Java is to JavaScript as car is to carpet.

While JavaScript was inspired by Java and was originally meant to be a "companion" to Java, the two languages are VERY different.

Here's some Java code.

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

And here's some JavaScript code.

class HelloWorld {
  main() {
    console.log("Hello, World!");
  }
}

These programs do the same thing, but are very different looking.

Is JavaScript better than Python?

The answer to this question is "it depends", which is the answer I would give to any similar question comparing two languages.

If you want to build a complex web app and hire people to work on it and maintain it, I would argue that JavaScript is a better language to write it in. Does this mean that JavaScript performs better? Not necessarily. Does this mean JavaScript is easier to understand? Ehh, Python is WAY easier. The reason I say this is because JavaScript has a large web development ecosystem built around it that Python is slightly lacking in. In other words, the tools required for the job are more mature in the JS web dev ecosystem than the Python web dev ecosystem. You certainly could build a web app using Python (although you still need JavaScript for the front-end), but I would generally not recommend it.

But what if I wanted to build an image recognition API that uses machine learning to grant security access to employees walking into a building? I'd probably go with Python here. The Data Science and Machine Learning ecosystem is primarily centered around the Python programming language and various Python frameworks like Scikit-Learn, Tensorflow, and PyTorch. You could build machine learning apps with JavaScript using TensorflowJS, but overall, the Python communities online (currently) have more collective resources and knowledge about Machine Learning than the JavaScript communities do (although this certainly could evolve and change).

Is JavaScript the same as ECMAScript?

Nope, JavaScript is an implementation of an ECMAScript standard.

This will be easier to discuss with some context, so let's look at a couple examples of "Standards Organizations".

Ever seen a date like this?

2020-12-15T15:17:19.417Z

This is an ISO-8601 formatted datetime represented in UTC time.

The previous sentence has two standards involved.

First, we have the ISO-8601 standard as described by an organization called the International Organization for Standardization, and is a "standardized" way to format a datetime. You can even see this implemented in JavaScript.

const myDate = new Date();
const myDateISO8601 = myDate.toISOSTring();

console.log(myDateISO8601);

Use what you learned in the prior lesson of this series to run this program in the dev tools console!

Second, I mentioned that this date was in "UTC" time, which is a timezone described by a standards organization called the International Telecommunications Union.

How does this have anything to do with ECMAScript?

Organizations like the ones mentioned above are similar to the ECMA International organization which defines the standards for "ECMAScript" programming languages.

Just like an ISO-8601 date is a standard implemented by various programming languages and computers, ECMAScript is a standard implemented by JavaScript (and a few other less popular programming languages like ActionScript and JScript).

Why do we need a standard like ECMAScript?

When I first started learning web development, I had no idea how many standards organizations existed. But why do we have them?

In the case of ECMAScript, this standard is important primarily for browser compatibility. Remember, a web browser is just another computer application, and thus, must be programmed to support various features in JavaScript. The JavaScript language is constantly evolving, and in order for all the browser developers to stay on the same page and make sure that their browser will support these new features, there needs to be a centralized standard to follow.

If ECMAScript did not exist, it would be near impossible for all the different browsers (Chrome, Firefox, Safari, Edge, Brave, and last but very least, Internet Explorer) to stay compatible with new JavaScript features.

Can Learning JavaScript Get You a Job?

If you've read the prior questions, you can probably guess that YES, JavaScript is a very employable coding language.

That said, knowing JavaScript alone will not get you there. You need to learn various JavaScript frameworks like React and Angular used at top companies like Facebook and Google respectively.

Heck, JavaScript is actually the most widely used programming language as of 2020 according to StackOverflow.

Is HTML and CSS Required to Write Javascript?

Yes and no. It depends on where you are writing the JavaScript (which we will talk about later in this post).

In the Browser

The purpose of JavaScript run in the browser is to modify HTML and CSS via the DOM (Document Object Model). Again, we haven't talked about the DOM yet, but will get there soon in this series.

For example, let's say you have a button in your web app that allows you to save your profile image and return to the main screen.

Here is what this button would look like without CSS and without JavaScript.

And here is what this button would look like with CSS, but without JavaScript.

Wait a second... Isn't that the same as the original screenshot? Yes, it is. And that is because JavaScript has nothing to do with the look and feel of a website, but rather the "brains" of the website. If I created this button with just HTML and CSS, when the user clicks the button, their profile will not save. And this is where JavaScript comes to the rescue.

My app has JavaScript written that will listen for a user's click, and once clicked, will grab all the data from the profile page and send it as an API request to the back-end server, which will update the profile data in the database.

As you can see, when talking about JavaScript in the web browser, it must work together with HTML and CSS to create a functional user experience. Without HTML, you have nothing on your web page. Without CSS, you have an ugly web app. And without JavaScript, you have a webpage that is 100% static (i.e. you can't interact with it).

In NodeJS

If you are writing JavaScript on the back-end, HTML and CSS are not required.

Rather than playing nicely with its friends, HTML and CSS, back-end JavaScript will be hanging out with the database, various JS libraries, and APIs. Once again, more on this later in the series.

What is a programming language?

At the beginning of this post, I mentioned that JavaScript is a programming language, but spared you the details until now. If you want to stop reading here, that is fine, but I strongly believe that as a programmer, understanding the following concepts at least at a high-level is important in your full-stack web development career.

I'm generalizing a LOT here, but a programming language is a group of symbols (often called "tokens") that when combined together in a VERY specific way, can be translated into the 1s and 0s that a computer is able to run.

Think about it like this–we have many different spoken languages, and not all languages make sense to all people. If you started speaking Portuguese to me, my brain would simply not be able to process the various words/phrases/symbols that come with this unique language. But if you spoke English to me, my brain is very familiar with the "rules" required to translate all the words/phrases/symbols.

But there is one thing that is common among all people–body language. No matter what country you are from, although I cannot speak your language, I can certainly tell whether you are in distress, whether you are happy, or whether you are excited.

Bring it back to computers now. Every computer has a common language (i.e. "body language"), and that is 1s and 0s (synonymous with "binary" or "machine code").

Computers can't speak JavaScript. Computers can't speak Python. Computers can't speak C++. But if we write a program called a "compiler" to convert those symbols to 1s and 0s, we can translate each of these languages into the "body language" (i.e. 1s and 0s) that all computers can understand.

The remainder of this section is optional reading. To me, it is extremely interesting, but if you are trying to learn web development quickly and get a job ASAP, I suggest avoiding the rabbit hole that the next paragraph will take you down.

My explanation here is extremely simplified, and there are obviously a lot more steps and nuances involved in the process of converting a language like JavaScript into the 1s and 0s that the computer can read. To fully cover this subject, we would have to get into a discussion about syntax analysis (part 1 of the compilation process which includes lexical analysis, parse trees, recursive descent algorithms, etc.) and code generation (part 2 of the compilation process which deals with symbol tables and other fun stuff). Writing a compiler also depends on your target platform; whether you're writing it for a virtual machine or a specific CPU spec. And finally, you have to talk about the process of how all this happens. Does the code get compiled dynamically like JavaScript? Or does it get compiled manually like C, Go, or Rust? If it is compiled "on the fly" like JavaScript, how can we optimize this process to be almost as fast as manual compilation (hint: JIT compilation).

If the prior paragraph interested you despite you not understanding it one bit, I suggest two resources.

1. If you want a hands-on and practical understanding of how code is parsed and compiled (I'm talking SUPER detailed stuff here), check out the book Elements of Computing Systems. You have been warned, this will be a LARGE detour from your full-stack web dev journey, but I personally went on this detour and while it delayed my web dev journey, I came out of it with some serious knowledge that I was pretty pumped about.
2. If you are interested in these low-level topics, but don't care to get your hands dirty and see them in action, I recommend reading the book Code by Charles Petzold. This is no easy read, but will not be as large of a detour as the first option here.

Where does JavaScript code run? (optional)

When we talk about where a programming language runs, we call it a "runtime". JavaScript has two primary "runtimes":

1. In the browser
2. In NodeJS

Again, this gets into the topic of compilers (mentioned in the previous section), so I will keep it brief and high-level.

You know how I mentioned in the previous section that every coding language has a different compiler written for it? Well this is where that comes into play. When running JavaScript in the Google Chrome browser, we need something that will translate that code into machine languages (1s and 0s) that our computer (which runs the browser) can execute. To do this, Chrome uses something called the V8 Engine.

Since we are using Firefox for this full-stack series, I'll mention that unlike Google Chrome, Firefox uses a different JavaScript Engine called SpiderMonkey, which was actually the original JavaScript engine used back in the days of the NetScape browser (side note - if you want an entertaining podcast to listen to, check out Browser Wars).

And for NodeJS? Well, this is a slightly different runtime because it allows JavaScript to run completely separate from a web browser. Nevertheless, NodeJS actually uses the V8 Engine just like Google Chrome does to compile and run JavaScript. NodeJS is written in C++ and leverages the V8 Engine internally. As you might guess, the maintainers of the NodeJS project and the V8 Engine project have become close colleagues over the years considering how popular NodeJS has become.

Next Steps

You are officially two lessons down in the full-stack roadmap series, and we still haven't learned how to write JavaScript. Bummer.

But... I promise you, the context you are getting in these first couple lessons will help you tremendously along the way, so stick with it!

Be sure to get on my email list to receive updates when I post lessons in the future!