JavaScript Guide

Strings and Literals

Strings can be written with single quotes or double quotes. Most of the time it is common to use single quotes for strings however sometimes we will need to use double quotes. Lets see and example of why:

const name = 'Jonas';
const job = 'teacher';
const birthYear = 1991;
const year = 2037;

// Here we will use double quotes since our string contains a single quote
const jonas = "I'm " + name + ', a ' + (year - birthYear) + ' year old ' + job + '!';
// Prints: I'm Jonas, a 46 year old teacher!

Now lets look at template Strings a newer feature to JavaScript as of ES6. Templates strings are notes with backticks: `` and are able to have variables templated into them:

const jonasNew = `I'm ${name}, a ${year - birthYear} year old ${job}!`;
// Prints: I'm Jonas, a 46 year old teacher!

Template Strings even allow us to create multi line Strings:

console.log('String with
multiple
lines');
// Prints: String with
//         multiple
//         lines

If / Else Statements

if/else statements in JavaScript are very similar to most other programming languages:

const age = 19;

if(age >= 16) {
  console.log('Sarah can start driving!');
} else {
  const yearsLeft = 18 - age;
  console.log(`Sarah has ${yearsLeft} to start driving.`);
}
// Prints: Sarah can start driving!

Type conversion and type coercion

Type conversion is when convert the data type of a variable. Lets see an example of this:

const inputYear = '1991'; // Note this is a String
console.log(Number(inputYear)); // Converts String to a Number
// Prints: 1991
// The variable is still a string however

console.log(inputYear + 18);
// Prints: 199118

console.log(Number(inputYear) + 18);
// Prints: 2009

console.log(String(23)); // Converts to a String
// Prints: 23

Type coercion is when we are dealing with two different types in our operators. Lets look at some examples:

console.log('I am ' + 23 + ' years old'); // This is an example of coercion
// Prints: I am 23 years old

console.log('23' + '10' + 3);
// Prints: 23103

console.log('23' / '2');
// Prints: 11.5

Tips

When using math operators like -, *, and / Strings are converted to Numbers and will be used in Math operations, however when using + Numbers will be converted to Strings and will be appended together. Lets see an example:

let n = '1' + 1; // '11'
n = n - 1; // '10'
console.log(n);
// Prints: 10

Truthy and Falsy Values

There are 5 Falsy values in JavaScript: 0, '', undefined, null, NaN (Not a Number). Lets see an example:

console.log(Boolean(0));
// Prints: false
console.log(Boolean(undefined));
// Prints: false
console.log(Boolean('Jonas'));
// Prints: true
console.log(Boolean({}));
// Prints: true
console.log(Boolean(''));
// Prints: false

Equality Operators

In JavaScript there are two main equality operators: == and ===. The difference between them is that the == does type coercion whereas the === does not do type coercion. Lets see an example:

const age = '18';
if (age === 18) console.log('Adult');
// Doesn't print anything
if (age == 18) console.log('Adult');
// Prints: Adult

It is recommended most of the time to use the === so you are in fact getting the exact data type you expect.

Tips

You can also negate both the == operator and the === operator. This can be done like this respectively: != and !==. It is again recommended to use !== to make sure you are getting the exact data type you expect.

Boolean Logic

The most basic boolean logic in JavaScript are the and, or, and not operators. These work in JavaScript like they do in most other programming languages. In JavaScript they are written as follows:

&&: The and operator in JavaScript
||: The or operator in JavaScript
!: The not operator in JavaScript

The switch statement

The switch statement is used when we want to compare a variable against multiple different cases and execute code if it matches a certain case. Lets look at an example of this:

const day = 'wednesday';

switch(day) {
  case 'monday': // day === 'monday'
    console.log('Take notes');
    break;
  case 'tuesday':
    console.log('Cook');
    break;
  case 'wednesday':
  case 'thursday':
    console.log('Work');
    break;
  case 'friday':
    console.log('Play guitar');
    break;
  case 'saturday':
  case 'sunday':
    console.log('Relax');
    break;
  default: // Run this case if value matches no other case
    console.log('Invalid day!');
}
// Prints: Work

Ternary operators

Ternary operators or conditional operator allows us to essentially write an if/else statement in one line. It is denoted with a ?. Lets see an example:

const age = 23;
age >= 18 ? console.log('Of age to drink') :
console.log('Not old enough to drink');
// Prints: Of age to drink

The first statement before the : operator is what gets executed if the expression we are declaring is true whereas the statement after the : operator is what gets executed if our expression is false.

Tips

You can also use ternary operators inline of other functions:

const age = 18
console.log(`I can drink ${age >= 21 ? 'wine' : 'water'}`);
// Prints: I can drink water