diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md index 1f775704be1..e5ff9283123 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md @@ -1,109 +1,14 @@ --- id: 673282bea35dbf129efb63d6 title: What Are Switch Statements and How Do They Differ from If/Else Chains? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: 3qSSecohwrc dashedName: what-are-switch-statements-and-how-do-they-differ-from-if-else-chains --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: - -`Switch` statements and `if/else` chains are both control flow structures in programming that allow us to execute different code blocks based on certain conditions. However, they have distinct characteristics and use cases. - -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. - -Here's a basic structure of a `switch` statement: - -```js -switch (expression) { - case value1: - // code to be executed if expression === value1 - break; - case value2: - // code to be executed if expression === value2 - break; - default: - // code to be executed if expression doesn't match any case -} -``` - -The `break` statement at the end of each `case` is crucial. It tells the program to exit the `switch` block once a matching `case` has been executed. Without it, the program would continue executing subsequent cases, a behavior known as "fall-through". - -`Switch` statements are typically used when you're comparing a single variable against multiple possible values. They're especially useful when you have many potential conditions to check against a single variable. - -Here is an example using a `switch` statement for the days of the week: - -```js -let 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."); -} -``` - -`Switch` statements can be more readable and concise when dealing with many possible values for a single variable. - -`If/else` statements on the other hand are more flexible. They can evaluate complex conditions and different variables in each clause. This makes them suitable for a wider range of scenarios. - -Here is an example of when you might use an `if/else` statement over a `switch` statement: - -```js -let creditScore = 720; -let annualIncome = 60000; -let loanAmount = 200000; - -let eligibilityStatus; - -if (creditScore >= 750 && annualIncome >= 80000) { - eligibilityStatus = "Eligible for premium loan rates."; -} else if (creditScore >= 700 && annualIncome >= 50000) { - eligibilityStatus = "Eligible for standard loan rates."; -} else if (creditScore >= 650 && annualIncome >= 40000) { - eligibilityStatus = "Eligible for subprime loan rates."; -} else if (creditScore < 650) { - eligibilityStatus = "Not eligible due to low credit score."; -} else { - eligibilityStatus = "Not eligible due to insufficient income."; -} - -console.log(eligibilityStatus); -``` - -In this example, we have a person’s annual income and credit score, and are checking what types of loan they would qualify for. - -Since we are dealing with more complex logical evaluations and multiple variables, it is better to use an `if/else` statement here versus a `switch` statement. - -It's worth noting that `switch` statements in JavaScript use strict comparison (`===`), which means they don't perform type coercion. This can be an advantage in terms of predictability and avoiding subtle bugs. - -In summary, while both `switch` statements and `if/else` chains allow for multiple-branch logic in your code, they have different strengths. - -`Switch` statements excel at handling multiple possible values for a single variable, while `if/else` chains offer more flexibility for complex conditions. - -The choice between them often comes down to the specific requirements of your code and personal or team coding style preferences. +Watch the video lecture and answer the questions below. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md index ad8c66e1a86..bbd535265bc 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md @@ -1,117 +1,14 @@ --- id: 672d269da46786225e3fe3fd title: What Is the Purpose of Functions, and How Do They Work? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: sU2mIGNjBtc dashedName: what-is-the-purpose-of-functions-and-how-do-they-work --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: - -Functions are reusable pieces of code that perform a specific task or calculate a value. Think of functions as a machine that takes some input, does some operations on it, and then produces an output. - -Here is an example of declaring a function: - -```js -function greet() { - console.log("Hello, Jessica!"); -} -``` - -In this example, we have declared a function called `greet`. Inside that function, we have a `console.log` that logs the message `"Hello, Jessica!"`. - -If we tried to run this code, we would not see the message appear in the console. This because we need to call the function. - -A function call, or or invocation, is when we actually use or execute the function. To call a function, you will need to reference the function name followed by a set of parentheses: - -```js -function greet() { - console.log("Hello, Jessica!"); -} - -greet(); // "Hello, Jessica!" -``` - -Now the message of `"Hello, Jessica!"` will be logged to the console. - -But what if we wanted the message to say `"Hello, Nick!"` or `"Hello, Anna!"`? - -We don’t want to write a new function each time we greet a different user. Instead, we can create a reusable function that uses function parameters and arguments. - -Parameters act as placeholders for the values that will be passed to the function when it is called. They allow functions to accept input and work with that input. - -Arguments are the actual values passed to the function when it is called. - -Here is an updated version of the greet function that uses parameters and arguments: - -```js -function greet(name) { - console.log("Hello, " + name + "!"); -} - -greet("Alice"); // Hello, Alice! -greet("Nick"); // Hello, Nick! -``` - -The name serves as the parameter while the strings `"Alice"` and `"Nick"` serve as the arguments. Now we have a reusable function that can be used dozens of times throughout our code with different arguments. - -When a function finishes its execution, it will always return a value. By default, the return value will be `undefined`. - -Here is an example: - -```js -function doSomething() { - console.log("Doing something..."); -} - -let result = doSomething(); -console.log(result); // undefined -``` - -If you need your function to return a specific value, then you will need to use the `return` statement. - -Here is an example of using a `return` statement to return the sum of two values: - -```js -function calculateSum(num1, num2) { - return num1 + num2; -} - -console.log(calculateSum(3, 4)); // 7 -``` - -Often times you will be using the `return` statement, because you can use that value that was output from the function later on in your code. - -So far, we’ve been working with named functions, but you can also create what’s called an anonymous function. - -An anonymous function is a function without a name that can be assigned to a variable like this: - -```js -const sum = function (num1, num2) { - return num1 + num2; -}; - -console.log(sum(3, 4)); // 7 -``` - -In this example, we have a `const` variable called `sum` and we are assigning it an anonymous function that returns the sum of `num1` and `num2`. We are then able to call `sum` and pass in the numbers `3` and `4` to get the result of `7`. - -Functions support default parameters, allowing you to set default values for parameters. These default values are used if the function is called without an argument for that parameter. Here’s an example: - -```js -function greetings(name = "Guest") { - console.log("Hello, " + name + "!"); -} - -greetings(); // Hello, Guest! -greetings("Anna"); // Hello, Anna! -``` - -In this example, if no argument is provided for name, it defaults to `Guest`. - -In summary, functions allow you to write reusable and organized code. They can take inputs (parameters), perform actions, and return outputs. +Watch the video lecture and answer the questions below. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md index b9fc6d6b550..989affec24f 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md @@ -1,112 +1,14 @@ --- id: 673284d5e52ef81a2169b097 title: What Are Arrow Functions, and How Do They Work? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: EVrZqQ7Y3So dashedName: what-are-arrow-functions-and-how-do-they-work --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: - -In the previous lecture, you learned how to work with functions, which are reusable pieces of code that help make your code more modular, easier to maintain, and more efficient. - -All previous examples used the regular function syntax, like this: - -```js -function greetings(name) { - console.log("Hello, " + name + "!"); -} -``` - -But another way to write functions in JavaScript is to create an arrow function expression. - -Here is how you can refactor the previous example to use arrow function syntax instead: - -```js -const greetings = (name) => { - console.log("Hello, " + name + "!"); -}; -``` - -In this revised example, we are creating a const variable called `greetings` and assigning it an anonymous function. - -Most of the syntax will look familiar to you except for the missing `function` keyword and the addition of the arrow `=>` between the `name` parameter and the function body. - -If your parameter list only has one parameter in it, then you can remove the parentheses like this: - -```js -const greetings = name => { - console.log("Hello, " + name + "!"); -}; -``` - -If your arrow function has no parameters, then you must use the parentheses like this: - -```js -const greetings = () => { - console.log("Hello"); -}; -``` - -When first learning about functions, you had to wrap the function body in curly braces. - -But if your function body only contains a single line of code, you can remove the curly braces like this: - -```js -const greetings = name => console.log("Hello, " + name + "!"); -``` - -It is important to note that removing the parentheses and curly braces for regular function syntax will not work. You will get errors if you tried to do something like this: - -```js -// This will produce syntax errors -function greetings name console.log("Hello, " + name + "!"); -``` - -These types of one line functions only work if you are using the arrow function syntax. - -Another key concept is the `return` statement. - -Here is an example of using the arrow function syntax to calculate the area: - -```js -const calculateArea = (width, height) => { - const area = width * height; - return area; -}; - -console.log(calculateArea(5, 3)); // 15 -``` - -We are creating a variable inside the function called `area` and then returning that variable. But we could clean up our code a bit and return the calculation itself: - -```js -const calculateArea = (width, height) => { - return width * height; -}; -``` - -If you tried to remove the curly braces and place the calculation on the same line, then you would get an `Uncaught SyntaxError: Unexpected token 'return' message`. - -```js -const calculateArea = (width, height) => return width * height; -``` - -The reason why you are getting this error, is because you need to remove the `return` statement. When you remove that `return` statement, the error will disappear and the function will still implicitly return the calculation. - -```js -const calculateArea = (width, height) => width * height; -``` - -So when should you use the arrow function syntax? - -Well, it depends. - -Many developers use it consistently in their personal projects. However, when working on a team, the choice usually depends on whether the existing codebase uses regular functions or arrow functions. - -In future lectures, we’ll cover when to use arrow functions and when to avoid them. +Watch the video lecture and answer the questions below. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md index 16e6ba5d873..8373bf7ebde 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md @@ -1,76 +1,14 @@ --- id: 673284e7244c0c1a649121b9 title: What Is Scope in Programming, and How Does Global, Local, and Block Scope Work? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: saSaw-VOFuo dashedName: what-is-scope-in-programming-and-how-does-global-local-and-block-scope-work --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: - -Scope in programming refers to the visibility and accessibility of variables in different parts of your code. It determines where variables can be accessed or modified. - -In JavaScript, understanding scope is crucial for writing clean, efficient, and bug-free code. There are three main types of scope: global scope, local scope, and block scope. - -Global scope is the outermost scope in a JavaScript program. Variables declared in the global scope are accessible from anywhere in your code, including within functions and blocks. These variables are often called global variables. - -While global variables can be convenient, they should be used sparingly as they can lead to naming conflicts and make your code harder to maintain. - -Here's an example of a global variable: - -```js -let globalVar = "I'm a global variable"; - -function printGlobalVar() { - console.log(globalVar); -} - -printGlobalVar(); // Output: "I'm a global variable" -``` - -In this example, `globalVar` is declared in the global scope and can be accessed inside the `printGlobalVar` function. - -Local scope, on the other hand, refers to variables that are only accessible within a function. - -Here's an example of local scope: - -```js -function greet() { - let message = "Hello, local scope!"; - console.log(message); -} - -greet(); // Output: "Hello, local scope!" -console.log(message); // This will throw an error -``` - -In this code, `message` is a local variable within the `greet` function. It can be used inside the function, but trying to access it outside the function will result in an error. - -Block scope is a concept introduced with the let and const keywords in ES6. A block is any code section within curly braces `{}`, such as in `if` statements, `for` loops, or `while` loops. The concept of loops will be taught in an upcoming lecture. - -Variables declared with `let` or `const` inside a block are only accessible within that block. Here's an example of block scope: - -```js -if (true) { - let blockVar = "I'm in a block"; - console.log(blockVar); // Output: "I'm in a block" -} -console.log(blockVar); // This will throw an error -``` - -In this example, `blockVar` is only accessible within the `if` block. Trying to access it outside the block will result in an error. - -Understanding these different types of scope is essential for managing variable accessibility and avoiding unintended side effects in your code. - -Global variables should be used sparingly, as they can lead to naming conflicts and make your code harder to maintain. - -Local variables help to keep different parts of your code isolated, which is especially useful in larger programs. - -Block scoping with `let` and `const` provides even finer control over variable accessibility, helping to prevent errors and make your code more predictable. - -Mastering these basic concepts of global, local, and block scope will provide a solid foundation for understanding more advanced topics. +Watch the video lecture and answer the questions below. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md index b98dc58b4f1..a19d36fb50e 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md @@ -1,65 +1,14 @@ --- id: 673362a34edda41dedf87623 title: What Is the Map Method, and How Does It Work? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: CdSr7rv8pwo dashedName: what-is-the-map-method-and-how-does-it-work --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: - -The `map` method is a powerful and widely used function in JavaScript that operates on arrays. It is designed to create a new array by applying a given function to each element of the original array. - -This method does not modify the original array but instead returns a new array containing the results of the function applied to each element. - -Here is an example of using the `map` method on an array of numbers: - -```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] -``` - -To create a new array where each number is doubled, we are using the `map` method. The `map` method accepts a callback function where the function is called on every single element in the array. - -In this case, each number in the array will be multiplied by 2. The result will be a new array of the numbers 2,4,6,8,10. - -The callback function can accept up to three arguments. - -The first argument is the current element being processed. - -```js -const numbers = [3, 4, 5, 6, 7].map((element) => { - console.log("Element:", element); - return element * 2; -}); -``` - -The second argument is the index of the current element being processed. - -```js -const numbers = [3, 4, 5, 6, 7].map((element, index) => { - console.log("Element:", element); - console.log("Index:", index); - return element * 2; -}); -``` - -The third argument is the array where `map` is being called on. - -```js -const numbers = [3, 4, 5, 6, 7].map((element, index, array) => { - console.log("Element:", element); - console.log("Index:", index); - console.log("Array:", array); - return element * 2; -}); -``` - -Understanding and effectively using the map method can significantly improve your ability to work with arrays in JavaScript. In future lecture videos, we'll dive deeper into more advanced uses of map and explore how it can be a powerful tool for building dynamic and efficient programs. +Watch the video lecture and answer the questions below. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md index 0d831deebd1..f75efb200a8 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md @@ -1,139 +1,14 @@ --- id: 6733c5c549775c4be710237c title: How Can You Match and Replace All Occurrences in a String? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: HyuDs-jVJyw dashedName: how-can-you-match-and-replace-all-occurrences-in-a-string --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: - -Let's learn how to match or replace all occurrences of a pattern in a string. - -You have previously learned about the `replace` and `match` methods, as well as the global `g` modifier. Now you can combine that knowledge to handle all patterns in a string. - -Let's recall our original `match` code. - -```js -const regex = /freeCodeCamp/; -const match = "freeCodeCamp".match(regex); -console.log(match); -``` - -And our resulting `match` object: - -![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-can-you-match-and-replace-all-occurrences-in-a-string-1.png) - -But what if we have a string with multiple occurrences of `freecodecamp` to match? Let's take a look at how `match` behaves with that. We'll throw in our old replace example too, just to compare. - -```js -const regex = /freecodecamp/; -const str = "freecodecamp is the best we love freecodecamp"; -const matched = str.match(regex); -const replaced = str.replace(regex, "freeCodeCamp"); -console.log(matched); -console.log(replaced); -``` - -And the result: - -![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-can-you-match-and-replace-all-occurrences-in-a-string-2.png) - -Oh no! `Match` only returned the first match, and `replace` only replaced the first match. This is because, by default, `match` and `replace` only operate against the first pattern occurrence. - -Thankfully, you can avoid this by using the global modifier on your regular expression. Let's add that to ours: - -```js -const regex = /freecodecamp/g; -const str = "freecodecamp is the best we love freecodecamp"; -const matched = str.match(regex); -const replaced = str.replace(regex, "freeCodeCamp"); -console.log(matched); -console.log(replaced); -``` - -And confirm the result: - -![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-can-you-match-and-replace-all-occurrences-in-a-string-3.png) - -That worked! Our `replace` call replaced all of the lowercase `freecodecamp` strings, and our `match` method matched both of them. - -What's interesting here is that when you use the global modifier with match, you lose the extra information about capture groups and string indicies that would come in the `match` array. - -Thankfully, 2019's ECMAScript update brought us two new methods: `matchAll` and `replaceAll`. - -Like their singular counterparts, these methods accept a string or regular expression, and `replaceAll` also accepts a second argument as the string to replace with. But unlike the previous methods, `replaceAll` and `matchAll` will throw an error if you give them a regular expression without the global modifier. - -Let's update our code to use these new methods: - -```js -const pattern = "freecodecamp"; -const str = "freecodecamp is the best we love freecodecamp"; -const matched = str.matchAll(pattern); -const replaced = str.replaceAll(pattern, "freeCodeCamp"); -console.log(matched); -console.log(replaced); -``` - -And our result: - -![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-can-you-match-and-replace-all-occurrences-in-a-string-4.png) - -Good news! Our `replaceAll` worked exactly as we wanted – it replaced all occurrences of the lowercased `freecodecamp` with the properly camelCased version. But what is that empty object? - -Well, `matchAll` returns a special type of object called an Iterator, which the freeCodeCamp console isn't prepared to handle. If we peek in our browser console: - -![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-can-you-match-and-replace-all-occurrences-in-a-string-5.png) - -The Iterator has a `next` method, which we can call to get the next value. Let's go ahead and call `matched.next()`, and log the result: - -![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-can-you-match-and-replace-all-occurrences-in-a-string-6.png) - -There's our match array! `.next()` gives us an object with two values: done, which is false when there are more elements available in the iterator, and value which is the value we just iterated over. - -So, if we call it one more time: - -```js -const regex = /freecodecamp/g; -const str = "freecodecamp is the best we love freecodecamp"; -const matched = str.matchAll(regex); -const replaced = str.replaceAll(regex, "freeCodeCamp"); -console.log(matched); -console.log(replaced); -console.log(matched.next()); -console.log(matched.next()); -``` - -Wait, why does it say done is still `false`? There should only be two matches in the array, right? - -![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-can-you-match-and-replace-all-occurrences-in-a-string-7.png) - -Let's call it a third time and see what we get: - -![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-can-you-match-and-replace-all-occurrences-in-a-string-8.png) - -`done` is finally `true`, but why is that value `undefined`? Well, as it turns out, the `matchAll` iterator is lazy. It doesn't find all of your matches at once. It only finds a match when you tell it to by calling `next()`. - -As long as it finds a match, it isn't "done". Once it fails to find a match and brings back `undefined`, it is "done". This may seem inconvenient, but it can be quite helpful when your regular expression is computationally expensive. - -If your example is less so, like ours, you can skip that feature and extract all of the matches at once by converting it to an array. This is achieved by calling `Array.from()` and passing your iterator as the argument. - -Let's update our code to use that – we'll go ahead and clean up our replaceAll calls since we know that works. - -```js -const regex = /freecodecamp/g; -const str = "freecodecamp is the best we love freecodecamp"; -const matched = str.matchAll(regex); -console.log(Array.from(matched)) -``` - -And we finally get our array of matches: - -![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-can-you-match-and-replace-all-occurrences-in-a-string-9.png) - -These powerful methods can help you manipulate and extract data from strings without having to sacrifice performance or readability. +Watch the video lecture and answer the questions below. # --questions--