JavaScript Basics

Comment Code

There are two ways to write comments in JavaScript:

Using // will tell JavaScript to ignore the remainder of the text on the current line. This is an in-line comment:

JavaScript
// This is an in-line comment.

You can make a multi-line comment beginning with /* and ending with */. This is a multi-line comment:

JavaScript
/* This is a
multi-line comment */

Variables

Variables are used to store data values. JavaScript variables can hold any data type, and their values can be changed during runtime. In this guide, we'll cover everything you need to know about variables in JavaScript.

Variable Declaration

In JavaScript, variables are declared using the let, const, or var keyword, followed by the variable name. For example:

JavaScript
let x;
const y = 10;
var z = "hello";

• The let keyword is used to declare a variable that can be reassigned a new value.
• The const keyword is used to declare a variable that cannot be reassigned a new value once it has been assigned.
• The var keyword is the old way of declaring variables in JavaScript, but it still works. However, let and const are preferred because they have block scope.

Variable Naming

In JavaScript, variable names must begin with a letter, underscore (_), or dollar sign ($). After the first character, variable names can also contain numbers. Variable names are case-sensitive, so myVar and myvar are two different variables.

It's important to choose meaningful variable names that describe the data they store. For example:

JavaScript
let firstName = "John";
const age = 30;
var isStudent = true;

Variable Assignment

Variables in JavaScript can be assigned a value using the assignment operator (=). For example:

JavaScript
let x;
x = 5;

Variables can also be declared and assigned a value in the same statement:

JavaScript
let y = 10;
const message = "Hello, world!";
var z = true;

Multiple variables can be declared and assigned values in a single statement, using commas to separate them:

JavaScript
let a = 1, b = 2, c = 3;

Data Types

Operators

JavaScript operators are symbols used to perform operations on values and variables. They allow you to manipulate data, compare values, and perform mathematical operations, among other things. Here's an overview of the different types of operators in JavaScript:

Arithmetic Operators

Arithmetic operators perform basic mathematical operations:

• + : Addition
• - : Subtraction
• * : Multiplication
• / : Division
• % : Modulus (remainder)
• ++ : Increment
• -- : Decrement

JavaScript
let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1

Comparison Operators

Comparison operators compare two values and return a boolean result (true or false):

• ==: Equal to
• ===: Strictly equal to (equal value and equal type)
• !=: Not equal to
• !==: Not strictly equal to (different value or different type)
• >: Greater than
• <: Less than
• >=: Greater than or equal to
• <=: Less than or equal to

JavaScript
let x = 5;
let y = "5";

console.log(x == y);  // true
console.log(x === y); // false
console.log(x != y);  // false
console.log(x !== y); // true

Logical Operators

Logical operators are used to combine multiple conditions:

• &&: Logical AND
• ||: Logical OR
• !: Logical NOT

JavaScript
let a = true;
let b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a);     // false

Assignment Operators

Assignment operators are used to assign values to variables:

• = : Assign
• += : Add and assign
• -= : Subtract and assign
• *= : Multiply and assign
• /= : Divide and assign
• %= : Modulus and assign

JavaScript
let x = 10;

x += 5; // x = x + 5; -> x = 15
x -= 3; // x = x - 3; -> x = 12
x *= 2; // x = x * 2; -> x = 24
x /= 4; // x = x / 4; -> x = 6
x %= 5; // x = x % 5; -> x = 1

String Operators

The + operator can be used to concatenate strings:

JavaScript
let firstName = "John";
let lastName = "Doe";

console.log(firstName + " " + lastName); // "John Doe"

The += operator can also be used for string concatenation:

JavaScript
let fullName = "John";
fullName += " Doe";

console.log(fullName); // "John Doe"

Control Structures

Control structures are essential elements in programming languages that allow you to control the flow of your code based on certain conditions or to perform repetitive tasks. In JavaScript, there are several control structures you should be familiar with:

If Statement

The if statement is used to execute a block of code if a specified condition is true:

JavaScript
let age = 18;

if (age >= 18) {
  console.log("You are an adult.");
}

If-Else Statement

The if-else statement is used to execute one block of code if a condition is true and another block of code if the condition is false:

JavaScript
let age = 16;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are not an adult.");
}

else-If Statement

The else-if statement is used to test multiple conditions and execute different blocks of code based on the first true condition:

JavaScript
let grade = 85;

if (grade >= 90) {
  console.log("You got an A.");
} else if (grade >= 80) {
  console.log("You got a B.");
} else if (grade >= 70) {
  console.log("You got a C.");
} else {
  console.log("You did not pass.");
}

Switch Statement

The switch statement is used to perform different actions based on the value of a variable or expression:

JavaScript
let day = 3;

switch (day) {
  case 0:
    console.log("Sunday");
    break;
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  default:
    console.log("Invalid day");
}

In this example, the switch statement checks the value of the day variable and executes the corresponding console.log() statement for the matching case. The break keyword is used to exit the switch statement once a match is found. The default case is executed if none of the other cases match.

For Loop

The for loop is used to repeatedly execute a block of code for a specified number of iterations:

JavaScript
for (let i = 0; i < 5; i++) {
  console.log(i);
}

In this example, the for loop iterates 5 times (from i = 0 to i < 5). The i++ statement increments the value of i by 1 after each iteration.

While Loop

The while loop is used to repeatedly execute a block of code as long as a specified condition is true:

JavaScript
let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

In this example, the while loop continues to execute the block of code until the value of i is no longer less than 5.

Do-While Loop

The do-while loop is similar to the while loop, but it guarantees that the block of code is executed at least once, even if the condition is false from the start:

JavaScript
let i = 5;

do {
  console.log(i);
  i++;
} while (i < 5);

In this example, the do-while loop executes the block of code once, even though the value of i is not less than 5.

For-In Loop

The for-in loop is used to iterate over the properties of an object, allowing you to access the property names and values:

JavaScript
let person = {
  name: "John",
  age: 30,
  city: "New York",
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

In this example, the for-in loop iterates over the properties of the person object and outputs both the property name (key) and the corresponding value (person[key]).

For-Of Loop

The for-of loop is used to iterate over iterable objects such as arrays, strings, and other collections:

JavaScript
let fruits = ["apple", "banana", "orange"];

for (let fruit of fruits) {
  console.log(fruit);
}

In this example, the for-of loop iterates over the elements of the fruits array and outputs each element.

Break Statement

The break statement is used to exit a loop or switch statement before the loop/switch is completed:

JavaScript
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

In this example, the break statement exits the for loop when the value of i reaches 5, so the loop only outputs numbers from 0 to 4.

Continue Statement

The continue statement is used to skip the current iteration of a loop and continue with the next iteration:

JavaScript
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}

In this example, the continue statement skips the current iteration when the value of i is even, so the loop only outputs odd numbers from 1 to 9.

Data structures

JavaScript offers various data structures to store and manipulate data.

Objects

Objects in JavaScript are collections of key-value pairs, where keys are strings (property names) and values can be any data type, including other objects or functions. Objects can be created using the object literal syntax:

JavaScript
let person = {
  name: "John",
  age: 30,
  greet: function () {
    console.log("Hello, my name is " + this.name);
  },
};

console.log(person.name); // "John"
person.greet(); // "Hello, my name is John"

In this example, the person object has three properties: name, age, and greet. You can access the object properties using the dot notation (person.name) or the bracket notation (person['name']).

JavaScript
console.log(person.name); // "John"

JavaScript
console.log(person["name"]); // "John"

let propertyName = "age";
console.log(person[propertyName]); // 30

let dynamicProperty = "na" + "me";
console.log(person[dynamicProperty]); // "John"

JavaScript
person.country = "USA";

JavaScript
person.age = 31;

JavaScript
delete person.age;

JavaScript
let keys = Object.keys(person);
let values = Object.values(person);

for (let i = 0; i < keys.length; i++) {
  console.log(keys[i] + ": " + values[i]);
}

let entries = Object.entries(person);

for (let [key, value] of entries) {
  console.log(key + ": " + value);
}

JavaScript
const person = { firstName: "John", lastName: "Doe", age: 30 };
console.log(person.hasOwnProperty("firstName")); // true
console.log(person.hasOwnProperty("middleName")); // false

Arrays

Arrays are special objects used to store collections of values in an ordered list. Arrays are zero-indexed, and you can access elements in an array using their index number:

JavaScript
let fruits = ["apple", "banana", "orange"];

console.log(fruits); // "apple"
console.log(fruits); // "orange"

Arrays have various built-in methods to manipulate their elements.

JavaScript
fruits.push("grape"); // ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry"); // ["strawberry", "apple", "banana", "orange"]

JavaScript
fruits.pop(); // ["apple", "banana"]
fruits.shift(); // ["banana", "orange"]

JavaScript
fruits.reverse(); // ['orange', 'banana', 'apple']
fruits.sort(); // ['apple', 'banana', 'orange']

JavaScript
let slicedFruits = fruits.slice(1, 3); // ['banana', 'orange']
fruits.splice(1, 0, "kiwi"); // ['apple', 'kiwi', 'banana', 'orange']

JavaScript
let vegetables = ["carrot", "broccoli", "spinach"];
let combined = fruits.concat(vegetables); // ['apple', 'banana', 'orange', 'carrot', 'broccoli', 'spinach']

JavaScript
fruits.forEach(function (fruit, index) {
  //Fruit 0: apple
  console.log("Fruit " + index + ": " + fruit); //Fruit 1: banana
}); //Fruit 2: orange

JavaScript
console.log(fruits.indexOf("banana")); // 1
console.log(fruits.includes("orange")); // true

let foundFruit = fruits.find((fruit) => fruit.startsWith("b")); // 'banana'
let filteredFruits = fruits.filter((fruit) => fruit.length > 5); // ['banana', 'orange']

let hasApple = fruits.some((fruit) => fruit === "banana"); // true
let allFruitsHaveFiveLetters = fruits.every((fruit) => fruit.length === 5); // false

JavaScript
let fruitLengths = fruits.map((fruit) => fruit.length); //
let totalLength = fruits.reduce(
  (accumulator, fruit) => accumulator + fruit.length,
  0,
); // 17

Strings

Strings are sequences of characters and are considered iterable:

JavaScript
let text = "Hello, World!";

for (let char of text) {
  console.log(char);
}

In this example, the for-of loop is used to iterate over the characters in the text string.

JavaScript
let myString = "Hello, world!";
console.log(myString.length); // 13

JavaScript
let character = myString.charAt(7); // "w"
let character = myString; // "w"

JavaScript
let greeting = "Hello";
let target = "world";

let fullGreeting = greeting.concat(", ", target, "!"); // "Hello, world!"
let fullGreeting = greeting + ", " + target + "!"; // "Hello, world!"
let fullGreeting = `${greeting}, ${target}!`; // "Hello, world!"

JavaScript
let sentence = "This is a sentence.";

let words = sentence.split(" "); // ["This", "is", "a", "sentence."]
let joinedSentence = words.join(" "); // "This is a sentence."

JavaScript
let index = myString.indexOf("world"); // 7
let index = myString.lastIndexOf("o"); // 8
let hasSubstring = myString.includes("world"); // true

JavaScript
let sub = myString.slice(7, 12); // "world"
let sub = myString.substr(7, 5); // "world"

JavaScript
let newString = myString.replace("world", "everyone"); // "Hello, everyone!"
let newString = myString.replaceAll("o", "O"); // "HellO, wOrld!"

JavaScript
let lowerString = myString.toLowerCase(); // "hello, world!"
let upperString = myString.toUpperCase(); // "HELLO, WORLD!"

JavaScript
let stringWithWhitespace = "  Hello, world!  ";

let trimmedString = stringWithWhitespace.trim(); // "Hello, world!"
let trimmedStartString = stringWithWhitespace.trimStart(); // "Hello, world!  "
let trimmedEndString = stringWithWhitespace.trimEnd(); // "  Hello, world!"

JavaScript
let stringWithQuotes = 'She said, "Hello, world!"'; // She said, "Hello, world!"
let stringWithBackslash = "C:\\Users\\username\\Documents"; // C:\Users\username\Documents

Maps

Maps are key-value pairs collections similar to objects, but they allow keys of any data type. Maps maintain the insertion order of their elements:

JavaScript
let map = new Map();
map.set("one", 1);
map.set("two", 2);

for (let [key, value] of map) {
  console.log(key + " => " + value);
}

In this example, the for-of loop is used to iterate over the key-value pairs in the map.

Sets

Sets are collections of unique values. They can store values of any data type and maintain the insertion order of their elements:

JavaScript
let set = new Set(["apple", "banana", "orange", "banana"]);

console.log(set); // ["apple", "banana", "orange"]

for (let value of set) {
  console.log(value);
}

In this example, the for-of loop is used to iterate over the unique values in the set.

JavaScript Functions

JavaScript functions are blocks of code that can be defined and called by a name to perform a specific task. Functions help in organizing and reusing code, making it more readable and efficient.

Defining a Function

You can define a function using the function keyword, followed by the function name, parentheses (), and a set of curly braces {}. The code you want to execute is placed inside the curly braces.

JavaScript
function functionName() {
  // code to be executed
}

Calling a Function

To call a function, simply use its name followed by parentheses ().

JavaScript
functionName();

Function Parameters

Functions can take input values called parameters. Parameters are specified inside the parentheses during the function definition.

JavaScript
function functionName(parameter1, parameter2) {
  // code to be executed
}

When calling a function with parameters, you pass the input values, called arguments, inside the parentheses.

JavaScript
functionName(argument1, argument2);

Return Values

Functions can return a value using the return keyword. When a function returns a value, you can use or store that value.

JavaScript
function functionName(parameter1, parameter2) {
  // code to be executed
  return result;
}

const result = functionName(argument1, argument2);

Function Example

JavaScript function that adds two numbers:

JavaScript
// Function definition
function addNumbers(a, b) {
  return a + b;
}

// Function call
const sum = addNumbers(3, 4);

// Output: 7
console.log(sum);

In this example, we defined a function called addNumbers with two parameters a and b. We then called the function with the arguments 3 and 4 and stored the result in a variable called sum. Finally, we logged the result to the console.

Anonymous Functions

An anonymous function is a function without a name. They are often used as arguments for other functions or as a part of a variable assignment. To create an anonymous function, use the function keyword followed by parentheses () and curly braces {} without specifying a name.

JavaScript
const myFunction = function (a, b) {
  return a * b;
};

Arrow Functions

Arrow functions, introduced in ECMAScript 6 (ES6), are a more concise way to write functions. They use the "fat arrow" => syntax.

JavaScript
const myFunction = (a, b) => {
  return a * b;
};

For single-parameter functions, you can omit the parentheses. For single-line functions, you can omit the curly braces and the return keyword.

JavaScript
const square = (a) => a * a;
square(3);

Scopes

In JavaScript, scope determines the visibility and lifetime of variables. There are three types of scope: global scope, function scope and block scope

Global Scope

A variable declared outside a function or a block has a global scope. It means that the variable can be accessed from any part of the code, including within functions.

JavaScript
const globalVar = "I am global!";

function showGlobalVar() {
  console.log(globalVar);
}

// Output: "I am global!"
showGlobalVar();

// Output: "I am global!"
console.log(globalVar);

Function Scope

A variable declared inside a function has a local scope. It means that the variable is only accessible within that function.

JavaScript
function showLocalVar() {
  const localVar = "I am local!";
  console.log(localVar);
}

// Output: "I am local!"
showLocalVar();

// ReferenceError: localVar is not defined
console.log(localVar);

Block Scope

You can use the let and const keywords to declare variables with block scope. A block is a section of code enclosed by curly braces {}. Block-scoped variables are accessible only within the block they are declared in.

JavaScript
if (true) {
  const blockVar = "I am block scoped!";
}

// ReferenceError: blockVar is not defined
console.log(blockVar);

JavaScript
if (true) {
  let blockVar = "I am block scoped with let!";
  console.log(blockVar); // Output: "I am block scoped with let!"
}

// ReferenceError: blockVar is not defined
console.log(blockVar);

JavaScript
if (true) {
  var blockVar = "I am block scoped with var!";
  console.log(blockVar); // Output: "I am block scoped with var!"
}

// Output: "I am block scoped with var!"
console.log(blockVar);

JavaScript
for (let i = 0; i < 3; i++) {
  console.log(i); // Output: 0, 1, 2
}

// ReferenceError: i is not defined
console.log(i);

JavaScript
for (var i = 0; i < 3; i++) {
  console.log(i); // Output: 0, 1, 2
}

// Output: 3
console.log(i);

Object Oriented Programming

Object Oriented Programming (OOP) is a programming paradigm that allows you to structure your code by organizing it into "objects" that contain data (atributes) and functions (methods). This can make your code more modular, reusable, and easier to maintain. In JavaScript, OOP can be achieved using objects, classes, and inheritance.

Objects

An object is a collection of key-value pairs, where each key is called a property and each value can be a data type or a function (method). Here's a simple example of an object:

JavaScript
let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  greet: function () {
    console.log("Hello, my name is " + this.firstName + " " + this.lastName);
  },
};

person.greet(); // 'this' refers to the 'person' object inside the 'greet' method.

In this example, firstName, lastName, and age are properties, and greet is a method.

Classes

A class is a blueprint for creating objects with similar properties and methods. Classes help you define reusable and modular code. Here's an example of a class:

JavaScript
class Person {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  greet() {
    console.log("Hello, my name is " + this.firstName + " " + this.lastName);
  }
}

let john = new Person("John", "Doe", 30);
john.greet();

In this example, the Person class has a constructor that initializes the object's properties and a greet method. To create a new object from the class, we use the new keyword.

Inheritance

Inheritance is a way to create a new class that inherits properties and methods from an existing class. This helps you create more specialized classes without duplicating code. Here's an example:

JavaScript
class Employee extends Person {
  constructor(firstName, lastName, age, position) {
    super(firstName, lastName, age);
    this.position = position;
  }

  introduce() {
    console.log("Hi, I work as a " + this.position);
  }
}

let jane = new Employee("Jane", "Smith", 28, "Software Developer");

In this example, the Employee class inherits from the Person class using the extends keyword. The super keyword is used to call the constructor of the parent class, initializing the properties inherited from Person. We also add a new property position and a new method introduce to the Employee class.

Asynchronous JavaScript

Asynchronous JavaScript allows you to perform tasks without blocking the execution of other code. This is especially useful when dealing with tasks that take time to complete, such as requesting data from a server or reading a file.

Callbacks

A callback function is a function passed as an argument to another function, which is then executed at a later time. Callbacks are a common approach to handling asynchronous tasks in JavaScript.

JavaScript
function fetchData(callback) {
  // Simulate an asynchronous data request using setTimeout
  setTimeout(() => {
    const data = "Here is your data!";
    callback(data, false);
  }, 1000);
}

function processData(data) {
  console.log(`Data processed: ${data}`);
}

// Pass the processData function as a callback
fetchData(processData);

In this example, we use setTimeout to simulate an asynchronous data request. The fetchData function takes a callback function as a parameter, which is then called with the fetched data.

Promises

Promises were introduced in ECMAScript 6 (ES6) to provide a more organized way to handle asynchronous operations. A promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value.

A promise is in one of three states:

• Pending: Initial state; neither fulfilled nor rejected.
• Fulfilled: The operation completed successfully, and the promise has a resulting value.
• Rejected: The operation failed, and the promise has a reason for the failure.

JavaScript
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Here is your data!";
      const error = false;

      if (!error) {
        resolve(data);
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 1000);
  });
}

function processData(data) {
  console.log(`Data processed: ${data}`);
}

function handleFailure(error) {
  console.log(`Error encountered: ${error}`);
}

// Use the .then() method to handle the fulfilled promise and the .catch() method to
// handle the rejected promise
fetchData().then(processData).catch(handleFailure);

In this example, we create a new promise inside the fetchData function. We use setTimeout to simulate an asynchronous data request. We also introduce a simulated error condition with the error variable. If there's no error, we call the resolve function with the fetched data. If there's an error, we call the reject function with an error message. The processData function is then called using the .then() method if the promise is fulfilled, and the handleFailure function is called using the .catch() method if the promise is rejected.

Async/Await

Async/await is a modern syntax introduced in ECMAScript 8 for writing asynchronous code that looks like synchronous code. It's built on top of promises and makes it easier to work with them.

To use async/await:

• Declare a function as async.
• Use the await keyword inside the async function to wait for a promise to be resolved.

JavaScript
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Here is your data!";
      const error = false;

      if (!error) {
        resolve(data);
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(`Data processed: ${data}`);
  } catch (error) {
    console.log(`Error: ${error}`);
  }
}

// Call the async function
processData();

In this example, we declare the fetchData and processData functions as async. Inside the processData function, we use the await keyword to wait for the promise returned by fetchData to be resolved. The try and catch blocks are used to handle errors.

Regular expressions

Regular expressions (regex) are a powerful tool for working with text patterns in JavaScript and many other programming languages. They are used for searching, matching, and manipulating text based on specific patterns. A regex is essentially a sequence of characters that defines a search pattern.

In JavaScript, regular expressions are represented by the RegExp object, but they can also be written using regex literals, which are enclosed by forward slashes (/pattern/flags).

Creating a regex

You can create a regex using regex literals:

JavaScript
const regexLiteral = /pattern/flags;

Or by using the RegExp constructor:

JavaScript
const regexConstructor = new RegExp("pattern", "flags");

Regex special characters

Regex flags

There are several flags you can use to modify the behavior of your regex:

• g: Global search, finds all matches rather than stopping at the first match.
• i: Case-insensitive search.
• m: Multiline mode, the ^ and $ characters match the start and end of each line.
• s: Allows the dot (.) to match newline characters.
• u: Unicode mode, treats the pattern as a sequence of Unicode code points.
• y: Sticky mode, matches only from the lastIndex property of the regex.

Regex methods

JavaScript provides several methods for working with regex: