From beginner to JavaScripter

In this series of tutorials, you will learn JavaScript in a practical way by doing projects and challenges.

In this chapter, you will learn the basics of JavaScript.

It is not necessary that you have anything installed in this part, but in the following parts you will need a text editor, like NeoVim or VSCode, installed and Node.js.

You can execute the code from this article in your browser's console.

Variables

A variable is a place that you can assign to a certain value.

A constant is the same but cannot be reassigned.

We can initialize and assign a value to a constant variable like this:

const numberEight = 8;

Let's break this snippet in parts:

• const: Stands for constant, is a keyword to define a variable that cannot change

• numberEight: The name of the constant

• = 8: We use the = symbol to assign, and 8 as the value assigned

Resuming all the lines you are basically initializing a constant and assigning it the value of 8, which is of type number.

If you want a variable that can change you would use the keyword let, instead of const. Example:

let myFavoriteWord = "Pizza";

Here we are initializing a variable that may change in the future and assigning it the value of "Pizza", which is of type string.

Now that you know what is a variable and how to assign one, let's talk about the most common types on JavaScript.

Basic Types

A type is a classification or categorization of a value.

Every variable, no matter if it's defined with let or const, has a type.

The basic types are:

• number

It can be any number minor to 9007199254740991.

E.g:

const decemberNumberMonth = 12;

• string

It can be any text.

E.g:

const myName = "John Doe";

• boolean

It can be true or false.

E.g:

const iLikePizza = true;

• array

Although this is technically not a type in JavaScript, an [] or new Array() it's of type object, I'm considering it a type for educational reasons.

E.g:

const coolNames = ["Dayah", "Pedro", "Dazai", "Atsushi"];

You can put any type inside an array, even other array:

const arrayOfArrays = [["Hello", "World"], false, 89, [true, false]];

Functions

A function is a self-contained block of code, that may receive elements, if specified, and may return something.

There are some globally scoped functions, which means that you can use it anywhere, that are already defined. E.g:

• parseInt

• encodeURI

• eval

• etc

Depending on where you are running JavaScript there are going to be different globally scoped functions, for example, the prompt function doesn't exist on Node.js while in Deno or the browser it exists.

Node.js and Deno are runtimes for JavaScript, I will explain more in-depth this later, but basically we use them to execute JavaScript outside the browser.

If you want to print a value or a variable in the console, you need to use the console.log() function.

E.g:

const helloWorld = "Hello World";
console.log(helloWorld);

You can also define your own function, for example:

function sum(numberOne, numberTwo) {
  const numberOnePlusNumberTwo = numberOne + numberTwo;
  return numberOnePlusNumberTwo;
}

Again let's break this snippet into parts:

1. You start with the function keyword to tell JavaScript that what follows is a function.

2. We open { at the beginning of the function and } at the to define the range of the block.

3. We store the value of numberOne plus numberTwo in the numberOnePlusNumberTwo constant.

4. We use the return keyword to return the numberOnePlusNumberTwo value as result of the function

Congratulations! You have written your first function in JavaScript, so far you learned about variables, data types, and functions.

Here is an example using all we have used until the moment:

function sum(numberOne, numberTwo) {
  const numberOnePlusNumberTwo = numberOne + numberTwo;
  return numberOnePlusNumberTwo;
}

const myFavoriteNumber = sum(3, 4);

console.log(myFavoriteNumber);

This is the first part of a series of tutorials, don't forget to follow me on Twitter and Reddit as UltiRequiem to know when the the next part comes out.