mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-22 22:00:50 -04:00
fix(curriculum): update video ids (#57605)
This commit is contained in:
Dario-DC
@@ -2,7 +2,7 @@
|
||||
id: 6733aa9b006d29f4d11307a5
|
||||
title: What Are Some Examples of Common JavaScript Errors?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: e5P8nJkOSMQ
|
||||
dashedName: what-are-some-examples-of-common-javascript-errors
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6733bec70d86e13522e98a4f
|
||||
title: How Does the Throw Statement Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: vNlPchT8nr8
|
||||
dashedName: how-does-the-throw-statement-work
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6733becf4b0c353553b9bfa4
|
||||
title: How Does the Debugger Statement Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: gn0q7gXiMRo
|
||||
dashedName: how-does-the-debugger-statement-work
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6733bee844600f35c05b8264
|
||||
title: How Does try...catch...finally Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: _3whfUfxGYI
|
||||
dashedName: how-does-try-catch-finally-work
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6733befb703ca6361da3755b
|
||||
title: What Are Some Examples of Using Advanced JavaScript Debugging Techniques?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: hHWAQYXRvxs
|
||||
dashedName: what-are-some-examples-of-using-advanced-javascript-debugging-techniques
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 67329fbcfaf5ff5cdaa38a42
|
||||
title: What Is the var Keyword, and Why Is It No Longer Suggested to Use It?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: Ae4bq5IcDfI
|
||||
dashedName: what-is-the-var-keyword-and-why-is-it-no-longer-suggested-to-use-it
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 67335f45489c5a11b71d0ed5
|
||||
title: What Is Hoisting?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: Aa1bLYTu5T8
|
||||
dashedName: what-is-hoisting
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 672aa578a2129554d4675049
|
||||
title: What Are the Basic Parts of a Computer?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: SJT6r_ejSqw
|
||||
dashedName: what-are-the-basic-parts-of-a-computer
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 672ab82c1a9bbd0e3aabc39d
|
||||
title: How Can You Effectively Work With Your Keyboard, Mouse, and Other Pointing Devices
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: AcTxNEVccxc
|
||||
dashedName: how-to-effectively-work-with-your-keyboard-mouse-and-other-pointing-devices
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 672ab83c4297910eade53c2e
|
||||
title: What Are the Different Types of Internet Service Providers?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: pNR0QzFzSrg
|
||||
dashedName: what-are-the-different-types-of-internet-service-providers
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 672ab849aa1ef70eefd29364
|
||||
title: What Are Safe Ways to Sign Into Your Computer?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: pGoZFEMjC-g
|
||||
dashedName: what-are-safe-ways-to-sign-into-your-computer
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 672ab8573f32480f192aaae1
|
||||
title: What Are the Different Types of Tools Professional Developers Use?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: FHUfC8cm_AA
|
||||
dashedName: what-are-the-different-types-of-tools-professional-developers-use
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 67329f9e9eb84e5c6a5e4366
|
||||
title: What Is a String Object, and How Does It Differ from String Primitive?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: _-EJRG7vr-0
|
||||
dashedName: what-is-a-string-object-and-how-does-it-differ-from-string-primitive
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6732c68f4520d160584a6fd2
|
||||
title: What Is the toString() Method, and How Does It Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: OYOHw8Xmatw
|
||||
dashedName: what-is-the-tostring-method-and-how-does-it-work
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6732c69d82814160951b1aa7
|
||||
title: What Is the Number Constructor, and How Does It Work for Type Coercion?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: ZY_GdH7FbPI
|
||||
dashedName: what-is-the-number-constructor-and-how-does-it-work-for-type-coercion
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6732c6ab21031b60d2b0c999
|
||||
title: What Are Some Common Practices for Naming Variables and Functions?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: wheRZCpE724
|
||||
dashedName: what-are-some-common-practices-for-naming-variables-and-functions
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6732c6ba2ea42b610b9f9ce1
|
||||
title: How Do You Get the Length for an Array, and How Can You Create an Empty Array of Fixed Length?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: ezk1SIbBDqw
|
||||
dashedName: how-do-you-get-the-length-for-an-array-and-how-can-you-create-an-empty-array-of-fixed-length
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6732c6c72d3738614e1230a2
|
||||
title: What Are Linters and Formatters, and How Can They Help You with Code Consistency?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: XDPvu4bk8IA
|
||||
dashedName: what-are-linters-and-formatters-and-how-can-they-help-you-with-code-consistency
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6732c6d4dec34c61850a1276
|
||||
title: What Is Memory Management, and How Does It Work in JavaScript?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: HJF89E-ODlw
|
||||
dashedName: what-is-memory-management-and-how-does-it-work-in-javascript
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6732c6e281c14a61c4858361
|
||||
title: What Are Closures, and How Do They Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: J4ZBwMbDAgE
|
||||
dashedName: what-are-closures-and-how-do-they-work
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6733aae9d25004f60d1e86f2
|
||||
title: What Are Some Ways to Validate Forms Using JavaScript?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: azh-Mh6dxyo
|
||||
dashedName: what-are-some-ways-to-validate-forms-using-javascript
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6733d3a33abdd27cd562bdf2
|
||||
title: What Is the Purpose of e.preventDefault?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: gBUdCKcBJSg
|
||||
dashedName: what-is-the-purpose-of-e-preventdefault
|
||||
---
|
||||
|
||||
|
||||
@@ -1,14 +1,87 @@
|
||||
---
|
||||
id: 6733d3ab69e94b7df7ee91b0
|
||||
title: How Does the Submit Event Work with Forms?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
challengeType: 19
|
||||
# videoId: nVAaxZ34khk
|
||||
dashedName: how-does-the-submit-event-work-with-forms
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the lecture video and answer the questions below.
|
||||
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 about how the submit event works with HTML forms.
|
||||
|
||||
First, we need to understand how to submit a form. There are three ways a form can be submitted.
|
||||
|
||||
The first is when the user clicks a button in the form which has the type attribute set to `submit`.
|
||||
|
||||
The second is when the user presses the `Enter` key on any editable input field in the form.
|
||||
|
||||
The third is through a JavaScript call to the `requestSubmit()` or `submit()` methods of the form element.
|
||||
|
||||
But what happens when a form is submitted? There’s a few things that happen, and the behavior of the form depends on its attributes.
|
||||
|
||||
The first attribute that we need to look at is the `action` attribute.
|
||||
|
||||
The `action` attribute should contain either a URL or a relative path for the current domain. This value determines where the form attempts to send data. If you do not set an `action` attribute, the form will send data to the current page’s URL.
|
||||
|
||||
Here is an example of a form with an action attribute set to a specific URL:
|
||||
|
||||
```js
|
||||
<form action="https://freecodecamp.org">
|
||||
<input type="number" id="input" placeholder="Enter a number" name="number" />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
When this form is submitted, it will send data to freeCodeCamp’s homepage, which probably won’t do anything.
|
||||
|
||||
Here’s another form, which submits to a relative path:
|
||||
|
||||
```js
|
||||
<form action="/data">
|
||||
<input type="number" id="input" placeholder="Enter a number" name="number" />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
This one submits to the /data path on the current domain. In our case, it would submit to `http://127.0.0.1:5500/data`.
|
||||
|
||||
The second attribute to control how a submission behaves is the `method` attribute. This attribute accepts a standard HTTP method, such as `“GET”` or `“POST”`, and uses that method when making the request to the action URL.
|
||||
|
||||
HTTP stands for Hypertext Transfer Protocol and it is used to transfer data over the web.
|
||||
|
||||
HTTP methods are used to define the actions that can be performed on resources, such as `GET`, `POST`, `PUT`, `DELETE`, and so on. You will more about these methods in future lecture videos.
|
||||
|
||||
When a method is not set, the form will default to a `“GET”` request.
|
||||
|
||||
A `GET` request is used to retrieve data from a specified resource without making any changes to it, and the parameters are typically appended to the URL in the form of a query string.
|
||||
|
||||
The data in the form will be URL encoded as name=value pairs and appended to the action URL as query parameters. Our form then tries to GET the URL `http://127.0.0.1:5500/data?number=3342`, for example.
|
||||
|
||||
This is great for something like a search form, where your user is querying data. But if you want your user to submit new data, such as in a registration form, the idiomatic method to use would be the `POST` method. The `POST` method is used to send data to the server to create or update a resource.
|
||||
|
||||
Let’s set the method attribute to the value of `POST`:
|
||||
|
||||
```js
|
||||
<form action="/data" method="POST">
|
||||
<input type="number" id="input" placeholder="Enter a number" name="number" />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
When you send a `POST` request, a body can be included which contains the data for your request. So unlike a `GET`, the data are not appended to the URL, and our form sends the POST request to `http://127.0.0.1:5500/data`. The data, instead, can be found in the body of the request, still as URL-encoded form data.
|
||||
|
||||
URL-encoded form data is when form data is converted into a string of key-value pairs, like `name=John+Doe&email=john%40example.com`, where special characters are replaced with encoded versions to safely send the data over the web. You will learn more about this in future lecture videos
|
||||
|
||||
But maybe you don’t want to send the data as a URL-encoded form payload?
|
||||
|
||||
The form element accepts an `enctype` attribute, which represents the encoding type to use for the data.
|
||||
|
||||
This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in name=value pairs separated by new lines), or `mulitpart/form-data`, which is specifically for handling forms with a file upload.
|
||||
|
||||
In this video, you’ve learned the basics of form submissions. In future videos, we’ll dive deeper into working with forms and how they interact with the server.
|
||||
|
||||
# --questions--
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 67329fd6ad99c75d4a4b74e4
|
||||
title: What Is a Module in JavaScript, and How Can You Import and Export Modules in Your Program?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: mGPyLJLTUpo
|
||||
dashedName: what-is-a-module-in-javascript-and-how-can-you-import-and-export-modules-in-your-program
|
||||
---
|
||||
|
||||
|
||||
@@ -1,14 +1,144 @@
|
||||
---
|
||||
id: 6733b02d1e556005a544c5e3
|
||||
title: What Is Recursion, and How Does It Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
challengeType: 19
|
||||
# videoId: nVAaxZ34khk
|
||||
dashedName: what-is-recursion-and-how-does-it-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video lecture and answer the questions below.
|
||||
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 recursion works in JavaScript.
|
||||
|
||||
Recursion is a complicated feature that allows you to call a function repeatedly until a base-case is reached. Unlike a traditional loop, recursion allows you to handle something with an unknown depth, such as deeply nested objects/arrays, or a file tree. But you can also use it for more basic tasks, such as counting down from a given number.
|
||||
|
||||
Let’s construct a function to do exactly that. We’ll call our function recursiveCountdown, and it needs to accept a number. We’ll have it print this number to the console:
|
||||
|
||||
```js
|
||||
const recursiveCountdown = (number) => {
|
||||
console.log(number);
|
||||
};
|
||||
```
|
||||
|
||||
Now if we call this and pass the number 5, we’ll see the number print to our terminal. But nothing else happens – and the number 5 certainly isn’t a countdown.
|
||||
|
||||
Before we start building the recursive portion of our function, we need to establish our base case first. If you don’t have a base case established, your code will run until it exceeds your memory allocation and crashes.
|
||||
|
||||
```js
|
||||
const recursiveCountdown = (number) => {
|
||||
if (number < 1) {
|
||||
return;
|
||||
}
|
||||
console.log(number);
|
||||
};
|
||||
|
||||
recursiveCountdown(5);
|
||||
```
|
||||
|
||||
For our base case, we want the countdown to stop if the number is less than 1. When we hit that base-case, we can return to break out of the function execution.
|
||||
|
||||
Now that we’ve safely prepared a base-case, we can set up the recursion. The key point that makes a function recursive is that it calls itself in its execution. In this case, we want to call the function after we print the number. But in order to count down, our new number needs to be one less:
|
||||
|
||||
```js
|
||||
const recursiveCountdown = (number) => {
|
||||
if (number < 1) {
|
||||
return;
|
||||
}
|
||||
console.log(number);
|
||||
recursiveCountdown(number - 1);
|
||||
};
|
||||
|
||||
recursiveCountdown(5); //
|
||||
```
|
||||
|
||||
This would log the numbers 5, 4, 3, 2, and 1 to the console.
|
||||
|
||||
We do get our five numbers! But what if we wanted to count up instead? Rather than writing an entirely new function, we can swap the order of our log and our recursive call:
|
||||
|
||||
```js
|
||||
const recursiveCountdown = (number) => {
|
||||
if (number < 1) {
|
||||
return;
|
||||
}
|
||||
recursiveCountdown(number - 1);
|
||||
console.log(number);
|
||||
};
|
||||
|
||||
recursiveCountdown(5);
|
||||
```
|
||||
|
||||
This would log the numbers 1, 2, 3, 4, and 5 to the console.
|
||||
|
||||
But why does that work? Well, to understand this you need to understand the call stack. The call stack is how JavaScript tracks and resolves function calls. The stack functions as a last-in-first-out queue of sorts. To understand this better, let’s add some logging to our function:
|
||||
|
||||
```js
|
||||
const recursiveCountdown = (number) => {
|
||||
console.log(`Function execution started for number: ${number}`);
|
||||
if (number < 1) {
|
||||
console.log(`Base case reached, begin resolving stack`);
|
||||
return;
|
||||
}
|
||||
console.log(`Calling recursiveCountdown with number: ${number - 1}`);
|
||||
recursiveCountdown(number - 1);
|
||||
console.log(`Function execution completed for number: ${number}`);
|
||||
};
|
||||
|
||||
recursiveCountdown(5);
|
||||
```
|
||||
|
||||
We’ve added four key statements here. The first log runs when a function call begins executing. The third log runs just before the recursive function is called. And the fourth log runs when the function execution has ended. The result is:
|
||||
|
||||
```md
|
||||
Function execution started for number: 5
|
||||
Calling recursiveCountdown with number: 4
|
||||
Function execution started for number: 4
|
||||
Calling recursiveCountdown with number: 3
|
||||
Function execution started for number: 3
|
||||
Calling recursiveCountdown with number: 2
|
||||
Function execution started for number: 2
|
||||
Calling recursiveCountdown with number: 1
|
||||
Function execution started for number: 1
|
||||
Calling recursiveCountdown with number: 0
|
||||
Function execution started for number: 0
|
||||
Base case reached, begin resolving stack
|
||||
Function execution completed for number: 1
|
||||
Function execution completed for number: 2
|
||||
Function execution completed for number: 3
|
||||
Function execution completed for number: 4
|
||||
Function execution completed for number: 5
|
||||
```
|
||||
|
||||
But how does this happen? Well, this is where the call stack comes in to play. When we call `recursiveCountdown(5)`, that function call is added to the call stack.
|
||||
|
||||
When that function call reaches the point where it needs to call `recursiveCountdown(4)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(4)` gets added to the call stack, on top of the `recursiveCountdown(5)`.
|
||||
|
||||
When that function call reaches the point where it needs to call `recursiveCountdown(3)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(3)` gets added to the call stack, on top of the `recursiveCountdown(4)`.
|
||||
|
||||
When that function call reaches the point where it needs to call `recursiveCountdown(2)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(2)` gets added to the call stack, on top of the `recursiveCountdown(3)`.
|
||||
|
||||
When that function call reaches the point where it needs to call `recursiveCountdown(1)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(1)` gets added to the call stack, on top of the `recursiveCountdown(2)`.
|
||||
|
||||
And finally, when that function call reaches the point where it needs to call `recursiveCountdown(0)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(0)` gets added to the call stack, on top of the `recursiveCountdown(1)`.
|
||||
|
||||
But `recursiveCountdown(0)` doesn’t call another function – it hits our base case, where it returns early. Because the execution of that function has ended, the function call can be considered “resolved”. When the call is resolved, it’s removed from the stack.
|
||||
|
||||
Now our `recursiveCountdown(1)` is no longer waiting on that call – it’s at the top of the stack and can resume executing.
|
||||
|
||||
`recursiveCountdown(1)` resolves, is removed from the stack, and allows `recursiveCountdown(2)` to resume execution.
|
||||
|
||||
`recursiveCountdown(2)` resolves, is removed from the stack, and allows `recursiveCountdown(3)` to resume execution.
|
||||
|
||||
`recursiveCountdown(3)` resolves, is removed from the stack, and allows `recursiveCountdown(4)` to resume execution.
|
||||
|
||||
`recursiveCountdown(4)` resolves, is removed from the stack, and allows `recursiveCountdown(5)` to resume execution.
|
||||
|
||||
And `recursiveCountdown(5)` resolves and is removed from the stack. Our call stack is now empty, so the recursion is complete!
|
||||
|
||||
This is a basic overview of how recursion works in JavaScript. It’s a complicated concept, and you should play around with some code and log statements until you’re comfortable with the behavior of the call stack.
|
||||
|
||||
For a little fun fact, we talked about how a lack of a base-case can cause your code to crash when it runs out of memory. This is because the recursion keeps piling more and more function calls into the call stack until the stack overflows. Just like the name of the popular programming community.
|
||||
|
||||
# --questions--
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 672d266034b5242126271995
|
||||
title: What Is ASCII, and How Does It Work with charCodeAt() and fromCharCode()?
|
||||
challengeType: 11
|
||||
videoId: xpB7Wr4kiis
|
||||
videoId: XMi4lKr0FRw
|
||||
dashedName: what-is-ascii-and-how-does-it-work-with-charcodeat-and-fromcharcode
|
||||
---
|
||||
|
||||
|
||||
@@ -1,14 +1,117 @@
|
||||
---
|
||||
id: 672d269da46786225e3fe3fd
|
||||
title: What Is the Purpose of Functions, and How Do They Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
challengeType: 19
|
||||
# videoId: nVAaxZ34khk
|
||||
dashedName: what-is-the-purpose-of-functions-and-how-do-they-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video lecture and answer the questions below.
|
||||
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.
|
||||
|
||||
# --questions--
|
||||
|
||||
|
||||
@@ -1,14 +1,112 @@
|
||||
---
|
||||
id: 673284d5e52ef81a2169b097
|
||||
title: What Are Arrow Functions, and How Do They Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
challengeType: 19
|
||||
# videoId: nVAaxZ34khk
|
||||
dashedName: what-are-arrow-functions-and-how-do-they-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the lecture video and answer the questions below.
|
||||
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.
|
||||
|
||||
# --questions--
|
||||
|
||||
|
||||
@@ -1,14 +1,76 @@
|
||||
---
|
||||
id: 673284e7244c0c1a649121b9
|
||||
title: What Is Scope in Programming, and How Does Global, Local, and Block Scope Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
challengeType: 19
|
||||
# videoId: nVAaxZ34khk
|
||||
dashedName: what-is-scope-in-programming-and-how-does-global-local-and-block-scope-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the lecture video and answer the questions below.
|
||||
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.
|
||||
|
||||
# --questions--
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 67329ffd75010f5ddeb4ea13
|
||||
title: What Is a Callback Function, and How Does It Work with the forEach Method?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: Ye6d69RVeqY
|
||||
dashedName: what-is-a-callback-function-and-how-does-it-work-with-the-foreach-method
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 67336296a3c1591da81856c2
|
||||
title: What Are Higher-Order Functions?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: dj9Pt4tODfA
|
||||
dashedName: what-are-higher-order-functions
|
||||
---
|
||||
|
||||
|
||||
@@ -1,14 +1,65 @@
|
||||
---
|
||||
id: 673362a34edda41dedf87623
|
||||
title: What Is the Map Method, and How Does It Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
challengeType: 19
|
||||
# videoId: nVAaxZ34khk
|
||||
dashedName: what-is-the-map-method-and-how-does-it-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the lecture video and answer the questions below.
|
||||
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.
|
||||
|
||||
# --questions--
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 673362b3f763ae1e38e17df7
|
||||
title: What Is the Filter Method, and How Does It Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: EaVyNFI53Mk
|
||||
dashedName: what-is-the-filter-method-and-how-does-it-work
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 673362be2f70c21e65bc5459
|
||||
title: What Is the Reduce Method, and How Does It Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: fxgwdO-Eii8
|
||||
dashedName: what-is-the-reduce-method-and-how-does-it-work
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 673362cbb475e21eab726506
|
||||
title: What Is Method Chaining, and How Does It Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: bsCkwxZ4sho
|
||||
dashedName: what-is-method-chaining-and-how-does-it-work
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 673362d7f94d551edb532d24
|
||||
title: How Does the Sort Method Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: eA5HGl-qsdA
|
||||
dashedName: how-does-the-sort-method-work
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 673362e43d57b51f1ad2d466
|
||||
title: How Do the every() and some() Methods Work?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: ELHJGK4IyqU
|
||||
dashedName: how-do-the-every-and-some-methods-work
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6733ab269b378bf724c9ac71
|
||||
title: What Are Sets in JavaScript, and How Does It Differ from WeakSets?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: 4XFTr08_hog
|
||||
dashedName: what-are-sets-in-javascript-and-how-does-it-differ-from-weaksets
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: 6733dd694f91d61a5272b4ac
|
||||
title: What Is the Map Object, and How Does It Differ from WeakMaps?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: 2hHKZBPJQRY
|
||||
dashedName: what-is-the-map-object-and-how-does-it-differ-from-weakmaps
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user