JavaScript Basics

JavaScript is a programming language that runs in web browsers and on servers. It is the only language supported natively in all major browsers, making it essential for web development. Developers use it for interactive front-ends, server-side APIs with Node.js, and command-line tooling.

I. Syntax

1. Semicolons

In JavaScript, statements are typically ended with a semicolon. JavaScript does have a feature called Automatic Semicolon Insertion (ASI) that can add them for you, but relying on it can cause subtle bugs in certain situations. The safer habit is to add them yourself.

const x = 2;
console.log(x);

Statements that define a block (functions, if statements, loops) do not need a semicolon after the closing brace.

function hello() {
  console.log('Hello');
} // no semicolon needed here

if (x > 1) {
  console.log('Greater than one');
}

2. Curly braces

Curly braces serve two purposes in JavaScript: they define code blocks (functions, conditionals, loops) and they define object literals.

// function
function hello() {}

// if statement
if (condition) {
  // code...
}

// loop
for (let i = 0; i < 3; i++) {
  // code...
}

// object
const obj = { key: 'value' };

3. console.log

console.log() prints values to the browser console or terminal. It is your most useful debugging tool.

console.log('hello');        // hello
console.log(42);             // 42
console.log(true);           // true
console.log([1, 2, 3]);      // [1, 2, 3]

Open the browser console with F12 (or Cmd+Option+I on Mac) to see the output.

4. Comments

Comments let you explain code or temporarily disable a line. JavaScript ignores them when running.

// This is a single-line comment

/*
  This is a
  multi-line comment
*/

5. JavaScript is case-sensitive

firstName and firstname are two different things. Capitalisation matters for variable names, function names, and keywords.

II. Template literals

Template literals are a modern way to build strings. Use backticks instead of quotes, and embed expressions with ${}.

const name = 'Anna';
const age = 28;

// Old way
console.log('My name is ' + name + ' and I am ' + age);

// Modern way with template literals
console.log(`My name is ${name} and I am ${age}`);

Template literals also support multi-line strings without any escape characters:

const message = `Hello ${name},
Welcome to Dev Handbook.`;

III. Arithmetic operators

Arithmetic operators perform maths on numbers.

  • + addition
  • - subtraction
  • * multiplication
  • / division
  • % modulo (remainder after division)
  • ** exponentiation (ES2016)
console.log(10 + 3);  // 13
console.log(10 - 3);  // 7
console.log(10 * 3);  // 30
console.log(10 / 3);  // 3.333...
console.log(10 % 3);  // 1
console.log(2 ** 8);  // 256

IV. Comparison operators

Comparison operators return true or false.

  • > greater than
  • < less than
  • >= greater than or equal to
  • <= less than or equal to
  • === strictly equal (same value and same type)
  • !== strictly not equal

Always use === and !== rather than == and !=. The double-equals versions do type coercion and can produce surprising results.

V. Logical operators

  • && and (both conditions must be true)
  • || or (at least one condition must be true)
  • ! not (flips true to false and vice versa)
const isAdult = true;
const hasTicket = false;

console.log(isAdult && hasTicket); // false
console.log(isAdult || hasTicket); // true
console.log(!isAdult);             // false

The <script> tag loads JavaScript into an HTML page. You can link an external file or write JavaScript directly inside the tag.

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="./script.js" defer></script>
</head>

Scripts are loaded in the order they appear, so if one script depends on another, place the dependency first.

The defer attribute

defer tells the browser to download the script in the background and run it after the HTML has finished parsing. This is the recommended approach for most scripts because it avoids blocking the page load.

<script src="app.js" defer></script>

The async attribute

async downloads the script in the background and runs it as soon as it is downloaded, without waiting for the rest of the HTML to parse. Use async for independent scripts (analytics, ads) that do not depend on other scripts or the DOM.

<script src="analytics.js" async></script>