JavaScript from scratch! Part 1
Tags: javascript, tutorial
Published: 2021-01-25 10:10:28

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](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript), oh wait you don't know what MDN is? You poor little creatures... Check [this out](https://developer.mozilla.org/en-US/docs/MDN/About).

> 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!

```js
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](https://www.w3schools.com/js/js_hoisting.asp), 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](https://deno.land/) or [Node.js](https://nodejs.org/en/)

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!