diff --git a/curriculum/challenges/english/blocks/review-javascript/6723d3cfdd0717d3f1bf27e3.md b/curriculum/challenges/english/blocks/review-javascript/6723d3cfdd0717d3f1bf27e3.md
index 572e8d53bd7..6204a87857b 100644
--- a/curriculum/challenges/english/blocks/review-javascript/6723d3cfdd0717d3f1bf27e3.md
+++ b/curriculum/challenges/english/blocks/review-javascript/6723d3cfdd0717d3f1bf27e3.md
@@ -5,7 +5,7 @@ challengeType: 31
dashedName: review-javascript
---
-# --description--
+# --interactive--
Review the concepts below to prepare for the upcoming prep exam.
@@ -22,29 +22,33 @@ Data types help the program understand the kind of data it's working with, wheth
- **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`.
+- **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',
+ name: "Fluffy",
age: 3,
- type: 'dog'
+ type: "dog"
};
```
- **Symbol**: The Symbol data type is a unique and immutable value that may be used as an identifier for object properties.
-In the example below, two symbols are created with the same description, but they are not equal.
+In this example below, two symbols are created with the same description, but they are not equal.
+
+:::interactive_editor
```js
-const crypticKey1= Symbol('saltNpepper');
-const crypticKey2= Symbol('saltNpepper');
+const crypticKey1= Symbol("saltNpepper");
+const crypticKey2= Symbol("saltNpepper");
console.log(crypticKey1 === crypticKey2); // 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.
@@ -64,21 +68,26 @@ let cityName;
- To assign a value to a variable, you can use the assignment operator `=`.
```js
-cityName = 'New York';
+cityName = "New York";
```
- Variables declared using `let` can be reassigned a new value.
+:::interactive_editor
+
```js
-cityName = 'Los Angeles';
+let cityName = "New York";
+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.
+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`.
@@ -104,53 +113,69 @@ 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
+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.
+:::interactive_editor
+
```js
-let studentName = 'Asad';
+let studentName = "Asad";
let studentAge = 25;
-let studentInfo = studentName + ' is ' + studentAge + ' years old.';
+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.
+:::interactive_editor
+
```js
-let message = 'Welcome to programming, ';
-message += 'Asad!';
+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.
+:::interactive_editor
+
```js
-let firstName = 'John';
-let lastName = 'Doe';
-let fullName = firstName.concat(' ', lastName);
+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.
+:::interactive_editor
+
```js
-console.log('Hello, World!');
+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 message = "Hello, World!"; // first statement ends here
let number = 42; // second statement starts here
```
@@ -194,91 +219,134 @@ error = "Not Found"; // This would cause an error in C#
- The `typeof` operator is used to check the data type of a variable. It returns a string indicating the type of the variable.
+:::interactive_editor
+
```js
let age = 25;
-console.log(typeof age); // number
+console.log(typeof age); // "number"
let isLoggedIn = true;
-console.log(typeof isLoggedIn); // boolean
+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.
+:::
+
+- However, there's a well-known quirk in JavaScript when it comes to `null`. The `typeof` operator returns `"object"` for `null` values.
+
+:::interactive_editor
```js
let user = null;
-console.log(typeof user); // object
+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.
+:::interactive_editor
+
```js
const developer = "Jessica";
-developer[0] // J
+console.log(developer[0]); // J
```
+:::
+
- **`\n` (Newline Character)**: You can create a newline in a string by using the `\n` newline character.
+:::interactive_editor
+
```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.
+:::interactive_editor
+
```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.
+:::interactive_editor
+
```js
const name = "Jessica";
-const greeting = `Hello, ${name}!`; // "Hello, Jessica!"
+const greeting = `Hello, ${name}!`;
+console.log(greeting); // "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.
+:::interactive_editor
+
```js
const letter = "A";
console.log(letter.charCodeAt(0)); // 65
```
+:::
+
- **The `fromCharCode()` Method**: This method converts an ASCII code into its corresponding character.
+:::interactive_editor
+
```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.
+:::interactive_editor
+
```js
const text = "The quick brown fox jumps over the lazy dog.";
console.log(text.indexOf("fox")); // 16
console.log(text.indexOf("cat")); // -1
```
+:::
+
- **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.
+:::interactive_editor
+
```js
const text = "The quick brown fox jumps over the lazy dog.";
console.log(text.includes("fox")); // true
console.log(text.includes("cat")); // false
```
+:::
+
- The **`slice()` Method**: This method returns a new array containing a shallow copy of a portion of the original array, specified by start and end indices. The new array contains references to the same elements as the original array (not duplicates). This means that if the elements are primitives (like numbers or strings), the values are copied; but if the elements are objects or arrays, the references are copied, not the objects themselves.
+:::interactive_editor
+
```js
const text = "freeCodeCamp";
console.log(text.slice(0, 4)); // "free"
@@ -286,55 +354,85 @@ console.log(text.slice(4, 8)); // "Code"
console.log(text.slice(8, 12)); // "Camp"
```
+:::
+
- **The `toUpperCase()` Method**: This method converts all the characters to uppercase letters and returns a new string with all uppercase characters.
+:::interactive_editor
+
```js
const text = "Hello, world!";
console.log(text.toUpperCase()); // "HELLO, WORLD!"
```
+:::
+
- **The `toLowerCase()` Method**: This method converts all characters in a string to lowercase.
+:::interactive_editor
+
```js
const text = "HELLO, WORLD!"
console.log(text.toLowerCase()); // "hello, world!"
```
+:::
+
- **The `replace()` Method**: This method allows you to find a specified value (like a word or character) in a string and replace it with another value. The method returns a new string with the replacement and leaves the original unchanged because JavaScript strings are immutable.
+:::interactive_editor
+
```js
const text = "I like cats";
console.log(text.replace("cats", "dogs")); // "I like dogs"
```
-
+
+:::
+
- **The `repeat()` Method**: This method is used to repeat a string a specified number of times.
+:::interactive_editor
+
```js
const text = "Hello";
console.log(text.repeat(3)); // "HelloHelloHello"
```
+:::
+
- **The `trim()` Method**: This method is used to remove whitespaces from both the beginning and the end of a string.
+:::interactive_editor
+
```js
const text = " Hello, world! ";
console.log(text.trim()); // "Hello, world!"
```
+:::
+
- **The `trimStart()` Method**: This method removes whitespaces from the beginning (or "start") of the string.
+:::interactive_editor
+
```js
const text = " Hello, world! ";
console.log(text.trimStart()); // "Hello, world! "
```
+:::
+
- **The `trimEnd()` Method**: This method removes whitespaces from the end of the string.
+:::interactive_editor
+
```js
const text = " Hello, world! ";
console.log(text.trimEnd()); // " Hello, world!"
```
+:::
+
- **The `prompt()` Method**: This method of the `window` 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. The second one is a default value which is optional and will fill the input field initially.
```js
@@ -345,7 +443,7 @@ const answer = window.prompt("What's your favorite animal?"); // This will chang
- **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
+## 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.
@@ -359,10 +457,12 @@ const answer = window.prompt("What's your favorite animal?"); // This will chang
- **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.
+:::interactive_editor
+
```js
const result = 5 + '10';
-console.log(result); // 510
+console.log(result); // "510"
console.log(typeof result); // string
const subtractionResult = '10' - 5;
@@ -386,10 +486,14 @@ 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 than 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:
+:::interactive_editor
+
```js
const result = (2 + 3) * 4;
@@ -404,10 +508,14 @@ 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.
+:::interactive_editor
+
```js
let x = 5;
@@ -421,7 +529,11 @@ 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 works the same way as earlier with the increment operator.
+:::
+
+- **Decrement Operator**: This operator is used to decrease the value by one. The prefix notation and postfix notation work the same way as earlier with the increment operator.
+
+:::interactive_editor
```js
let num = 5;
@@ -431,6 +543,8 @@ 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.
@@ -445,16 +559,24 @@ console.log(num); // 3
- **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.
+:::interactive_editor
+
```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.
+:::interactive_editor
+
```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.
@@ -469,6 +591,8 @@ console.log(5 === '5'); // false
- **Unary Plus Operator**: This operator converts its operand into a number. If the operand is already a number, it remains unchanged.
+:::interactive_editor
+
```js
const str = '42';
const num = +str;
@@ -477,13 +601,19 @@ console.log(num); // 42
console.log(typeof num); // number
```
+:::
+
- **Unary Negation (`-`) Operator**: This operator negates the operand.
+:::interactive_editor
+
```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
@@ -501,13 +631,15 @@ console.log(-num); // -4
- **`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.
+:::interactive_editor
+
```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
+ console.log('You got a B'); // You got a B
} else if (score >= 70) {
console.log('You got a C');
} else {
@@ -515,8 +647,12 @@ if (score >= 90) {
}
```
+:::
+
- **Ternary Operator**: This operator is often used as a shorter way to write `if else` statements.
+:::interactive_editor
+
```js
const temperature = 30;
const weather = temperature > 25 ? 'sunny' : 'cool';
@@ -524,9 +660,13 @@ 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.
+- **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.
+
+:::interactive_editor
```js
const result = true && 'hello';
@@ -534,9 +674,13 @@ 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`.
+:::interactive_editor
+
```js
const userSettings = {
theme: null,
@@ -548,6 +692,8 @@ 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.
@@ -557,12 +703,16 @@ console.log(theme); // light
- **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.
+:::interactive_editor
+
```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.
@@ -573,6 +723,8 @@ console.log(Math.round(4.8)); // 5
- **`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.
+:::interactive_editor
+
```js
console.log(isNaN(NaN)); // true
console.log(isNaN(undefined)); // true
@@ -591,6 +743,8 @@ 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.
@@ -599,35 +753,53 @@ console.log(Number.isNaN(undefined)); // false
- **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`.
+:::interactive_editor
+
```js
console.log(undefined < 0); // false (NaN < 0 is false)
console.log(undefined >= 0); // false (NaN >= 0 is false)
```
+:::
+
- **Comparisons and `null`**: The `null` type represents the intentional absence of a value. `null` converts to `0` in numeric contexts, which may result in unexpected behavior in numeric comparisons:
+:::interactive_editor
+
```js
console.log(null < 0); // false (0 < 0 is false)
console.log(null >= 0); // true (0 >= 0 is true)
```
+:::
+
- When using the equality operator (`==`), `null` and `undefined` only equal each other and themselves:
+:::interactive_editor
+
```js
console.log(null == undefined); // true
console.log(null == 0); // false
console.log(undefined == NaN); // false
```
+:::
+
- However, when using the strict equality operator (`===`), which checks both value and type without performing type coercion, `null` and `undefined` are not equal:
+:::interactive_editor
+
```js
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.
+- **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.
+
+:::interactive_editor
```js
const dayOfWeek = 3;
@@ -659,6 +831,8 @@ switch (dayOfWeek) {
}
```
+:::
+
## JavaScript Functions
- Functions are reusable blocks of code that perform a specific task.
@@ -693,23 +867,33 @@ 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`.
+:::interactive_editor
+
```js
const developers = ["Jessica", "Naomi", "Tom"];
-developers[0] // "Jessica"
-developers[1] // "Naomi"
+console.log(developers[0]) // "Jessica"
+console.log(developers[1]) // "Naomi"
-developers[10] // undefined
+console.log(developers[10]) // undefined
```
+:::
+
- **`length` Property**: This property is used to return the number of items in an array.
+:::interactive_editor
+
```js
const developers = ["Jessica", "Naomi", "Tom"];
-developers.length // 3
+console.log(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.
+:::interactive_editor
+
```js
const fruits = ['apple', 'banana', 'cherry'];
fruits[1] = 'blueberry';
@@ -717,10 +901,14 @@ 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.
+:::interactive_editor
+
```js
const chessboard = [
['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'],
@@ -736,10 +924,14 @@ const chessboard = [
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.
+:::interactive_editor
+
```js
const fruits = ["apple", "banana", "orange"];
@@ -750,8 +942,12 @@ 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.
+:::interactive_editor
+
```js
const fruits = ["apple", "banana", "orange", "mango", "kiwi"];
const [first, second, ...rest] = fruits;
@@ -761,10 +957,14 @@ 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.
+:::interactive_editor
+
```js
const desserts = ["cake", "cookies", "pie"];
desserts.push("ice cream");
@@ -772,8 +972,12 @@ 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`.
+:::interactive_editor
+
```js
const desserts = ["cake", "cookies", "pie"];
desserts.pop();
@@ -781,8 +985,12 @@ 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`.
+:::interactive_editor
+
```js
const desserts = ["cake", "cookies", "pie"];
desserts.shift();
@@ -790,8 +998,12 @@ 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.
+:::interactive_editor
+
```js
const desserts = ["cake", "cookies", "pie"];
desserts.unshift("ice cream");
@@ -799,8 +1011,12 @@ 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`.
+:::interactive_editor
+
```js
const fruits = ["apple", "banana", "orange", "banana"];
const index = fruits.indexOf("banana");
@@ -809,7 +1025,11 @@ 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.
+:::
+
+- **`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 is 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 is the number of elements you wish to remove. The following arguments are the elements you wish to add.
+
+:::interactive_editor
```js
const colors = ["red", "green", "blue"];
@@ -818,8 +1038,12 @@ 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.
+:::interactive_editor
+
```js
const programmingLanguages = ["JavaScript", "Python", "C++"];
@@ -827,8 +1051,12 @@ 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.
+:::interactive_editor
+
```js
const programmingLanguages = ["JavaScript", "Python", "C++"];
const newList = programmingLanguages.concat("Perl");
@@ -836,8 +1064,12 @@ 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, starting from a specified index or the entire array. A shallow copy will copy the reference to the array instead of duplicating it.
+:::interactive_editor
+
```js
const programmingLanguages = ["JavaScript", "Python", "C++"];
const newList = programmingLanguages.slice(1);
@@ -845,8 +1077,12 @@ const newList = programmingLanguages.slice(1);
console.log(newList); // ["Python", "C++"]
```
+:::
+
- **Spread Syntax**: The spread syntax is used to create shallow copies of an array.
+:::interactive_editor
+
```js
const originalArray = [1, 2, 3];
const shallowCopiedArray = [...originalArray];
@@ -857,8 +1093,12 @@ 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.
+:::interactive_editor
+
```js
const str = "hello";
const charArray = str.split("");
@@ -866,15 +1106,23 @@ const charArray = str.split("");
console.log(charArray); // ["h", "e", "l", "l", "o"]
```
+:::
+
- **`reverse()` Method**: This method reverses an array in place.
+:::interactive_editor
+
```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.
+:::interactive_editor
+
```js
const reversedArray = ["o", "l", "l", "e", "h"];
const reversedString = reversedArray.join("");
@@ -882,10 +1130,14 @@ 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.
+:::interactive_editor
+
```js
const person = {
name: "Alice",
@@ -897,8 +1149,12 @@ 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.
+:::interactive_editor
+
```js
const person = {
name: "Alice",
@@ -910,10 +1166,14 @@ 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.
+:::interactive_editor
+
```js
const person = {
name: "Alice",
@@ -926,10 +1186,14 @@ 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.
+:::interactive_editor
+
```js
const person = {
name: "Alice",
@@ -940,8 +1204,12 @@ 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.
+:::interactive_editor
+
```js
const person = {
name: "Bob",
@@ -951,10 +1219,14 @@ const person = {
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.
+:::interactive_editor
+
```js
const person = {
name: "Alice",
@@ -971,6 +1243,8 @@ const person = {
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.
@@ -980,6 +1254,8 @@ console.log(person.contact.phone.work); // "098-765-4321"
- **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.
+:::interactive_editor
+
```js
const person = {
name: "Bob",
@@ -992,6 +1268,8 @@ const person = {
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.
@@ -1004,7 +1282,9 @@ new Object()
- **Definition**: This operator lets you safely access object properties or call methods without worrying whether they exist.
-```js
+:::interactive_editor
+
+```ts
const user = {
name: "John",
profile: {
@@ -1020,10 +1300,14 @@ 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.
+:::interactive_editor
+
```js
const person = { name: "Alice", age: 30, city: "New York" };
@@ -1033,6 +1317,8 @@ 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.
@@ -1048,6 +1334,8 @@ console.log(age); // 30
- **`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.
+:::interactive_editor
+
```js
const user = {
name: "John",
@@ -1059,8 +1347,12 @@ 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 localStorage and you need to manipulate the data in your application.
+:::interactive_editor
+
```js
const jsonString = '{"name":"John","age":30,"isAdmin":true}';
const userObject = JSON.parse(jsonString);
@@ -1069,19 +1361,26 @@ const userObject = JSON.parse(jsonString);
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: the initialization statement, the 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.
+:::interactive_editor
+
```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 are arrays and strings.
+:::interactive_editor
+
```js
const numbers = [1, 2, 3, 4, 5];
@@ -1090,8 +1389,12 @@ for (const num of numbers) {
}
```
+:::
+
- **`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.
+:::interactive_editor
+
```js
const fruit = {
name: 'apple',
@@ -1104,8 +1407,12 @@ for (const prop in fruit) {
}
```
+:::
+
- **`while` Loop**: This type of loop will run a block of code as long as the condition is `true`.
+:::interactive_editor
+
```js
let i = 5;
@@ -1115,6 +1422,8 @@ while (i > 0) {
}
```
+:::
+
- **`do...while` Loop**: This type of loop will execute the block of code at least once before checking the condition.
```js
@@ -1131,6 +1440,8 @@ alert("You entered a valid number!");
- **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.
+:::interactive_editor
+
```js
// Example of break statement
for (let i = 0; i < 10; i++) {
@@ -1153,9 +1464,13 @@ for (let i = 0; i < 10; 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.
+- **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.
+
+:::interactive_editor
```js
const greetingObject = new String("Hello, world!");
@@ -1163,8 +1478,12 @@ 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.
+:::interactive_editor
+
```js
const num = 10;
console.log(num.toString()); // "10"
@@ -1173,18 +1492,26 @@ 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.
+:::interactive_editor
+
```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.
+:::interactive_editor
+
```js
const myNum = new Number("34");
console.log(typeof myNum); // "object"
@@ -1195,6 +1522,8 @@ 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`.
@@ -1231,15 +1560,19 @@ for (let i = 0; i < array.length; i++) { /* ... */ }
- **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.
+:::interactive_editor
+
```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 is Prettier.
+- **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
@@ -1249,6 +1582,8 @@ console.log(sparseArray.length); // 4
- **Definition**: A closure is a function that has access to variables in its outer (enclosing) lexical scope, even after the outer function has returned.
+:::interactive_editor
+
```js
function outerFunction(x) {
let y = 10;
@@ -1262,6 +1597,8 @@ 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 uses `let` and `const` instead.
@@ -1280,6 +1617,8 @@ 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.
+:::interactive_editor
+
```js
if (true) {
var num = 5;
@@ -1287,16 +1626,24 @@ if (true) {
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.
+:::interactive_editor
+
```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.
+:::interactive_editor
+
```js
sayHello(); // "Hello, World!"
@@ -1305,13 +1652,19 @@ function sayHello() {
}
```
+:::
+
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".
+:::interactive_editor
+
```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. To create a module, you write your JavaScript code in a separate file.
@@ -1352,9 +1705,11 @@ console.log(Math.subtract(5, 3)); // 2
## Callback Functions and the `forEach` Method
-- **Definition**: In JavaScript, a callback function is a function that is passed as an argument to another function to be invoked at some point from the first function.
+- **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.
+:::interactive_editor
+
```js
const numbers = [1, 2, 3, 4, 5];
@@ -1364,9 +1719,13 @@ numbers.forEach((number) => {
});
```
+:::
+
## 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.
+- **Definition**: A higher order function takes one or more functions for the arguments and returns a function or value for the result.
+
+:::interactive_editor
```js
function operateOnArray(arr, operation) {
@@ -1386,8 +1745,12 @@ 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.
+:::interactive_editor
+
```js
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);
@@ -1396,8 +1759,12 @@ 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.
+:::interactive_editor
+
```js
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
@@ -1405,8 +1772,12 @@ 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.
+:::interactive_editor
+
```js
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(
@@ -1417,10 +1788,14 @@ const sum = numbers.reduce(
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.
+:::interactive_editor
+
```js
const result = " Hello, World! "
.trim()
@@ -1430,10 +1805,14 @@ const result = " Hello, World! "
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.
+:::interactive_editor
+
```js
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
@@ -1441,8 +1820,12 @@ 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.
+:::interactive_editor
+
```js
const numbers = [414, 200, 5, 10, 3];
@@ -1451,12 +1834,16 @@ 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.
+:::interactive_editor
+
```js
const numbers = [2, 4, 6, 8, 10];
const hasAllEvenNumbers = numbers.every((num) => num % 2 === 0);
@@ -1464,8 +1851,12 @@ 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`.
+:::interactive_editor
+
```js
const numbers = [1, 3, 5, 7, 8, 9];
const hasSomeEvenNumbers = numbers.some((num) => num % 2 === 0);
@@ -1473,9 +1864,11 @@ const hasSomeEvenNumbers = numbers.some((num) => num % 2 === 0);
console.log(hasSomeEvenNumbers); // true
```
+:::
+
## Working with the DOM and Web APIs
-- **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.
+- **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.
@@ -1485,48 +1878,69 @@ console.log(hasSomeEvenNumbers); // true
## 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.
+- **`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.
+
+:::interactive_editor
```html
+
```
```js
const container = document.getElementById("container");
+console.log(container)
```
+:::
+
- **`querySelector()` Method**: This method is used to get the first element in the HTML document that matches the CSS selector passed as an argument.
+:::interactive_editor
+
```html
+
```
```js
const section = document.querySelector(".section");
+console.log(section)
```
+:::
+
- **`querySelectorAll()` Method**: You can use this method to get a list of all the DOM elements that match a specific CSS selector.
+:::interactive_editor
+
```html
Sugar
Milk
Eggs
+
```
```js
const ingredients = document.querySelectorAll('ul.ingredients li');
+console.log(ingredients)
```
+:::
+
## 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.
+:::interactive_editor
+
```html
';
```
+:::
+
- **`createElement` Method**: This is used to create an HTML element.
```js
@@ -1542,11 +1958,14 @@ const img = document.createElement("img");
- **`innerText`**: This represents the visible text content of the HTML element and its descendants.
+:::interactive_editor
+
```html
Hello, World!
I'm learning JavaScript
+
```
```js
@@ -1554,13 +1973,18 @@ 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.
+:::interactive_editor
+
```html
Hello, World!
I'm learning JavaScript
+
```
```js
@@ -1568,15 +1992,20 @@ 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.
+:::interactive_editor
+
```html
Cake
Pie
+
```
```js
@@ -1587,14 +2016,19 @@ listItem.textContent = "Cookies";
dessertsList.appendChild(listItem);
```
+:::
+
- **`removeChild()` Method**: This method is used to remove a node from the DOM.
+:::interactive_editor
+
```html
Example sub heading
first paragraph
second paragraph
+
```
```js
@@ -1604,12 +2038,17 @@ const lastParagraph = document.querySelector("#example-section p:last-of-type");
sectionEl.removeChild(lastParagraph);
```
-## Work with the `setAttribute` Method
+:::
+
+## 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.
+:::interactive_editor
+
```html
I am a paragraph
+
```
```js
@@ -1617,6 +2056,8 @@ 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.
@@ -1625,13 +2066,32 @@ para.setAttribute("class", "my-class");
- **`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, and change events.
+:::interactive_editor
+
+```html
+
+
+```
+
```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.
+:::
+
+- **`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.
+
+:::interactive_editor
+
+```html
+
+
Hover over me to disable the button's click event
+
+
+
+```
```js
const bodyEl = document.querySelector("body");
@@ -1652,27 +2112,72 @@ para.addEventListener("mouseover", () => {
});
```
+:::
+
- **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.
+:::interactive_editor
+
```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.
+- **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.
+:::interactive_editor
+
+```html
+
This paragraph will turn red.
+
+```
+
```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.
+:::interactive_editor
+
+```html
+
+
This paragraph will have classes added and removed.
+
Menu Content
+
+
+```
+
+```css
+.highlight {
+ background-color: yellow;
+}
+
+.blue-background {
+ background-color: lightblue;
+}
+
+.menu {
+ display: none;
+ padding: 10px;
+ background-color: #f0f0f0;
+}
+
+.menu.show {
+ display: block;
+}
+```
+
```js
// Example adding a class
const paraEl = document.getElementById("para");
@@ -1688,19 +2193,27 @@ const toggleBtn = document.getElementById("toggle-btn");
toggleBtn.addEventListener("click", () => menu.classList.toggle("show"));
```
+:::
-## Working with the `setTimeout` and `setInterval` Methods
+
+## Working with the `setTimeout()` and `setInterval()` Methods
- **`setTimeout()` Method**: This method lets you delay an action for a specified time.
+:::interactive_editor
+
```js
setTimeout(() => {
console.log('This runs after 3 seconds');
}, 3000);
```
+:::
+
- **`setInterval()` Method**: This method keeps running 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.
+:::interactive_editor
+
```js
setInterval(() => {
console.log('This runs every 2 seconds');
@@ -1716,6 +2229,8 @@ setTimeout(() => {
}, 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.
@@ -1734,6 +2249,23 @@ function animate() {
- **Definition**: The Web Animations API lets you create and control animations directly inside JavaScript.
+:::interactive_editor
+
+```html
+
+
+
+```
+
+```css
+#square {
+ width: 100px;
+ height: 100px;
+ background: red;
+}
+
+```
+
```js
const square = document.querySelector('#square');
@@ -1748,12 +2280,17 @@ const animation = square.animate(
);
```
+:::
+
## The Canvas API
- **Definition**: The Canvas API is a powerful tool that lets you manipulate graphics right inside your JavaScript file. To work with the Canvas API, you first need to provide a `canvas` element in HTML. This element acts as a drawing surface you can manipulate with the instance methods and properties of the interfaces in the Canvas API. This API has interfaces like `HTMLCanvasElement`, `CanvasRenderingContext2D`, `CanvasGradient`, `CanvasPattern`, and `TextMetrics` which contain methods and properties you can use to create graphics in your JavaScript file.
+:::interactive_editor
+
```html
+
```
```js
@@ -1770,16 +2307,21 @@ ctx.fillStyle = 'crimson';
ctx.fillRect(1, 1, 150, 100);
```
+:::
+
## Opening and Closing Dialogs and Modals with JavaScript
- **Modal and Dialog Definitions**: Dialogs let you display important information or actions to users. With the HTML built-in dialog element, you can easily create these dialogs (both modal and non-modal dialogs) in your web apps. A modal dialog is a type of dialog that forces the user to interact with it before they can access the rest of the application or webpage. In contrast, a non-modal dialog allows the user to continue interacting with other parts of the page or application even when the dialog is open. It doesn't prevent access to the rest of the content.
- **`showModal()` Method**: This method is used to open a modal.
+:::interactive_editor
+
```html
+
```
```js
@@ -1791,14 +2333,19 @@ openButton.addEventListener('click', () => {
});
```
+:::
+
- **`close()` Method**: This method is used to close the modal.
+:::interactive_editor
+
```html
+
```
```js
@@ -1815,10 +2362,14 @@ closeButton.addEventListener('click', () => {
});
```
+:::
+
## The Change Event
- **Definition**: The change event is a special event which is fired when the user modifies the value of certain input elements. Examples would include when a checkbox or a radio button is ticked. Or when the user makes a selection from something like a date picker or dropdown menu.
+:::interactive_editor
+
```html
+
```
```js
@@ -1842,6 +2394,8 @@ selectEl.addEventListener("change", (e) => {
});
```
+:::
+
## Event Bubbling
- **Definition**: Event bubbling, or propagation, refers to how an event "bubbles up" to parent objects when triggered.
@@ -1869,41 +2423,107 @@ selectEl.addEventListener("change", (e) => {
Here is an example of a live region that is dynamically updated by JavaScript:
+:::interactive_editor
+
```html
+
+
+
+
```
-```js
-const statusEl = document.getElementById("status");
-statusEl.textContent = "Your file has been successfully uploaded.";
-```
+:::
- **`contenteditable` attribute**: Turns the element into a live editor, allowing users to update its content as if it were a text field. When there is no visible label or heading for a contenteditable region, add an accessible name using the `aria-label` attribute to help screen reader users understand the purpose of the editable area.
+:::interactive_editor
+
```html
-
+
Editable content goes here
+
+
+
+
```
+:::
+
## `focus` and `blur` Events
- **`blur` event**: Fires when an element loses focus.
-```js
-element.addEventListener("blur", () => {
- // Handle when user leaves the element
-});
+:::interactive_editor
+
+```html
+
+
+
+
+
```
+:::
+
- **`focus` event**: Fires when an element receives focus.
-```js
-element.addEventListener("focus", () => {
- // Handle when user enters the element
-});
+:::interactive_editor
+
+```html
+
+
+
+
+
```
+:::
+
## Common Types of Error Messages
- **SyntaxError**: These errors happen when you write something incorrectly in your code, like missing a parenthesis, or a bracket. Think of it like a grammar mistake in a sentence.
@@ -1914,11 +2534,15 @@ const arr = ["Beau", "Quincy" "Tom"]
- **ReferenceError**: There are several types of Reference Errors, triggered in different ways. The first type of reference error would be not defined variables. Another example of a ReferenceError is trying to access a variable, declared with `let` or `const`, before it has been defined.
+:::interactive_editor
+
```js
console.log(num);
const num = 50;
```
+:::
+
- **TypeError**: These errors occur when you try to perform an operation on the wrong type.
```js
@@ -1942,6 +2566,8 @@ arr.length = -1;
- **Definition**: The `throw` statement in JavaScript is used to throw a user-defined exception. An exception in programming, is when an unexpected event happens and disrupts the normal flow of the program.
+:::interactive_editor
+
```js
function validateNumber(input) {
if (typeof input !== "number") {
@@ -1951,10 +2577,14 @@ function validateNumber(input) {
}
```
+:::
+
## `try...catch...finally`
- **Definition**: The `try` block is used to wrap code that might throw an error. It acts as a safe space to try something that could fail. The `catch` block captures and handles errors that occur in the try block. You can use the error object inside catch to inspect what went wrong. The `finally` block runs after the try and catch blocks, regardless of whether an error occurred. It's commonly used for cleanup tasks, such as closing files or releasing resources.
+:::interactive_editor
+
```js
function processInput(input) {
if (typeof input !== "string") {
@@ -1966,17 +2596,23 @@ function processInput(input) {
try {
console.log("Starting to process input...");
- const result = processInput(9);
- console.log("Processed result:", result);
+ const result1 = processInput("hello");
+ console.log("Processed result:", result1); // HELLO
+ const result2 = processInput(9); // throws TypeError
+ console.log("Processed result:", result2); // not executed
} catch (error) {
console.error("Error occurred:", error.message);
}
```
+:::
+
## Debugging Techniques
- **`debugger` Statement**: This statement lets you pause your code at a specific line to investigate what's going on in the program.
+:::interactive_editor
+
```js
let firstNumber = 5;
let secondNumber = 10;
@@ -1987,6 +2623,8 @@ let sum = firstNumber + secondNumber;
console.log(sum);
```
+:::
+
- **Breakpoints**: Breakpoints let you pause the execution of your code at a specific line of your choice. After the pause, you can inspect variables, evaluate expressions, and examine the call stack.
- **Watchers**: Watch expressions lets you monitor the values of variables or expressions as the code runs even if they are out of the current scope.
- **Profiling**: Profiling helps you identify performance bottlenecks by letting you capture screenshots and record CPU usage, function calls, and execution time.
@@ -2008,22 +2646,32 @@ const regex = /freeCodeCamp/;
- **`test()` Method**: This method accepts a string, which is the string to test for matches against the regular expression. This method will return a boolean if the string matches the regex.
+:::interactive_editor
+
```js
const regex = /freeCodeCamp/;
const test = regex.test("e");
console.log(test); // false
```
+:::
+
- **`match()` Method**: This method accepts a regular expression, although you can also pass a string which will be constructed into a regular expression. The `match` method returns the match array for the string.
+:::interactive_editor
+
```js
const regex = /freeCodeCamp/;
const match = "freeCodeCamp".match(regex);
console.log(match); // ["freeCodeCamp"]
```
+:::
+
- **`replace()` Method**: This method accepts two arguments: the regular expression to match (or a string), and the string to replace the match with (or a function to run against each match).
+:::interactive_editor
+
```js
const regex = /Jessica/;
const str = "Jessica is rly kewl";
@@ -2031,16 +2679,24 @@ const replaced = str.replace(regex, "freeCodeCamp");
console.log(replaced); // "freeCodeCamp is rly kewl"
```
+:::
+
- **`replaceAll` Method**: This method is used to replace all occurrences of a specified pattern with a new string. This method will throw an error if you give it a regular expression without the global modifier.
+:::interactive_editor
+
```js
const text = "I hate JavaScript! I hate programming!";
const newText = text.replaceAll("hate", "love");
console.log(newText); // "I love JavaScript! I love programming!"
```
+:::
+
- **`matchAll` Method**: This method is used to retrieve all matches of a given regular expression in a string, including capturing groups, and returns them as an iterator. An iterator is an object that allows you to go through (or "iterate over") a collection of items.
+:::interactive_editor
+
```js
const str = "JavaScript, Python, JavaScript, Swift, JavaScript";
const regex = /JavaScript/g;
@@ -2052,27 +2708,39 @@ for (let match of iterator) {
}
```
+:::
+
## Regular Expression Modifiers
- **Definition**: Modifiers, often referred to as "flags", modify the behavior of a regular expression.
- **`i` Flag**: This flag makes a regex ignore case.
+:::interactive_editor
+
```js
const regex = /freeCodeCamp/i;
console.log(regex.test("freecodecamp")); // true
console.log(regex.test("FREECODECAMP")); // true
```
+:::
+
- **`g` Flag**: This flag, or global modifier, allows your regular expression to match a pattern more than once.
+:::interactive_editor
+
```js
const regex = /freeCodeCamp/gi;
console.log(regex.test("freeCodeCamp")); // true
console.log(regex.test("freeCodeCamp is great")); // false
```
+:::
+
- **Anchor Definition**: The `^` anchor, at the beginning of the regular expression, says "match the start of the string". The `$` anchor, at the end of the regular expression, says "match the end of the string".
+:::interactive_editor
+
```js
const start = /^freeCodeCamp/i;
const end = /freeCodeCamp$/i;
@@ -2080,8 +2748,12 @@ console.log(start.test("freecodecamp")); // true
console.log(end.test("freecodecamp")); // true
```
+:::
+
- **`m` Flag**: Anchors look for the beginning and end of the entire string. But you can make a regex handle multiple lines with the `m` flag, or the multi-line modifier.flag, or the multi-line modifier.
+:::interactive_editor
+
```js
const start = /^freecodecamp/im;
const end = /freecodecamp$/im;
@@ -2091,17 +2763,22 @@ it's my favorite
`;
console.log(start.test(str)); // true
console.log(end.test(str)); // true
-
```
+:::
+
- **`d` Flag**: This flag expands the information you get in a match object.
-```js
+:::interactive_editor
+
+```ts
const regex = /freecodecamp/di;
const string = "we love freecodecamp isn't freecodecamp great?";
console.log(string.match(regex));
```
+:::
+
- **`u` Flag**: This expands the functionality of a regular expression to allow it to match special unicode characters. The `u` flag gives you access to special classes like the `Extended_Pictographic` to match most emoji. There is also a `v` flag, which further expands the functionality of the unicode matching.
- **`y` Flag**: The sticky modifier behaves very similarly to the global modifier, but with a few exceptions. The biggest one is that a global regular expression will start from lastIndex and search the entire remainder of the string for another match, but a sticky regular expression will return null and reset the lastIndex to 0 if there is not immediately a match at the previous lastIndex.
- **`s` Flag**: The single-line modifier allows a wildcard character, represented by a `.` in regex, to match linebreaks - effectively treating the string as a single line of text.
@@ -2191,62 +2868,134 @@ const regex = /free(code)camp/i;
- **Backreferences**: A backreference in regular expressions refers to a way to reuse a part of the pattern that was matched earlier in the same expression. It allows you to refer to a captured group (a part of the pattern in parentheses) by its number. For example, `$1` refers to the first captured group.
+:::interactive_editor
+
```js
const regex = /free(co+de)camp/i;
console.log("freecoooooooodecamp".replace(regex, "paid$1world"));
```
+:::
+
## Validating Forms with JavaScript
-- **Constraint Validation API**: Certain HTML elements, such as the `textarea` and `input` elements, expose a constraint validation API. This API allows you to assert that the user's provided value for that element passes any HTML-level validation you have written, such as minimum length or pattern matching.
+- **Constraint Validation API**: Certain HTML elements, such as the `textarea` and `input` elements, expose a constraint validation API. This API allows you to assert that the user's provided value for that element passes any HTML-level validation you have written, such as minimum length or pattern matching.
- **`checkValidity()` method**: This method returns `true` if the element matches all HTML validation (based on its attributes), and `false` if it fails.
-```js
-const input = document.querySelector("input");
+:::interactive_editor
-input.addEventListener("input", (e) => {
- if (!e.target.checkValidity()) {
- e.target.setCustomValidity("You must use a .com email.")
- }
-})
+```html
+
+
+
```
+:::
+
- **`reportValidity()` Method**: This method tells the browser that the `input` is invalid.
-```js
-const input = document.querySelector("input");
+:::interactive_editor
-input.addEventListener("input", (e) => {
- if (!e.target.checkValidity()) {
- e.target.reportValidity();
- }
-})
+```html
+
+
+
```
+:::
+
- **`validity` Property**: This property is used to get or set the validity state of form controls (like ``, `