diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 600d11fc62e..f7558020063 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -3279,7 +3279,8 @@
"review-javascript": {
"title": "JavaScript Review",
"intro": [
- "Review the JavaScript concepts to prepare for the upcoming quiz."
+ "Before you take the JavaScript prep exam, you will need to review first.",
+ "Open up this page, to review all of the concepts taught including variables, strings, booleans, functions, objects, arrays, debugging, working with the DOM and more."
]
},
"kagw": { "title": "258", "intro": [] },
diff --git a/curriculum/challenges/english/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md b/curriculum/challenges/english/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md
index a1b0b00d042..0d30acfe486 100644
--- a/curriculum/challenges/english/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md
+++ b/curriculum/challenges/english/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md
@@ -7,9 +7,2855 @@ dashedName: review-javascript
# --description--
-Review the concepts below to prepare for the upcoming quiz.
+Review the concepts below to prepare for the upcoming prep exam.
+## Working with HTML, CSS, and JavaScript
+
+While HTML and CSS provide website structure, JavaScript brings interactivity to websites by enabling complex functionality, such as handling user input, animating elements, and even building full web applications.
+
+## Data Types in JavaScript
+
+Data types help the program understand the kind of data it’s working with, whether it's a number, text, or something else.
+
+- **Number**: A number represents both integers and floating-point values. Examples of integers include 7, 19, and 90.
+- **Floating point**: A floating point number is a number with a decimal point. Examples include 3.14, 0.5, and 0.0001.
+- **String**: A string is a sequence of characters, or text, enclosed in quotes. `"I like coding"` and `'JavaScript is fun'` are examples of strings.
+- **Boolean**: A boolean represents one of two possible values: `true` or `false`. You can use a boolean to represent a condition, such as `isLoggedin = true`.
+- **Undefined and Null**: An undefined value is a variable that has been declared but not assigned a value. A null value is an empty value, or a variable that has intentionally been assigned a value of `null`.
+- **Object**: An object is a collection of key-value pairs. The key is the property name, and the value is the property value.
+
+Here, the `pet` object has three properties or keys: `name`, `age`, and `type`. The values are `Fluffy`, `3`, and `dog`, respectively.
+
+```js
+let pet = {
+ name: 'Fluffy',
+ age: 3,
+ type: 'dog'
+};
+```
+
+- **Symbol**: The Symbol data type is a unique and immutable value that may be used as an identifier for object properties.
+
+In this example below, two symbols are created with the same description, but they are not equal.
+
+```js
+const crytpicKey1= Symbol('saltNpepper');
+const crytpicKey2= Symbol('saltNpepper');
+console.log(crytpicKey1 === crytpicKey2); // false
+```
+
+- **BigInt**: When the number is too large for the `Number` data type, you can use the BigInt data type to represent integers of arbitrary length.
+
+By adding an `n` to the end of the number, you can create a BigInt.
+
+```js
+const veryBigNumber = 1234567890123456789012345678901234567890n;
+```
+
+## Variables in JavaScript
+
+- Variables can be declared using the `let` keyword.
+
+```js
+let cityName;
+```
+
+- To assign a value to a variable, you can use the assignment operator `=`.
+
+```js
+cityName = 'New York';
+```
+
+- Variables declared using `let` can be reassigned a new value.
+
+```js
+cityName = 'Los Angeles';
+console.log(cityName); // Los Angeles
+```
+
+- Apart from `let`, you can also use `const` to declare a variable. However, a `const` variable cannot be reassigned a new value.
+
+```js
+const cityName = 'New York';
+cityName = 'Los Angeles'; // TypeError: Assignment to constant variable.
+```
+
+- Variables declared using `const` find uses in declaring constants, that are not allowed to change throughout the code, such as `PI` or `MAX_SIZE`.
+
+## Variable Naming Conventions
+
+- Variable names should be descriptive and meaningful.
+- Variable names should be camelCase like `cityName`, `isLoggedin`, and `veryBigNumber`.
+- Variable names should not start with a number. They must begin with a letter, `_`, or `$`.
+- Variable names should not contain spaces or special characters, except for `_` and `$`.
+- Variable names should not be reserved keywords.
+- Variable names are case-sensitive. `age` and `Age` are different variables.
+
+## Strings and String immutability in JavaScript
+
+- Strings are sequences of characters enclosed in quotes. They can be created using single quotes and double quotes.
+
+```js
+let correctWay = 'This is a string';
+let alsoCorrect = "This is also a string";
+```
+
+- Strings are immutable in JavaScript. This means that once a string is created, you cannot change the characters in the string. However, you can still reassign strings to a new value.
+
+```js
+let firstName = 'John';
+firstName = 'Jane'; // Reassigning the string to a new value
+```
+
+## String Concatenation in JavaScript
+
+- Concatenation is the process of joining multiple strings or combining strings with variables that hold text. The `+` operator is one of the simplest and most frequently used methods to concatenate strings.
+
+```js
+let studentName = 'Asad';
+let studentAge = 25;
+let studentInfo = studentName + ' is ' + studentAge + ' years old.';
+console.log(studentInfo); // Asad is 25 years old.
+```
+
+- If you need to add or append to an existing string, then you can use the `+=` operator. This is helpful when you want to build upon a string by adding more text to it over time.
+
+```js
+let message = 'Welcome to programming, ';
+message += 'Asad!';
+console.log(message); // Welcome to programming, Asad!
+```
+
+- Another way you can concatenate strings is to use the `concat()` method. This method joins two or more strings together.
+
+```js
+let firstName = 'John';
+let lastName = 'Doe';
+let fullName = firstName.concat(' ', lastName);
+console.log(fullName); // John Doe
+```
+
+## Logging Messages with `console.log()`
+
+- The `console.log()` method is used to log messages to the console. It's a helpful tool for debugging and testing your code.
+
+```js
+console.log('Hello, World!');
+// Output: Hello, World!
+```
+
+## Semicolons in JavaScript
+
+- Semicolons are primarily used to mark the end of a statement. This helps the JavaScript engine understand the separation of individual instructions, which is crucial for correct execution.
+
+```js
+let message = 'Hello, World!'; // first statement ends here
+let number = 42; // second statement starts here
+```
+
+- Semicolons help prevent ambiguities in code execution and ensure that statements are correctly terminated.
+
+## Comments in JavaScript
+
+- Any line of code that is commented out is ignored by the JavaScript engine. Comments are used to explain code, make notes, or temporarily disable code.
+- Single line comments are created using `//`.
+
+```js
+// This is a single line comment and will be ignored by the JavaScript engine
+```
+
+- Multi-line comments are created using `/*` to start the comment and `*/` to end the comment.
+
+```js
+/*
+This is a multi-line comment.
+It can span multiple lines.
+*/
+```
+
+## JavaScript as a Dynamically Typed Language
+
+- JavaScript is a dynamically typed language, which means that you don't have to specify the data type of a variable when you declare it. The JavaScript engine automatically determines the data type based on the value assigned to the variable.
+
+```js
+let error = 404; // JavaScript treats error as a number
+error = "Not Found"; // JavaScript now treats error as a string
+```
+
+- Other languages, like Java, that are not dynamically typed would result in an error:
+
+```js
+int error = 404; // value must always be an integer
+error = "Not Found"; // This would cause an error in Java
+```
+
+## Using the `typeof` Operator
+
+- The `typeof` operator is used to check the data type of a variable. It returns a string indicating the type of the variable.
+
+```js
+let age = 25;
+console.log(typeof age); // number
+
+let isLoggedin = true;
+console.log(typeof isLoggedin); // boolean
+```
+
+- However, there’s a well-known quirk in JavaScript when it comes to null. The `typeof` operator returns `object` for null values.
+
+```js
+let user = null;
+console.log(typeof user); // object
+```
+
+## String Basics
+
+- **Definition**: A string is a sequence of characters wrapped in either single quotes, double quotes or backticks. Strings are primitive data types and they are immutable. Immutability means that once a string is created, it cannot be changed.
+- **Accessing Characters from a String**: To access a character from a string you can use bracket notation and pass in the index number. An index is the position of a character within a string, and it is zero-based.
+
+```js
+const developer = "Jessica";
+developer[0] // J
+```
+
+- **`\n` (Newline Character)**: You can create a newline in a string by using the `\n` newline character.
+
+```js
+const poem = "Roses are red,\nViolets are blue,\nJavaScript is fun,\nAnd so are you.";
+console.log(poem);
+```
+
+- **Escaping Strings**: You can escape characters in a string by placing backlashes (`\`) in front of the quotes.
+
+```js
+const statement = "She said, \"Hello!\"";
+console.log(statement); // She said, "Hello!"
+```
+
+## Template Literals (Template Strings) and String Interpolation
+
+- **Definition**: Template literals are defined with backticks (`). They allow for easier string manipulation, including embedding variables directly inside a string, a feature known as string interpolation.
+
+```js
+const name = "Jessica";
+const greeting = `Hello, ${name}!`; // "Hello, Jessica!"
+```
+
+## ASCII, the `charCodeAt()` Method and the `fromCharCode()` Method
+
+- **ASCII**: ASCII, short for American Standard Code for Information Interchange, is a character encoding standard used in computers to represent text. It assigns a numeric value to each character, which is universally recognized by machines.
+- **The `charCodeAt()` Method**: This method is called on a string and returns the ASCII code of the character at a specified index.
+
+```js
+const letter = "A";
+console.log(letter.charCodeAt(0)); // 65
+```
+
+- **The `fromCharCode()` Method**: This method converts an ASCII code into its corresponding character.
+
+```js
+const char = String.fromCharCode(65);
+console.log(char); // A
+```
+
+## Other Common String Methods
+
+- **The `indexOf` Method**: This method is used to search for a substring within a string. If the substring is found, `indexOf` returns the index (or position) of the first occurrence of that substring. If the substring is not found, `indexOf` returns -1, which indicates that the search was unsuccessful.
+- **The `includes()` Method**: This method is used to check if a string contains a specific substring. If the substring is found within the string, the method returns true otherwise, it returns false.
+- **The `slice()` Method**: This method extracts a portion of a string and returns a new string, without modifying the original string. It takes two parameters: the starting index and the optional ending index.
+- **The `toUpperCase()` Method**: This method converts all the characters to uppercase letters and returns a new string with all uppercase characters.
+- **The `toLowerCase()` Method**: This method converts all characters in a string to lowercase.
+- **The `replace()` Method**: This method is used to find a specified value (like a word or character) in a string and replace it with another value.
+- **The `repeat()` Method**: This method is used to repeat a string a specified number of times.
+- **The `trim()` Method**: This method is used to remove whitespace from both the beginning and the end of a string.
+- **The `trimStart()` Method**: This method removes whitespace from the beginning (or "start") of the string.
+- **The `trimEnd()` Method**: This method removes whitespace from the end of the string.
+- **The `prompt()` Method**: This method is used to get information from a user through the form of a dialog box. This method takes two arguments. The first argument is the message which will appear inside the dialog box, typically prompting the user to enter information. And the second one is a default value which is optional and will fill the input field initially.
+
+## Working with the Number Data Type
+
+- **Definition**: JavaScript's `Number` type includes integers, floating-point numbers, `Infinity` and `NaN`. Floating-point numbers are numbers with a decimal point. Positive `Infinity` is a number greater than any other number while `-Infinity` is a number smaller than any other number. `NaN` (`Not a Number`) represents an invalid numeric value like the string `"Jessica"`.
+
+## Common Arithmetic Operations
+
+- **Addition Operator**: This operator (`+`) is used to calculate the sum of two or more numbers.
+- **Subtraction Operator**: This operator (`-`) is used to calculate the difference between two numbers.
+- **Multiplication Operator**: This operator (`*`) is used to calculate the product of two or more numbers.
+- **Division Operator**: This operator (`/`) is used to calculate the quotient between two numbers
+- **Division By Zero**: If you try to divide by zero, JavaScript will return `Infinity`.
+- **Remainder Operator**: This operator(`%`) returns the remainder of a division.
+- **Exponentiation Operator**: This operator (`**`) raises one number to the power of another.
+
+## Calculations with Numbers and Strings
+
+- **Explanation**: When you use the `+` operator with a number and a string, JavaScript will coerce the number into a string and concatenate the two values. When you use the `-`, `*` or `/` operators with a string and number, JavaScript will coerce the string into a number and the result will be a number. For `null` and `undefined`, JavaScript treats `null` as 0 and undefined as `NaN` in mathematical operations.
+
+```js
+const result = 5 + '10';
+
+console.log(result); // 510
+console.log(typeof result); // string
+
+const subtractionResult = '10' - 5;
+console.log(subtractionResult); // 5
+console.log(typeof subtractionResult); // number
+
+const multiplicationResult = '10' * 2;
+console.log(multiplicationResult); // 20
+console.log(typeof multiplicationResult); // number
+
+const divisionResult = '20' / 2;
+console.log(divisionResult); // 10
+console.log(typeof divisionResult); // number
+
+const result1 = null + 5;
+console.log(result1); // 5
+console.log(typeof result1); // number
+
+const result2 = undefined + 5;
+console.log(result2); // NaN
+console.log(typeof result2); // number
+```
+
+## Operator Precedence
+
+- **Definition**: Operator precedence determines the order in which operations are evaluated in an expression. Operators with higher precedence are evaluated before those with lower precedence. Values inside the parenthesis will be evaluated first and multiplication/division will have higher precedence then addition/subtraction. If the operators have the same precedence, then JavaScript will use associativity. Associativity is what tells JavaScript whether to evaluate operators from left to right or right to left. For example, the exponent operator is also right to left associative:
+
+```js
+const result = (2 + 3) * 4;
+
+console.log(result); // 20
+
+const result2 = 10 - 2 + 3;
+
+console.log(result2); // 11
+
+const result3 = 2 ** 3 ** 2;
+
+console.log(result3); // 512
+```
+
+## Increment and Decrement Operators
+
+- **Increment Operator**: This operator is used to increase the value by one. The prefix notation `++num` increases the value of the variable first, then returns a new value. The postfix notation `num++` returns the current value of the variable first, then increases it.
+
+```js
+let x = 5;
+
+console.log(++x); // 6
+console.log(x); // 6
+
+
+let y = 5;
+
+console.log(y++); // 5
+console.log(y); // 6
+```
+
+- **Decrement Operator**: This operator is used to decrease the value by one. The prefix and postfix notation work the same way as earlier with the increment operator.
+
+```js
+let num = 5;
+
+console.log(--num); // 4
+console.log(num--); // 4
+console.log(num); // 3
+```
+
+## Compound Assignment Operators
+
+- **Addition Assignment (`+=`) Operator**: This operator performs addition on the values and assigns the result to the variable.
+- **Subtraction Assignment (`-=`) Operator**: This operator performs subtraction on the values and assigns the result to the variable.
+- **Multiplication Assignment (`*=`) Operator**: This operator performs multiplication on the values and assigns the result to the variable.
+- **Division Assignment (`/=`) Operator**: This operator performs division on the values and assigns the result to the variable.
+- **Remainder Assignment (`%=`) Operator**: This operator divides a variable by the specified number and assigns the remainder to the variable.
+- **Exponentiation Assignment (`**=`) Operator**: This operator raises a variable to the power of the specified number and reassigns the result to the variable.
+
+## Booleans and Equality
+
+- **Boolean Definition**: A boolean is a data type that can only have two values: `true` or `false`.
+- **Equality (`==`) Operator**: This operator uses type coercion before checking if the values are equal.
+
+```js
+console.log(5 == '5'); // true
+```
+
+- **Strict Equality (`===`) Operator**: This operator does not perform type coercion and checks if both the types and values are equal.
+
+```js
+console.log(5 === '5'); // false
+```
+
+- **Inequality (`!=`) Operator**: This operator uses type coercion before checking if the values are not equal.
+- **Strict Inequality (`!==`) Operator**: This operator does not perform type coercion and checks if both the types and values are not equal.
+
+## Comparison Operators
+
+- **Greater Than (`>`) Operator**: This operator checks if the value on the left is greater than the one on the right.
+- **Greater Than (`>=`) or Equal Operator**: This operator checks if the value on the left is greater than or equal to the one on the right.
+- **Less Than (`<`) Operator**: This operator checks if the value on the left is less than the one on the right.
+- **Less Than (`<=`) or Equal Operator**: This operator checks if the value on the left is less than or equal to the one on the right.
+
+## Unary Operators
+
+- **Unary Plus Operator**: This operator converts its operand into a number. If the operand is already a number, it remains unchanged.
+
+```js
+const str = '42';
+const num = +str;
+
+console.log(num); // 42
+console.log(typeof num); // number
+```
+
+- **Unary Negation (`-`) Operator**: This operator negates the operand.
+
+```js
+const num = 4;
+console.log(-num); // -4
+```
+
+- **Logical NOT (`!`) Operator**: This operator flips the boolean value of its operand. So, if the operand is `true`, it becomes `false`, and if it’s `false`, it becomes `true`.
+
+## Bitwise Operators
+
+- **Bitwise AND (`&`) Operator**: This operator returns a 1 in each bit position for which the corresponding bits of both operands are 1.
+- **Bitwise AND Assignment (`&=`) Operator**: This operator performs a `bitwise AND` operation with the specified number and reassigns the result to the variable.
+- **Bitwise OR (`|`) Operator**: This operator returns a 1 in each bit position for which the corresponding bits of either or both operands are 1.
+- **Bitwise OR Assignment (`|=`) Operator**: This operator performs a `bitwise OR` operation with the specified number and reassigns the result to the variable.
+- **Bitwise XOR (`^`) Operator**: This operator returns a 1 in each bit position for which the corresponding bits of either, but not both, operands are 1.
+- **Bitwise NOT (`~`) Operator**: This operator inverts the binary representation of a number.
+- **Left Shift (`<<`) Operator**: This operator shifts all bits to the left by a specified number of positions.
+- **Right Shift (`>>`) Operator**: This operator shifts all bits to the right.
+
+## Conditional Statements, Truthy Values, Falsy Values and the Ternary Operator
+
+- **`if/else if/else`**: An `if` statement takes a condition and runs a block of code if that condition is `truthy`. If the condition is `false`, then it moves to the `else if` block. If none of those conditions are `true`, then it will execute the `else` clause. `Truthy` values are any values that result in `true` when evaluated in a Boolean context like an `if` statement. `Falsy` values are values that evaluate to `false` in a Boolean context.
+
+```js
+const score = 87;
+
+if (score >= 90) {
+ console.log('You got an A');
+} else if (score >= 80) {
+ console.log('You got a B'); // You got an B
+} else if (score >= 70) {
+ console.log('You got a C');
+} else {
+ console.log('You failed! You need to study more!');
+}
+```
+
+- **Ternary Operator**: This operator is often used as a shorter way to write `if else` statements.
+
+```js
+const temperature = 30;
+const weather = temperature > 25 ? 'sunny' : 'cool';
+
+console.log(`It's a ${weather} day!`); // It's a sunny day!
+```
+
+## Binary Logical Operators
+
+- **Logical AND (`&&`) Operator**: This operator checks if both operands are truthy. If the first value is truthy, then it will return the second value. If the first value is falsy, then it will return the first value.
+
+```js
+const result = true && 'hello';
+
+console.log(result); // hello
+```
+
+- **Logical OR (`||`) Operator**: This operator checks if at least one of the operands is truthy. If the first value is truthy, then it is returned. If the first value is falsy, then the second value is returned.
+- **Nullish Coalescing (`??`) Operator**: This operator will return a value only if the first one is `null` or `undefined`.
+
+```js
+const userSettings = {
+ theme: null,
+ volume: 0,
+ notifications: false,
+};
+
+let theme = userSettings.theme ?? 'light';
+console.log(theme); // light
+```
+
+## The `Math` Object
+
+- **The `Math.random()` Method**: This method generates a random floating-point number between 0 (inclusive) and 1 (exclusive). This means the possible output can be 0, but it will never actually reach 1.
+- **The `Math.max()` Method**: This method takes a set of numbers and returns the maximum value.
+- **The `Math.min()` Method**: This method takes a set of numbers and returns the minimum value.
+- **The `Math.ceil()` Method**: This method rounds a value up to the nearest whole integer.
+- **The `Math.floor()` Method**: This method rounds a value down to the nearest whole integer.
+- **The `Math.round()` Method**: This method rounds a value to the nearest whole integer.
+
+```js
+console.log(Math.round(2.3)); // 2
+console.log(Math.round(4.5)); // 5
+console.log(Math.round(4.8)); // 5
+```
+
+- **The `Math.trunc()` Method**: This method removes the decimal part of a number, returning only the integer portion, without rounding.
+- **The `Math.sqrt()` Method**: This method will return the square root of a number.
+- **The `Math.cbrt()` Method**: This method will return the cube root of a number.
+- **The `Math.abs()` Method**: This method will return the absolute value of a number.
+- **The `Math.pow()` Method**: This method takes two numbers and raise the first to the power of the second.
+
+## Common Number Methods
+
+- **`isNaN()`**: `NaN` stands for "Not-a-Number". It's a special value that represents an unrepresentable or undefined numerical result. The `isNaN()` function property is used to determine whether a value is `NaN` or not. `Number.isNaN()` provides a more reliable way to check for `NaN` values, especially in cases where type coercion might lead to unexpected results with the global `isNaN()` function.
+
+```js
+console.log(isNaN(NaN)); // true
+console.log(isNaN(undefined)); // true
+console.log(isNaN({})); // true
+
+console.log(isNaN(true)); // false
+console.log(isNaN(null)); // false
+console.log(isNaN(37)); // false
+
+
+console.log(Number.isNaN(NaN)); // true
+console.log(Number.isNaN(Number.NaN)); // true
+console.log(Number.isNaN(0 / 0)); // true
+
+console.log(Number.isNaN("NaN")); // false
+console.log(Number.isNaN(undefined)); // false
+```
+
+- **The `parseFloat()` Method**: This method parses a string argument and returns a floating-point number. It's designed to extract a number from the beginning of a string, even if the string contains non-numeric characters later on.
+- **The `parseInt()` Method**: This method parses a string argument and returns an integer. `parseInt()` stops parsing at the first non-digit it encounters. For floating-point numbers, it returns only the integer part. If it can't find a valid integer at the start of the string, it returns `NaN`.
+- **The `toFixed()` Method**: This method is called on a number and takes one optional argument, which is the number of digits to appear after the decimal point. It returns a string representation of the number with the specified number of decimal places.
+
+## Comparisons and the `null` and `undefined` Data Types
+
+- **Comparisons and `undefined`**: A variable is `undefined` when it has been declared but hasn't been assigned a value. It's the default value of uninitialized variables and function parameters that weren't provided an argument. `undefined` converts to `NaN` in numeric contexts, which makes all numeric comparisons with `undefined` return `false`.
+
+```js
+console.log(undefined > 0); // false
+console.log(undefined < 0); // false
+console.log(undefined == 0); // false
+```
+
+- **Comparisons and `null`**: The `null` type represents the intentional absence of a value. When using the equality operator, `null` and `undefined` are considered equal. However, when using the strict equality operator (`===`), which checks both value and type without performing type coercion, `null` and `undefined` are not equal:
+
+```js
+console.log(null == undefined); // true
+console.log(null === undefined); // false
+```
+
+## `switch` Statements
+
+- **Definition**: A `switch` statement evaluates an expression and matches its value against a series of `case` clauses. When a match is found, the code block associated with that case is executed.
+
+```js
+const dayOfWeek = 3;
+
+switch (dayOfWeek) {
+ case 1:
+ console.log("It's Monday! Time to start the week strong.");
+ break;
+ case 2:
+ console.log("It's Tuesday! Keep the momentum going.");
+ break;
+ case 3:
+ console.log("It's Wednesday! We're halfway there.");
+ break;
+ case 4:
+ console.log("It's Thursday! Almost the weekend.");
+ break;
+ case 5:
+ console.log("It's Friday! The weekend is near.");
+ break;
+ case 6:
+ console.log("It's Saturday! Enjoy your weekend.");
+ break;
+ case 7:
+ console.log("It's Sunday! Rest and recharge.");
+ break;
+ default:
+ console.log("Invalid day! Please enter a number between 1 and 7.");
+}
+```
+
+## JavaScript Functions
+
+- Functions are reusable blocks of code that perform a specific task.
+- Functions can be defined using the `function` keyword followed by a name, a list of parameters, and a block of code that performs the task.
+- Arguments are values passed to a function when it is called.
+- When a function finishes its execution, it will always return a value.
+- By default the return value of a function is `undefined`.
+- The `return` keyword is used to specify the value to be returned from the function and ends the function execution.
+
+## Arrow Functions
+
+- Arrow functions are a more concise way to write functions in JavaScript.
+- Arrow functions are defined using the `=>` syntax between the parameters and the function body.
+- When defining an arrow function, you do not need the `function` keyword.
+- If you are using a single parameter, you can omit the parentheses around the parameter list.
+- If the function body consists of a single expression, you can omit the curly braces and the `return` keyword.
+
+## Scope in Programming
+
+- **Global scope**: This is the outermost scope in JavaScript. Variables declared in the global scope are accessible from anywhere in the code and are called global variables.
+- **Local scope**: This is refers to variables declared within a function. These variables are only accessible within the function where they are declared and are called local variables.
+- **Block scope**: A block is a set of statements enclosed in curly braces `{}` such as in `if` statements, or loops.
+- Block scoping with `let` and `const` provides even finer control over variable accessibility, helping to prevent errors and make your code more predictable.
+
+## JavaScript Array Basics
+
+- **Definition**: A JavaScript array is an ordered collection of values, each identified by a numeric index. The values in a JavaScript array can be of different data types, including numbers, strings, booleans, objects, and even other arrays. Arrays are contiguous in memory, which means that all elements are stored in a single, continuous block of memory locations, allowing for efficient indexing and fast access to elements by their index.
+
+```js
+const developers = ["Jessica", "Naomi", "Tom"];
+```
+
+- **Accessing Elements From Arrays**: To access elements from an array, you will need to reference the array followed by its index number inside square brackets. JavaScript arrays are zero based indexed which means the first element is at index 0, the second element is at index 1, etc. If you try to access an index that doesn't exist for the array, then JavaScript will return `undefined`.
+
+```js
+const developers = ["Jessica", "Naomi", "Tom"];
+developers[0] // "Jessica"
+developers[1] // "Naomi"
+
+developers[10] // undefined
+```
+
+- **`length` Property**: This property is used to return the number of items in a array.
+
+```js
+const developers = ["Jessica", "Naomi", "Tom"];
+developers.length // 3
+```
+
+- **Updating Elements in an Array**: To update an element in an array, you use the assignment operator (`=`) to assign a new value to the element at a specific index.
+
+```js
+const fruits = ['apple', 'banana', 'cherry'];
+fruits[1] = 'blueberry';
+
+console.log(fruits); // ['apple', 'blueberry', 'cherry']
+```
+
+## Two Dimensional Arrays
+
+- **Definition**: A two-dimensional array is essentially an array of arrays. It's used to represent data that has a natural grid-like structure, such as a chessboard, a spreadsheet, or pixels in an image. To access an element in a two-dimensional array, you need two indices: one for the row and one for the column.
+
+```js
+const chessboard = [
+ ['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'],
+ ['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
+ [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
+ [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
+ [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
+ [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
+ ['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'],
+ ['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r']
+];
+
+console.log(chessboard[0][3]); // "Q"
+```
+
+## Array Destructuring
+
+- **Definition**: Array destructuring is a feature in JavaScript that allows you to extract values from arrays and assign them to variables in a more concise and readable way. It provides a convenient syntax for unpacking array elements into distinct variables.
+
+```js
+const fruits = ["apple", "banana", "orange"];
+
+const [first, second, third] = fruits;
+
+console.log(first); // "apple"
+console.log(second); // "banana"
+console.log(third); // "orange"
+```
+
+- **Rest Syntax**: This allows you to capture the remaining elements of an array that haven’t been destructured into a new array.
+
+```js
+const fruits = ["apple", "banana", "orange", "mango", "kiwi"];
+const [first, second, ...rest] = fruits;
+
+console.log(first); // "apple"
+console.log(second); // "banana"
+console.log(rest); // ["orange","mango","kiwi"]
+```
+
+## Common Array Methods
+
+- **`push()` Method**: This method is used to add elements to the end of the array and will return the new length.
+
+```js
+const desserts = ["cake", "cookies", "pie"];
+desserts.push("ice cream");
+
+console.log(desserts); // ["cake", "cookies", "pie", "ice cream"];
+```
+
+- **`pop()` Method**: This method is used to remove the last element from an array and will return that removed element. If the array is empty, then the return value will be `undefined`.
+
+```js
+const desserts = ["cake", "cookies", "pie"];
+desserts.pop();
+
+console.log(desserts); // ["cake", "cookies"];
+```
+
+- **`shift()` Method**: This method is used to remove the first element from an array and return that removed element. If the array is empty, then the return value will be `undefined`.
+
+```js
+const desserts = ["cake", "cookies", "pie"];
+desserts.shift();
+
+console.log(desserts); // ["cookies", "pie"];
+```
+
+- **`unshift()` Method**: This method is used to add elements to the beginning of the array and will return the new length.
+
+```js
+const desserts = ["cake", "cookies", "pie"];
+desserts.unshift("ice cream");
+
+console.log(desserts); // ["ice cream", "cake", "cookies", "pie"];
+```
+
+- **`indexOf()` Method**: This method is useful for finding the first index of a specific element within an array. If the element cannot be found, then it will return -1.
+
+```js
+const fruits = ["apple", "banana", "orange", "banana"];
+const index = fruits.indexOf("banana");
+
+console.log(index); // 1
+console.log(fruits.indexOf("not found")); // -1
+```
+
+- **`splice()` Method**: This method is used to add or remove elements from any position in an array. The return value for the `splice()` method will be an array of the items removed from the array. If nothing was removed, then an empty array will be returned. This method will mutate the original array, modifying it in place rather than creating a new array. The first argument specifies the index at which to begin modifying the array. The second argument are the number of elements you wish to remove. The following arguments are the elements you wish to add.
+
+```js
+const colors = ["red", "green", "blue"];
+colors.splice(1, 0, "yellow", "purple");
+
+console.log(colors); // ["red", "yellow", "purple", "green", "blue"]
+```
+
+- **`includes()` Method**: This method is used to check if an array contains a specific value. This method returns `true` if the array contains the specified element, and `false` otherwise.
+
+```js
+const programmingLanguages = ["JavaScript", "Python", "C++"];
+
+console.log(programmingLanguages.includes("Python")); // true
+console.log(programmingLanguages.includes("Perl")); // false
+```
+
+- **`concat()` Method**: This method creates a new array by merging two or more arrays.
+
+```js
+const programmingLanguages = ["JavaScript", "Python", "C++"];
+const newList = programmingLanguages.concat("Perl");
+
+console.log(newList); // ["JavaScript", "Python", "C++", "Perl"]
+```
+
+- **`slice()` Method**: This method returns a shallow copy of a portion of the array at a specified index or the entire array. A shallow copy will copy the reference to the array instead of duplicating it.
+
+```js
+const programmingLanguages = ["JavaScript", "Python", "C++"];
+const newList = programmingLanguages.slice(1);
+
+console.log(newList); // ["Python", "C++"]
+```
+
+- **Spread Syntax**: The spread syntax is used to create shallow copies of an array.
+
+```js
+const originalArray = [1, 2, 3];
+const shallowCopiedArray = [...originalArray];
+
+shallowCopiedArray.push(4);
+
+console.log(originalArray); // [1, 2, 3]
+console.log(shallowCopiedArray); // [1, 2, 3, 4]
+```
+
+- **`split()` Method**: This method divides a string into an array of substrings and specifies where each split should happen based on a given separator. If no separator is provided, the method returns an array containing the original string as a single element.
+
+```js
+const str = "hello";
+const charArray = str.split("");
+
+console.log(charArray); // ["h","e","l","l","o"]
+```
+
+- **`reverse()` Method**: This method reverses an array in place.
+
+```js
+const desserts = ["cake", "cookies", "pie"];
+console.log(desserts.reverse()); // ["pie","cookies","cake"]
+```
+
+- **`join()` Method**: This method concatenates all the elements of an array into a single string, with each element separated by a specified separator. If no separator is provided, or an empty string (`""`) is used, the elements will be joined without any separator.
+
+```js
+const reversedArray = ["o", "l", "l", "e", "h"];
+const reversedString = reversedArray.join("");
+
+console.log(reversedString); // "olleh"
+```
+
+## Object Basics
+
+- **Definition**: An object is a data structure that is made up of properties. A property consists of a key and a value. To access data from an object you can use either dot notation or bracket notation.
+
+```js
+const person = {
+ name: "Alice",
+ age: 30,
+ city: "New York"
+};
+
+console.log(person.name); // Alice
+console.log(person["name"]); // Alice
+```
+
+To set a property of an existing object you can use either dot notation or bracket notation together with the assignment operator.
+
+```js
+const person = {
+ name: "Alice",
+ age: 30
+};
+
+person.job = "Engineer"
+person["hobby"] = "Knitting"
+console.log(person); // {name: 'Alice', age: 30, job: 'Engineer', hobby: 'Knitting'}
+```
+
+## Removing Properties From an Object
+
+- **`delete` Operator**: This operator is used to remove a property from an object.
+
+```js
+const person = {
+ name: "Alice",
+ age: 30,
+ job: "Engineer"
+};
+
+delete person.job;
+
+console.log(person.job); // undefined
+```
+
+## Checking if an Object has a Property
+
+- **`hasOwnProperty()` Method**: This method returns a boolean indicating whether the object has the specified property as its own property.
+
+```js
+const person = {
+ name: "Alice",
+ age: 30
+};
+
+console.log(person.hasOwnProperty("name")); // true
+console.log(person.hasOwnProperty("job")); // false
+```
+
+- **`in` Operator**: This operator will return `true` if the property exists in the object.
+
+```js
+const person = {
+ name: "Bob",
+ age: 25
+};
+
+console.log("name" in person); // true
+```
+
+## Accessing Properties From Nested Objects
+
+- **Accessing Data**: Accessing properties from nested objects involves using the dot notation or bracket notation, much like accessing properties from simple objects. However, you'll need to chain these accessors to drill down into the nested structure.
+
+```js
+const person = {
+ name: "Alice",
+ age: 30,
+ contact: {
+ email: "alice@example.com",
+ phone: {
+ home: "123-456-7890",
+ work: "098-765-4321"
+ }
+ }
+};
+
+console.log(person.contact.phone.work); // "098-765-4321"
+```
+
+## Primitive and Non Primitive Data Types
+
+- **Primitive Data Types**: These data types include numbers, strings, booleans, `null`, `undefined`, and symbols. These types are called "primitive" because they represent single values and are not objects. Primitive values are immutable, which means once they are created, their value cannot be changed.
+- **Non Primitive Data Types**: In JavaScript, these are objects, which include regular objects, arrays, and functions. Unlike primitives, non-primitive types can hold multiple values as properties or elements.
+
+## Object Methods
+
+- **Definition**: Object methods are functions that are associated with an object. They are defined as properties of an object and can access and manipulate the object's data. The `this` keyword inside the method refers to the object itself, enabling access to its properties.
+
+```js
+const person = {
+ name: "Bob",
+ age: 30,
+ sayHello: function() {
+ return "Hello, my name is " + this.name;
+ }
+};
+
+console.log(person.sayHello()); // "Hello, my name is Bob"
+```
+
+## Object Constructor
+
+- **Definition**: In JavaScript, a constructor is a special type of function used to create and initialize objects. It is invoked with the `new` keyword and can initialize properties and methods on the newly created object. The `Object()` constructor creates a new empty object.
+
+```js
+new Object()
+```
+
+## Working with the Optional Chaining Operator (`?.`)
+
+- **Definition**: This operator lets you safely access object properties or call methods without worrying whether they exist.
+
+```js
+const user = {
+ name: "John",
+ profile: {
+ email: "john@example.com",
+ address: {
+ street: "123 Main St",
+ city: "Somewhere"
+ }
+ }
+};
+
+console.log(user.profile?.address?.street); // "123 Main St"
+console.log(user.profile?.phone?.number); // undefined
+```
+
+## Object Destructuring
+
+- **Definition**: Object destructuring allows you to extract values from objects and assign them to variables in a more concise and readable way.
+
+```js
+const person = { name: "Alice", age: 30, city: "New York" };
+
+const { name, age } = person;
+
+console.log(name); // Alice
+console.log(age); // 30
+```
+
+## Working with JSON
+
+- **Definition**: JSON stands for JavaScript Object Notation. It is a lightweight, text-based data format that is commonly used to exchange data between a server and a web application.
+
+```js
+{
+ "name": "Alice",
+ "age": 30,
+ "isStudent": false,
+ "list of courses": ["Mathematics", "Physics", "Computer Science"]
+}
+```
+
+- **`JSON.stringify()`**: This method is used to convert a JavaScript object into a JSON string. This is useful when you want to store or transmit data in a format that can be easily shared or transferred between systems.
+
+```js
+const user = {
+ name: "John",
+ age: 30,
+ isAdmin: true
+};
+
+const jsonString = JSON.stringify(user);
+console.log(jsonString); // '{"name":"John","age":30,"isAdmin":true}'
+```
+
+- **`JSON.parse()`**: This method converts a JSON string back into a JavaScript object. This is useful when you retrieve JSON data from a web server or from localStorage and you need to manipulate the data in your application.
+
+```js
+const jsonString = '{"name":"John","age":30,"isAdmin":true}';
+const userObject = JSON.parse(jsonString);
+
+// result: { name: 'John', age: 30, isAdmin: true }
+console.log(userObject);
+```
+
+
+## Working with Loops
+
+- **`for` Loop**: This type of loop is used to repeat a block of code a certain number of times. This loop is broken up into three parts: initialization statement, condition, and the increment/decrement statement. The initialization statement is executed before the loop starts. It is typically used to initialize a counter variable. The condition is evaluated before each iteration of the loop. An iteration is a single pass through the loop. If the condition is `true`, the code block inside the loop is executed. If the condition is `false`, the loop stops and you move on to the next block of code. The increment/decrement statement is executed after each iteration of the loop. It is typically used to increment or decrement the counter variable.
+
+```js
+for (let i = 0; i < 5; i++) {
+ console.log(i);
+}
+```
+
+- **`for...of` Loop**: This type of loop is used when you need to loop over values from an iterable. Examples of iterables would be arrays, and strings.
+
+```js
+const numbers = [1, 2, 3, 4, 5];
+
+for (const num of numbers) {
+ console.log(num);
+}
+```
+
+- **`for...in` Loop**: This type of loop is best used when you need to loop over the properties of an object. This loop will iterate over all enumerable properties of an object, including inherited properties and non-numeric properties.
+
+```js
+const fruit = {
+ name: 'apple',
+ color: 'red',
+ price: 0.99
+};
+
+for (const prop in fruit) {
+ console.log(fruit[prop]);
+}
+```
+
+- **`while` Loop**: This type of loop will run a block of code as long as the condition is `true`.
+
+```js
+let i = 5;
+
+while (i > 0) {
+ console.log(i);
+ i--;
+}
+```
+
+- **`do...while` Loop**: This type of loop will execute the block of code at least once before checking the condition.
+
+```js
+let userInput;
+
+do {
+ userInput = prompt("Please enter a number between 1 and 10");
+} while (Number(userInput) < 1 || Number(userInput) > 10);
+
+alert("You entered a valid number!");
+```
+
+## `break` and `continue` Statements
+
+- **Definition**: A `break` statement is used to exit a loop early, while a `continue` statement is used to skip the current iteration of a loop and move to the next one.
+
+```js
+// Example of break statement
+for (let i = 0; i < 10; i++) {
+ if (i === 5) {
+ break;
+ }
+ console.log(i);
+}
+
+// Output: 0, 1, 2, 3, and 4
+
+// Example of continue statement
+for (let i = 0; i < 10; i++) {
+ if (i === 5) {
+ continue;
+ }
+ console.log(i);
+}
+
+// Output: 0, 1, 2, 3, 4, 6, 7, 8, and 9
+```
+
+## String Constructor and `toString()` Method
+
+- **Definition**: A string object is used to represent a sequence of characters. String objects are created using the `String` constructor function, which wraps the primitive value in an object.
+
+```js
+const greetingObject = new String("Hello, world!");
+
+console.log(typeof greetingObject); // "object"
+```
+
+- **`toString()` Method**: This method converts a value to its string representation. It is a method you can use for numbers, booleans, arrays, and objects.
+
+```js
+const num = 10;
+console.log(num.toString()); // "10"
+
+const arr = [1, 2, 3];
+console.log(arr.toString()); // "1,2,3"
+```
+
+This method accepts an optional radix which is a number from 2 to 36. This radix represents the base, such as base 2 for binary or base 8 for octal. If the radix is not specified, it defaults to base 10, which is decimal.
+
+
+```js
+const num = 10;
+console.log(num.toString(2)); // "1010"(binary)
+```
+
+## Number Constructor
+
+- **Definition**: The `Number` constructor is used to create a number object. The number object contains a few helpful properties and methods like the `isNaN` and `toFixed` method. Most of the time, you will be using the `Number` constructor to convert other data types to the number data type.
+
+```js
+const myNum = new Number("34");
+console.log(typeof myNum); // "object"
+
+const num = Number('100');
+console.log(num); // 100
+
+console.log(typeof num); // number
+```
+
+## Best Practices for Naming Variables and Functions
+
+- **camelCasing**: By convention, JavaScript developers will use camel casing for naming variables and functions. Camel casing is where the first word is all lowercase and the following words start with a capital letter. Ex. `isLoading`.
+
+- **Naming Booleans**: For boolean variables, it's a common practice to use prefixes such as "is", "has", or "can".
+
+```js
+let isLoading = true;
+let hasPermission = false;
+let canEdit = true;
+```
+
+- **Naming Functions**: For functions, the name should clearly indicate what the function does. For functions that return a boolean (often called predicates), you can use the same "is", "has", or "can" prefixes. When you have functions that retrieve data, it is common to start with the word "get". When you have functions that set data, it is common start with the word "set". For event handler functions, you might prefix with "handle" or suffix with "Handler".
+
+```js
+function getUserData() { /* ... */ }
+
+function isValidEmail(email) { /* ... */ }
+
+function getProductDetails(productId) { /* ... */ }
+
+function setUserPreferences(preferences) { /* ... */ }
+
+function handleClick() { /* ... */ }
+```
+
+- **Naming Variables Inside Loops**: When naming iterator variables in loops, it's common to use single letters like `i`, `j`, or `k`.
+
+```js
+for (let i = 0; i < array.length; i++) { /* ... */ }
+```
+
+## Working with Sparse Arrays
+
+- **Definition**: It is possible to have arrays with empty slots. Empty slots are defined as slots with nothing in them. This is different than array slots with the value of `undefined`. These types of arrays are known as sparse arrays.
+
+```js
+const sparseArray = [1, , , 4];
+console.log(sparseArray.length); // 4
+```
+
+## Linters and Formatters
+
+- **Linters**: A linter is a static code analysis tool that flags programming errors, bugs, stylistic errors, and suspicious constructs. An example of a common linter would be ESLint.
+- **Formatters**: Formatters are tools that automatically format your code to adhere to a specific style guide. An example of a common formatter would be Prettier.
+
+## Memory Management
+
+- **Definition**: Memory management is the process of controlling the memory, allocating it when needed and freeing it up when it's no longer needed. JavaScript uses automatic memory management. This means that JavaScript (more specifically, the JavaScript engine in your web browser) takes care of memory allocation and deallocation for you. You don't have to explicitly free up memory in your code. This automatic process is often called "garbage collection."
+
+## Closures
+
+- **Definition**: A closure is a function that has access to variables in its outer (enclosing) lexical scope, even after the outer function has returned.
+
+```js
+function outerFunction(x) {
+ let y = 10;
+ function innerFunction() {
+ console.log(x + y);
+ }
+ return innerFunction;
+}
+
+let closure = outerFunction(5);
+closure(); // 15
+```
+
+## `var` Keyword and Hoisting
+
+- **Definition**: `var` was the original way to declare variables before 2015. But there were some issues that came with `var` in terms of scope, redeclaration and more. So that is why modern JavaScript programming using `let` and `const` instead.
+- **Redeclaring Variables with `var`**: If you try to redeclare a variable using `let`, then you would get a `SyntaxError`. But with `var`, you are allowed to redeclare a variable.
+
+```js
+// Uncaught SyntaxError: Identifier 'num' has already been declared
+let num = 19;
+let num = 18;
+
+var myNum = 5;
+var myNum = 10; // This is allowed and doesn't throw an error
+
+console.log(myNum) // 10
+```
+
+- **`var` and Scope**: Variables declared with `var` inside a block (like an `if` statement or a `for` loop) are still accessible outside that block.
+
+```js
+if (true) {
+ var num = 5;
+}
+console.log(num); // 5
+```
+
+- **Hoisting**: This is JavaScript's default behavior of moving declarations to the top of their respective scopes during the compilation phase, before the code is executed. When you declare a variable using the `var` keyword, JavaScript hoists the declaration to the top of its scope.
+
+```js
+console.log(num); // undefined
+var num = 5;
+console.log(num); // 5
+```
+
+When you declare a function using the function declaration syntax, both the function name and the function body are hoisted. This means you can call a function before you've declared it in your code.
+
+```js
+sayHello(); // "Hello, World!"
+
+function sayHello() {
+ console.log("Hello, World!");
+}
+```
+
+Variable declarations made with `let` or `const` are hoisted, but they are not initialized, and you can't access them before the actual declaration in your code. This behavior is often referred to as the "temporal dead zone".
+
+```js
+console.log(num); // Throws a ReferenceError
+let num = 10;
+```
+
+## Working with Imports, Exports and Modules
+
+- **Module**: This is a self-contained unit of code that encapsulates related functions, classes, or variables.
+- **Imports and Exports**: It is common practice to have separate files for reusable pieces of code like helper functions or arrays that you wish to use across many files. To do this, you would need ot export that code and import it in the file you wish to use it in.
+
+```js
+// This function is located in a file called math.js
+export function add(num1, num2) {
+ return num1 + num2;
+}
+
+// We can import the add function from the math.js file
+import { add } from './math.js';
+
+// This line imports everything from the file
+// import * as Math from './math.js';
+
+console.log(add(5, 3)); // 8
+```
+
+
+## Callback Functions and the `forEach` Method
+
+- **Definition**: In JavaScript, a callback function is a function that is passed as an argument to another function and is executed after the main function has finished its execution.
+- **`forEach()` Method**: This method is used to iterate over each element in an array and perform an operation on each element. The callback function in `forEach` can take up to three arguments: the current element, the index of the current element, and the array that `forEach` was called upon.
+
+```js
+const numbers = [1, 2, 3, 4, 5];
+
+// Result: 2 4 6 8 10
+numbers.forEach((number) => {
+ console.log(number * 2);
+});
+```
+
+## Higher Order Functions
+
+- **Definition**: A higher order function takes one or more functions for the arguments and returns a function or value for the result.
+
+```js
+function operateOnArray(arr, operation) {
+ const result = [];
+ for (let i = 0; i < arr.length; i++) {
+ result.push(operation(arr[i]));
+ }
+ return result;
+}
+
+function double(x) {
+ return x * 2;
+}
+
+const numbers = [1, 2, 3, 4, 5];
+const doubledNumbers = operateOnArray(numbers, double);
+console.log(doubledNumbers); // [2, 4, 6, 8, 10]
+```
+
+- **`map()` Method**: This method is used to create a new array by applying a given function to each element of the original array. The callback function can accept up to three arguments: the current element, the index of the current element, and the array that `map` was called upon.
+
+```js
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map((num) => num * 2);
+
+console.log(numbers); // [1,2,3,4,5]
+console.log(doubled); // [2,4,6,8,10]
+```
+
+- **`filter()` Method**: This method is used to create a new array with elements that pass a specified test, making it useful for selectively extracting items based on criteria. Just like the `map` method, the callback function for the `filter` method accepts the same three arguments: the current element being processed, the index, and the array.
+
+```js
+const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const evenNumbers = numbers.filter((num) => num % 2 === 0);
+
+console.log(evenNumbers); // [2, 4, 6, 8, 10]
+```
+
+- **`reduce()` Method**: This method is used to process an array and condense it into a single value. This single value can be a number, a string, an object, or even another array. The `reduce()` method works by applying a function to each element in the array, in order, passing the result of each calculation on to the next. This function is often called the reducer function. The reducer function takes two main parameters: an accumulator and the current value. The accumulator is where you store the running result of your operations, and the current value is the array element being processed.
+
+```js
+const numbers = [1, 2, 3, 4, 5];
+const sum = numbers.reduce(
+ (accumulator, currentValue) => accumulator + currentValue,
+ 0
+);
+
+console.log(sum); // 15
+```
+
+## Method Chaining
+
+- **Definition**: Method chaining is a programming technique that allows you to call multiple methods on the same object in a single line of code. This technique can make your code more readable and concise, especially when performing a series of operations on the same object.
+
+```js
+const result = " Hello, World! "
+ .trim()
+ .toLowerCase()
+ .replace("world", "JavaScript");
+
+console.log(result); // "hello, JavaScript!"
+```
+
+## Working with the `sort` Method
+
+- **Definition**: The `sort` method is used to sort the elements of an array and return a reference to the sorted array. No copy is made in this case because the elements are sorted in place.
+
+```js
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+fruits.sort();
+
+console.log(fruits); // ["Apple","Banana","Mango","Orange"]
+```
+
+If you need to sort numbers, then you will need to pass in a compare function. The `sort` method converts the elements to strings and then compares their sequences of UTF-16 code units values. UTF-16 code units are the numeric values that represent the characters in the string. Examples of UTF-16 code units are the numbers 65, 66, and 67 which represent the characters "A", "B", and "C" respectively. So the number 200 appears before the number 3 in an array, because the string "200" comes before the string "3" when comparing their UTF-16 code units.
+
+```js
+const numbers = [414, 200, 5, 10, 3];
+
+numbers.sort((a, b) => a - b);
+
+console.log(numbers); // [3, 5, 10, 200, 414]
+```
+
+The parameters `a` and `b` are the two elements being compared. The compare function should return a negative value if `a` should come before `b`, a positive value if `a` should come after `b`, and zero if `a` and `b` are equal.
+
+## Working with the `every` and `some` Methods
+
+- **`every()` Method**: This method tests whether all elements in an array pass a test implemented by a provided function. The `every()` method returns `true` if the provided function returns `true` for all elements in the array. If any element fails the test, the method immediately returns `false` and stops checking the remaining elements.
+
+```js
+const numbers = [2, 4, 6, 8, 10];
+const hasAllEvenNumbers = numbers.every((num) => num % 2 === 0);
+
+console.log(hasAllEvenNumbers); // true
+```
+
+- **`some()` Method**: This method checks if at least one element passes the test. The `some()` method returns `true` as soon as it finds an element that passes the test. If no elements pass the test, it returns `false`.
+
+```js
+const numbers = [1, 3, 5, 7, 8, 9];
+const hasSomeEvenNumbers = numbers.some((num) => num % 2 === 0);
+
+console.log(hasSomeEvenNumbers); // true
+```
+
+## Working with the DOM and Web API's
+
+- **API**: An API (Application Programming Interface) is a set of rules and protocols that allow software applications to communicate with each other and exchange data efficiently.
+- **Web API**: Web APIs are specifically designed for web applications. These types of APIs are often divided into two main categories: browser APIs and third-party APIs.
+- **Browser APIs**: These APIs expose data from the browser. As a web developer, you can access and manipulate this data using JavaScript.
+- **Third-Party APIs**: These are not built into the browser by default. You have to retrieve their code in some way. Usually, they will have detailed documentation explaining how to use their services. An example is the Google Maps API, which you can use to display interactive maps on your website.
+- **DOM**: The DOM stands for Document Object Model. It’s a programming interface that lets you interact with HTML documents. With the DOM, you can add, modify, or delete elements on a webpage. The root of the DOM tree is the `` element. It’s the top-level container for all the content of an HTML document. All other nodes are descendants of this root node. Then, below the root node, we find other nodes in the hierarchy. A parent node is an element that contains other elements. A child node is an element that is contained within another element.
+- **`navigator` Interface**: This provides information about the browser environment, such as the user agent string, the platform, and the version of the browser. A user agent string is a text string that identifies the browser and operating system being used.
+- **`window` Interface**: This represents the browser window that contains the DOM document. It provides methods and properties for interacting with the browser window, such as resizing the window, opening new windows, and navigating to different URLs.
+
+## Working with the `querySelector()`, `querySelectorAll()` and `getElementById()` Methods
+
+- **`getElementById()` Method**: This method is used to get an object that represents the HTML element with the specified `id`. Remember that ids must be unique in every HTML document, so this method will only return one Element object.
+
+```html
+
+```
+
+```js
+const container = document.getElementById("container");
+```
+
+- **`querySelector()` Method**: This method is used to get the first element in the HTML document that matches the CSS selector passed as argument.
+
+```html
+
+```
+
+```js
+const section = document.querySelector(".section");
+```
+
+- **`querySelectorAll()` Method**: You can use this method to get a list of all the DOM elements that match a specific CSS selector.
+
+```html
+
+
Sugar
+
Milk
+
Eggs
+
+```
+
+```js
+const ingredients = document.querySelectorAll('ul.ingredients li');
+```
+
+## Working with the `innerText()`, `innerHTML()`, `createElement()` and `textContent()` Methods
+
+- **`innerHTML` Property**: This is a property of the `Element` that is used to set or update parts of the HTML markup.
+
+```html
+
';
+```
+
+- **`createElement` Method**: This is used to create an HTML element.
+
+```js
+const img = document.createElement("img");
+```
+
+- **`innerText`**: This represents the visible text content of the HTML element and its descendants.
+
+```html
+
+
Hello, World!
+
I'm learning JavaScript
+
+```
+
+```js
+const container = document.getElementById("container");
+console.log(container.innerText);
+```
+
+- **`textContent`**: This returns the plain text content of an element, including all the text within its descendants.
+
+```html
+
+
Hello, World!
+
I'm learning JavaScript
+
+```
+
+```js
+const container = document.getElementById("container");
+console.log(container.textContent);
+```
+
+## Working with the `appendChild()` and `removeChild()` Methods
+
+- **`appendChild()` Method**: This method is used to add a node to the end of the list of children of a specified parent node.
+
+```html
+
+
Cake
+
Pie
+
+```
+
+```js
+const dessertsList = document.getElementById("desserts");
+const listItem = document.createElement("li");
+
+listItem.textContent = "Cookies";
+dessertsList.appendChild(listItem);
+```
+
+- **`removeChild()` Method**: This method is used to remove a node from the DOM.
+
+```html
+
+
Example sub heading
+
first paragraph
+
second paragraph
+
+```
+
+```js
+const sectionEl = document.getElementById("example-section");
+const lastParagraph = document.querySelector("#example-section p:last-of-type");
+
+sectionEl.removeChild(lastParagraph);
+```
+
+## Work with the `setAttribute` Method
+
+- **Definition**: This method is used to set the attribute for a given element. If the attribute already exists, then the value is updated. Otherwise, a new attribute is added with a value.
+
+```html
+
I am a paragraph
+```
+
+```js
+const para = document.getElementById("para");
+para.setAttribute("class", "my-class");
+```
+
+## Event Object
+
+- **Definition**: The `Event` object is a payload that triggers when a user interacts with your web page in some way. These interactions can be anything from clicking on a button or focusing an input to shaking their mobile device. All `Event` objects will have the `type` property. This property reveals the type of event that triggered the payload, such as keydown or click. These values will correspond to the same values you might pass to `addEventListener`(), where you can capture and utilize the `Event` object.
+
+## `addEventListener()` and `removeEventListener()` Methods
+
+- **`addEventListener` Method**: This method is used to listen for events. It takes two arguments: the event you want to listen for and a function that will be called when the event occurs. Some common examples of events would be click events, input events, change events, and input events.
+
+```js
+const btn = document.getElementById("btn");
+
+btn.addEventListener("click", () => alert("You clicked the button"));
+```
+
+- **`removeEventListener` Method**: This method is used to remove an event listener that was previously added to an element using the `addEventListener` method. This is useful when you want to stop listening for a particular event on an element.
+
+```js
+const bodyEl = document.querySelector("body");
+const para = document.getElementById("para");
+const btn = document.getElementById("btn");
+
+let isBgColorGrey = true;
+
+function toggleBgColor() {
+ bodyEl.style.backgroundColor = isBgColorGrey ? "blue" : "grey";
+ isBgColorGrey = !isBgColorGrey;
+}
+
+btn.addEventListener("click", toggleBgColor);
+
+para.addEventListener("mouseover", () => {
+ btn.removeEventListener("click", toggleBgColor);
+});
+```
+
+- **Inline Event Handlers**: Inline event handlers are special attributes on an HTML element that are used to execute JavaScript code when an event occurs. In modern JavaScript, inline event handlers are not considered best practice. It is preferred to use the `addEventListener` method instead.
+
+```html
+
+```
+
+## DOMContentLoaded
+
+- **Definition**: The `DOMContentLoaded` event is fired when everything in the HTML document has been loaded and parsed. If you have external stylesheets, or images, the `DOMContentLoaded` event will not wait for those to be loaded. It will only wait for the HTML to be loaded.
+
+## Working with `style` and `classList`
+
+- **`Element.style` Property**: This property is a read only property that represents the inline style of an element. You can use this property to get or set the style of an element.
+
+```js
+const paraEl = document.getElementById("para");
+paraEl.style.color = "red";
+```
+
+- **`Element.classList` Property**: This property is a read only property that can be used to add, remove, or toggle classes on an element.
+
+```js
+// Example adding a class
+const paraEl = document.getElementById("para");
+paraEl.classList.add("highlight");
+
+// Example removing a class
+paraEl.classList.remove("blue-background");
+
+// Example toggling a class
+const menu = document.getElementById("menu");
+const toggleBtn = document.getElementById("toggle-btn");
+
+toggleBtn.addEventListener("click", () => menu.classList.toggle("show"));
+```
+
+
+## Working with the `setTimeout` and `setInterval` Methods
+
+- **`setTimeout()` Method**: This method lets you delay an action for a specified time.
+
+```js
+setTimeout(() => {
+ console.log('This runs after 3 seconds');
+}, 3000);
+```
+
+- **`setInterval()` Method**: This method keeps runs a piece of code repeatedly at a set interval. Since `setInterval()` keeps executing the provided function at the specified interval, you might want to stop it. For this, you have to use the `clearInterval()` method.
+
+```js
+setInterval(() => {
+ console.log('This runs every 2 seconds');
+}, 2000);
+
+// Example using clearInterval
+const intervalID = setInterval(() => {
+ console.log('This will stop after 5 seconds');
+}, 1000);
+
+setTimeout(() => {
+ clearInterval(intervalID);
+}, 5000);
+```
+
+## The `requestAnimationFrame()` Method
+
+- **Definition**: This method allows you to schedule the next step of your animation before the next screen repaint, resulting in a fluid and visually appealing experience. The next screen repaint refers to the moment when the browser refreshes the visual display of the web page. This happens multiple times per second, typically around 60 times (or 60 frames per second) on most displays.
+
+```js
+function animate() {
+ // Update the animation...
+ // for example, move an element, change a style, and more.
+ update();
+ // Request the next frame
+ requestAnimationFrame(animate);
+}
+```
+
+## Web Animations API
+
+- **Definition**: The Web Animations API lets you create and control animations directly inside JavaScript.
+
+```js
+const square = document.querySelector('#square');
+
+const animation = square.animate(
+ [{ transform: 'translateX(0px)' }, { transform: 'translateX(100px)' }],
+ {
+ duration: 2000, // makes animation lasts 2 seconds
+ iterations: Infinity, // loops indefinitely
+ direction: 'alternate', // moves back and forth
+ easing: 'ease-in-out', // smooth easing
+ }
+);
+```
+
+## The Canvas API
+
+- **Definition**: The Canvas API is a powerful tool that lets you and manipulate graphics right inside your JavaScript file. To work with the Canvas API, you first need to provide a `