JavaScript

It’s pretty wise for you to start in JavaScript because it gives you a lot of flexibility to learn both the frontend (client side) and backend (server side). Let’s go.

Runtimes

Like other languages, there are a few “runtimes” or “programs that can run JS”. For example, Python has the normal python and the fast pypy. C++ has clang and g++.

JS has node, deno, and more recently, bun.

• Node

  Node is usually what everyone uses. It’s the most stable and most frameworks requires you to use Node. Node forces you to install packages when you need to use them. A lot like python. When you want to use some package your friend made, you have to use a package manager to install it before using it, which is actually the “normal” way of doing things.

• Deno

  Deno is an alternative TO Node. Meaning you use it instead of Node. It’s a lot newer than Node, and is faster too. Deno doesn’t require you to download packages like Node does. If you want to use some package your friend made, you can just import the URL instead of downloading it. You run your program, and it just… works. Deno can run TypeScript out of the box. No configuration, no nothing. You can just run it. It’s a good way to get into TypeScript and async/await.

• Bun

  Bun came out last year and is the fastest. It’s also the most unstable and least usable. So it’s good to keep an eye on Bun, but don’t rush to use it.

So you might want to install Node to get the hang of JS and start working on meta-frameworks like React, Vue, etc. And install Deno to start learning TS without worrying about configs.

Installing

We’ll be using Deno for this introduction, and Node for later projects. So go install them both.

First, check if you have Node installed by typing:

node -v
# or you can do
node --version

If you don’t have node, go here: https://nodejs.org/en/

Then check if you have Deno installed by typing:

deno -V
# or you can do
deno --version

If you don’t have deno, go here: https://deno.land/

Print

The way we output stuff to the terminal/console is by using the console object. For now, we’re only gonna use its log method.

console.log("Hey");

Variables

There are 2 types. let and const.

• let

  This one lets us reassign its value.

let x = 5;
x = 10;

• const

  This one doesn’t let us reassign its value.

const x = 5;
x = 10; // not possible

Some common misundestandings

When working with arrays, sets, maps, and objects, it is common to set these to const instead of let.

• Arrays

const arr = [];
arr.push(1); // good
arr.push(2); // good
arr = [5, 6]; // not possible

• Sets

const set = new Set();
set.add(1); // good
set = new Set(); // not possible

• Maps

const mp = new Map();
mp.set("one", 1); // good
mp = new Map(); // not possible

• Objects

const obj = {};
obj.name = "Bob"; // good
obj = { name: "Adam" }; // not possible

So… what const doesn’t allow us to do is reassign. Meaning you use an equal sign to do something. But when it comes to number, strings, and booleans, const means that the variable is read-only.

Recap

When working with numbers, strings, and booleans, const makes them a read-only variable, but when working with arrays, sets, maps, and objects, const just means you can’t use an equal sign to change their value.

If else

This is how you use it:

if (someCondition) {
  // do something
} else {
  // do something
}

If you have more than 2 conditions:

if (someCondition) {
  // do something
} else if (someOtherCondition) {
  // do something
} else if (someOtherOtherCondition) {
  // do something
} else {
  // do something
}

A condition can be anything that returns a boolean value (true / false). We often use comparison operators for these. There are a few of them.

== and === (equals to)

The == operator only checks the value, and not the type.

Meaning that this will print “they are equal”.

const x = "1";
const y = 1;
if (x == y) {
  console.log("they are equal");
}

What === does is check the type as well.

Since x is a string, and y is a number, this will not print anything.

const x = "1";
const y = 1;
if (x === y) {
  console.log("they are equal");
}

!= and !== (not equals to)

Same thing as above, != only checks values, !== checks types as well.

So this won’t print anything:

const x = "5";
const y = 5;
if (x != y) {
  console.log("they are different");
}

This will print “they are different”:

const x = "5";
const y = 5;
if (x !== y) {
  console.log("they are different");
}

and then the rest are > (greater than), < (less than), >= (greater than or equal to), and <= (less than or equal to). These do not check types, so be careful.

const x = "10";
const y = 10;
if (x >= y) {
  console.log("X is greater than or equal to Y");
}

Tip

You can also put these conditions in a variable to make it easy to read.

const age = 21;
const isLegal = age >= 18;
if (isLegal) {
  console.log("my guy is legal");
} else {
  console.log("no drinking pls");
}

You can also use the ! (not) operator to invert a condition.

const age = 21;
const isLegal = age >= 18;
if (!isLegal) {
  console.log("no drinking pls");
} else {
  console.log("my guy is legal");
}

You can also use the && (logical and) operator and || (logical or) operator to combine conditions.

&& returns true if and only if both conditions are true. || returns true if one or both of the conditions are true.

true && true returns true

true && false returns false

true || true returns true

true || false returns true

const age = 21;
const isUnderTwenty = age < 20;
const isAboveTwelve = age > 12;
const isTeen = isUnderTwenty && isAboveTwelve;

if (isTeen) {
  console.log("my guy is a teenager");
}

const x = 1;
const y = -2;
if (x > 0 || y > 0) {
  console.log("one of them is positive");
} else {
  console.log("none of them is positive");
}

Loops

There are 2 loops — for and while.

You can do what for loops can do with a while loop and vice versa, but in time, you’ll automatically see which loop is better for the situation you’re in.

A good starting point is this:

• For loops are good if you know exactly how many times you want to repeat something. (e.g. print something 4 times, sum up a list of 20 numbers)

• While loops are good if you have a condition that you have to break. (e.g. go up until you see a broken window, stop when you see a blue house)

For loops

The syntax goes like this:

for (declare a variable; stop condition; what to do after each iteration) {
  // do something
}

Print the numbers 1 to 3.

for (let i = 1; i <= 3; i++) {
  console.log(i);
}

The variable declared in for loops will only be available to access inside the loop.

let total = 0;
for (let i = 0; i < 2; i++) {
  total += i;
  console.log(i); // good
}
console.log(total); // good
console.log(i); // doesn't work

You can also keep the stop condition empty to make the loop run forever.

A dumb but useful application of this concept is “print all the even numbers in existence”.

for (let num = 2; ; num += 2) {
  console.log(num);
}

You can also declare multiple variables and do more than 1 thing after each iteration.

Print the numbers 1 - 50 and 100 - 51 at the same time:

for (let i = 1, j = 100; i < j; i++, j--) {
  console.log(i, j);
}

While loops

The syntax goes like this:

while (condition) {
  // do something
}

As long as the condition is true, the loop will keep running.

So you can do this to make a while loop run forever:

while (true) {
  // do something
}

Print the numbers 1 - 10:

let i = 1;
while (i <= 10) {
  console.log(i);
  i++;
}

Print all the even numbers in existence:

let num = 2;
while (true) {
  console.log(num);
  num += 2;
}

Print the numbers 1 - 50 and 100 - 51 at the same time:

let i = 1;
let j = 100;
while (i < j) {
  console.log(i, j);
  i++;
  j--;
}

Functions

Functions are basically reusable pieces of code. It’s an alternative to copy-pasting your code.

There are 2 ways to declare functions in JS:

• “normal” function

function functionName(parameter1, parameter2) {
  // do something
}

• arrow function

const functionName = (parameter1, parameter2) => {
  // do something
};

Let’s say we have to make a program that says “Hello name, welcome to paradise!“.

If we only need to say it to Bob, we write it like this:

console.log("Hello Bob, welcome to paradise!");

But what if we want to say it to Bob, Alice, Chris, and Daphne?

We can obviously write it like:

console.log("Hello Bob, welcome to paradise!");
console.log("Hello Alice, welcome to paradise!");
console.log("Hello Chris, welcome to paradise!");
console.log("Hello Daphne, welcome to paradise!");

But we have to change the string manually every time.

So we should write a function that does that for us.

function sayHello(name) {
  console.log("Hello " + name + " welcome to paradise!");
}

// or with arrow function syntax

const sayHello = (name) => {
  console.log("Hello " + name + " welcome to paradise!");
};

sayHello("Bob");
sayHello("Alice");
sayHello("Chris");
sayHello("Daphne");

We can even make it more readable by using template strings / fstrings.

function sayHello(name) {
  console.log(`Hello ${name} welcome to paradise!`);
}

sayHello("Bob");
sayHello("Alice");
sayHello("Chris");
sayHello("Daphne");

The sayHello function is what we call a void function. Meaning that it doesn’t have a return value.

Sometimes, we would want a function to return a value for us to keep in variable to use later. An example for this is a function that calculates the average of 2 numbers.

function getAverage(a, b) {
  console.log((a + b) / 2);
}

// or with arrow function syntax

const getAverage = (a, b) => {
  console.log((a + b) / 2);
};

This is good if you just want to display the average of 2 numbers. But what if you want to the get the average of x and y + the average of y and z?

function getAverage(a, b) {
  return (a + b) / 2;
}

const x = 2;
const y = 3;
const z = 4;

const total = getAverage(x, y) + getAverage(y, z);

If the return statement is just 1 line like the code above, an arrow function can do what we call an implicit return, which is a a return without typing the word return.

const getAverage = (a, b) => {
  return (a + b) / 2;
};

// or if u use implicit return:
const getAverage = (a, b) => (a + b) / 2;

// i typed: const getAverage = (a, b) => ((a + b) / 2);
// but if your editor has a formatter, it will remove the ()

const x = 2;
const y = 3;
const z = 4;

const total = getAverage(x, y) + getAverage(y, z);

The arrow function syntax is used a lot more in web dev than the normal functions, but there are different use cases for each one. You’ll be fine if you use the arrow syntax every time, but there are times where you should use the normal syntax. You’ll know when to use each one once you code a lot more.