JavaScript Basics

Comment Code

// This is an in-line comment.

/* This is a
multi-line comment */

Variables

Variable Declaration

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

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

Variable Assignment

let x;
x = 5;

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

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

Data Types

Operators

Arithmetic Operators

• + : Addition

• - : Subtraction

• * : Multiplication

• / : Division

• % : Modulus (remainder)

• ++ : Increment

• -- : Decrement

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

• ==: Equal t

• ===: 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

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 AND

• ||: Logical OR

• !: Logical NOT

let a = true;
let b = false;

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

Assignment Operators

• = : Assign

• += : Add and assign

• = : Subtract and assign

• *= : Multiply and assign

• /= : Divide and assign

• %= : Modulus and assign

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

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

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

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

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

Control Structures

If Statement

let age = 18;

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

If-Else Statement

let age = 16;

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

else-If Statement

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

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");
}

For Loop

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

While Loop

let i = 0;

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

Do-While Loop

let i = 5;

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

For-In Loop

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

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

For-Of Loop

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

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

Break Statement

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

Continue Statement

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

Data structures

Objects

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"

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

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

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

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

person.country = "USA";

person.age = 31;

delete person.age;

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);
}

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

Arrays

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

console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "orange"

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

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

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

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

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

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

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

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

Strings

let text = "Hello, World!";

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

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

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

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!"

let sentence = "This is a sentence.";

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

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

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

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

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

let stringWithWhitespace = "  Hello, world!  ";

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

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

Maps

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

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

Sets

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

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

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

JavaScript Functions

Defining a Function

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

Calling a Function

functionName();

Function Parameters

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

functionName(argument1, argument2);

Return Values

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

const result = functionName(argument1, argument2);

Function Example

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

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

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

Anonymous Functions

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

Arrow Functions

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

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

Scopes

Global Scope

const globalVar = "I am global!";

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

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

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

Function Scope

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

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

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

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);

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);

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

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

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

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

Object Oriented Programming

Objects

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.

Classes

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);
jhon.greet()

Inheritance

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');

Asynchronous JavaScript

Callbacks

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);

Promises

1. Pending: Initial state; neither fulfilled nor rejected.

2. Fulfilled: The operation completed successfully, and the promise has a resulting value.

3. Rejected: The operation failed, and the promise has a reason for the failure.

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);

Async/Await

1. Declare a function as async.

2. Use the await keyword inside the async function to wait for a promise to be resolved.

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();

Regular expressions

Creating a regex

const regexLiteral = /pattern/flags;

const regexConstructor = new RegExp('pattern', 'flags');

Regex special characters

• ^: Start of input.
• Example: ^Hello matches strings starting with "Hello"

• $: End of input.
• Example: World$ matches strings ending with "World"

• .: Any single character (except newline).
• Example: H.llo matches "Hello", "Hxllo", "H1llo", etc.

• *: Zero or more occurrences of the preceding character or group.
• Example: He*llo matches "Hllo", "Hello", "Heello", "Heeello", etc.

• +: One or more occurrences of the preceding character or group.
• Example: He+llo matches "Hello", "Heello", "Heeello", etc., but not "Hllo"

• ?: Zero or one occurrence of the preceding character or group.
• Example: He?llo matches "Hllo" and "Hello", but not "Heello"

• {n}: Exactly n occurrences of the preceding character or group.
• Example: He{2}llo matches "Heello", but not "Hello" or "Heeello"

• {n,}: At least n occurrences of the preceding character or group.
• Example: He{2,}llo matches "Heello", "Heeello", "Heeeello", etc., but not "Hello"

• {n,m}: Between n and m occurrences of the preceding character or group.
• Example: He{1,3}llo matches "Hello", "Heello", "Heeello", but not "Hllo" or "Heeeello"

• []: A character set, matches any character inside the brackets.
• Example: H[ae]llo matches "Hallo" and "Hello", but not "Hillo"

• [^]: A negated character set, matches any character NOT inside the brackets.
• Example: H[^ae]llo matches "Hillo", "Hxllo", "H1llo", etc., but not "Hallo" or "Hello"

• |: Alternation, matches either the expression before or after the |.
• Example: Hello|World matches either "Hello" or "World"

• (): Grouping, groups part of the regex together.
• Example: (He)+llo matches "Hello", "HeHelloy", but not "Heello"

• \: Escape character, used to treat special characters as literals.
• Example: He\.llo matches "He.llo", but not "Heello" or "Hxllo"

Regex flags

• 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

• RegExp.test(string): Returns true if the regex matches the string, false otherwise.

• RegExp.exec(string): Returns an array of information about the matched substring, or null if no match is found.

• String.match(regex): Returns an array of all matches found in the string, or null if no match is found.

• String.matchAll(regex): Returns an iterator for all match objects found in the string.

• String.search(regex): Returns the index of the first match in the string, or 1 if no match is found.

• String.replace(regex, replaceValue): Returns a new string with matched substrings replaced by the replaceValue (a string or a function).

• String.replaceAll(regex, replaceValue): Returns a new string with all matched substrings replaced by the replaceValue (a string or a function).