JavaScript from scratch! Part 1

Just so we are on the same page, what exactly is JavaScript? Hm? Does anybody know? I don't too... So let's take a look at MDN, oh wait you don't know what MDN is? You poor little creatures... Check this out.

MDN Web Docs (previously known as MDN — the Mozilla Developer Network) is an evolving learning platform for Web technologies and the software that powers the Web, including CSS, HTML, and JavaScript.

Okay, let's move on. I bet you feel asleep by now.

MDN's mission is simple: provide developers with the information they need to easily build projects on the open Web. If it's an open technology exposed to the Web, we want to document it.

So MDN is basically a page for getting information on Web APIs and JavaScript is scripting also a programming language that allows you to implement complex features on web pages.

So how JavaScript runs code?

I wonder if fast is a good answer. Apparently no. It executes code from top to bottom. But there are few exceptions, but we are going to talk about it later. And we gonna ignore half of the MDN cause why not

Hoisting - Why are we still crying?

So one of these exceptions is a thing called hoisting. Let's take a look at the example code from MDN!

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

The first line declares a variable called para, then we attach a listener to the para object line 3 and there is a function definition line 5 till the end. If we switch the first and third lines there will be an error with TypeError: para is undefined message. But wait... something is not right, right? What about function? Isn't it used before it's declared?

Well maybe it does, but that's when hoisting comes into place.

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

It's from W3schools, but it explained hoisting pretty straightforward. But wait... Keep reading... Come on, don't be shy! There's one more thing.

The let and const Keywords
Variables defined with let and const are hoisted to the top of the block, but not initialized.

Meaning: The block of code is aware of the variable, but it cannot be used until it has been declared.

Using a let variable before it is declared will result in a ReferenceError.

The variable is in a "temporal dead zone" from the start of the block until it is declared

A quick solution to solve this issue? Use var keyword this time. Okay but let's keep going and just move on with the JS course We will talk about let, const and var later.

Running JavaScript code

If you want to run some simple code you can always use your developer console. On Windows / Linux use the Ctrl + Shift + I shortcut, idk how it's on macOS. There is also another option like Inspect element in your context menu. There are also runtime like Deno or Node.js

That's all for today's post, see you in the next post when we actually start learning to write Javascript code! Stay tuned, for more!