This guide builds on the JS fundamentals introduction, and therefore assumes you have a basic understanding and have Node and VS Code installed already, in which case you can start at Chapter 2.
If not however, you'll find the rest of this section covers getting set up and the basic JavaScript syntax.
- Setting Up & Basics
- Functions & Scope
- Working with Arrays
- Working with Objects
- Asynchronous JavaScript
- Destructuring & Spread/Rest
We are assuming that you have Node installed, but if not follow the instructions below.
https://nodejs.org/en/download
Node is a Javascript runtime; we need it to run JS locally when not in a browser.
To run .js files outside of a browser, navigate to the folder in the terminal and type:
node filename.js
to execute the file (replace filename.js with the actual name of your file)
We will use VS Code as our IDE. You can download and install VS Code from here.
- JavaScript
A quick refresher on the basic syntax of JS.
Variables are containers for storing data values in JavaScript. They are declared using keywords like var, let, or const.
// Variable declaration and initialization
var age = 25;
let name = 'John';
const PI = 3.14;
// Variable reassignment
age = 30;Use let and const to declare variables with block scope, rather than var which has function scope.
This helps in preventing unintended variable hoisting and reduces the risk of variable conflicts or unintended side effects.
Use const for variables that are not intended to be reassigned after initialization
JavaScript has several primitive data types, including strings, numbers, booleans, null, undefined, and symbols. It also has complex data types like objects and arrays.
// Primitive data types
let message = 'Hello'; // string
let quantity = 10; // number
let isTrue = true; // boolean
let nothing = null; // null
let notDefined; // undefined
// Complex data types
let person = { name: 'John', age: 30 }; // object
let colors = ['red', 'green', 'blue']; // arrayJavaScript supports various operators for performing operations on data, including arithmetic, assignment, comparison, logical, and more.
// Arithmetic operators
let x = 10;
let y = 5;
let sum = x + y;
let difference = x - y;
let product = x * y;
let quotient = x / y;
let remainder = x % y;
// Assignment operators
let z = 5;
z += 3; // equivalent to z = z + 3
// Comparison operators
let isEqual = x === y;
let isGreater = x > y;
// Logical operators
let andResult = (x > 0) && (y > 0);
let orResult = (x > 0) || (y > 0);if statements are used to make decisions in code based on a condition.
if (condition) {
// code block to execute if condition is true
} else {
// code block to execute if condition is false
}let temperature = 25;
if (temperature > 30) {
console.log("It's a hot day!");
} else if (temperature >= 20 && temperature <= 30) {
console.log("It's a nice day.");
} else {
console.log("It's a cold day.");
}switch statements are used to perform different actions based on different conditions.
switch (expression) {
case value1:
// code block to execute if expression matches value1
break;
case value2:
// code block to execute if expression matches value2
break;
default:
// code block to execute if expression doesn't match any case
}let day = 'Monday';
switch (day) {
case 'Monday':
console.log("It's Monday!");
break;
case 'Tuesday':
console.log("It's Tuesday!");
break;
default:
console.log("It's neither Monday nor Tuesday.");
}The ternary operator (? :) is a concise way of writing if...else statements.
condition ? expression1 : expression2
let age = 20;
let message = age >= 18 ? 'You are an adult' : 'You are a minor';
console.log(message);A for loop is used to execute a block of code repeatedly for a fixed number of times.
for (initialization; condition; increment/decrement) {
// code block to execute
}for (let i = 0; i < 5; i++) {
console.log("Iteration " + (i + 1));
}A while loop is used to execute a block of code repeatedly as long as a condition is true.
while (condition) {
// code block to execute
}let i = 0;
while (i < 5) {
console.log("Iteration " + (i + 1));
i++;
}A do-while loop is similar to a while loop, but it always executes the code block at least once, even if the condition is false.
do {
// code block to execute
} while (condition);let i = 0;
do {
console.log("Iteration " + (i + 1));
i++;
} while (i < 5);Loop control statements are used to alter the normal flow of loop execution. Common loop control statements include break and continue.
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // exit the loop if i equals 5
}
console.log("Iteration " + (i + 1));
}for (let i = 0; i < 5; i++) {
if (i === 2) {
continue; // skip the rest of the loop body if i equals 2
}
console.log("Iteration " + (i + 1));
}In JavaScript, the try and catch statements are used for error handling, allowing you to gracefully handle exceptions (errors) that occur within a block of code.
The try statement is used to enclose the code that you want to monitor for errors. If an error occurs within the try block, JavaScript will stop executing the code in the try block and jump to the catch block.
try {
// Code that may throw an error
} catch (error) {
// Code to handle the error
}The catch statement follows the try block and contains the code that handles the error. If an error occurs within the try block, JavaScript will jump to the catch block and execute the code inside it. The catch block takes one parameter, error, which represents the error object thrown by the try block.
Inside the catch block, you can write code to handle the error in any way you see fit. This might involve logging the error to the console, displaying an error message to the user, or taking some other action to recover from the error.
In addition to try and catch, you can also use a finally block, which follows the try and catch blocks and is executed regardless of whether an error occurs. The finally block is useful for cleanup tasks that need to be performed, such as closing resources or releasing memory.
try {
// Code that may throw an error
} catch (error) {
console.error('An error occurred:', error);
} finally {
// Code that is always executed
}Here's a complete example demonstrating the use of try and catch:
try {
// Code that may throw an error
const result = 10 / 0; // This will throw a division by zero error
console.log('Result:', result);
} catch (error) {
// Code to handle the error
console.error('An error occurred:', error);
}