mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): add lectures for rest parameter syntax and arguments object (#62067)
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> Co-authored-by: Naomi <accounts+github@nhcarrigan.com>
This commit is contained in:
Jessica Wilkins
@@ -3455,6 +3455,12 @@
|
||||
"In this lecture, you will learn about modules, imports, and exports in JavaScript."
|
||||
]
|
||||
},
|
||||
"lecture-working-with-the-arguments-object-and-rest-parameters": {
|
||||
"title": "Working with the arguments Object and Rest Parameters",
|
||||
"intro": [
|
||||
"In these lectures, you will learn how to work with the <code>arguments</code> object and rest parameter syntax."
|
||||
]
|
||||
},
|
||||
"lab-password-generator": {
|
||||
"title": "Build a Password Generator App",
|
||||
"intro": [
|
||||
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Working with the arguments Object and Rest Parameters
|
||||
block: lecture-working-with-the-arguments-object-and-rest-parameters
|
||||
superBlock: full-stack-developer
|
||||
---
|
||||
|
||||
## Introduction to the Working with the arguments Object and Rest Parameters
|
||||
|
||||
In these lectures, you will learn how to work with the `arguments` object and rest parameter syntax.
|
||||
+200
@@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 68bcc3b6a7480288cd981be0
|
||||
title: What is the arguments Object?
|
||||
challengeType: 19
|
||||
dashedName: what-is-the-arguments-object
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As you recall from earlier lectures and workshops, you can create functions with a number of parameters and call that function with arguments.
|
||||
|
||||
Here is a reminder:
|
||||
|
||||
```js
|
||||
// function definition
|
||||
function getSum(num1, num2) {
|
||||
return num1 + num2;
|
||||
}
|
||||
|
||||
// function call
|
||||
getSum(3, 4); // 7
|
||||
```
|
||||
|
||||
But what if you have a function that is called with more arguments than it was defined to accept?
|
||||
|
||||
```js
|
||||
// function definition
|
||||
function getSum(num1, num2) {
|
||||
return num1 + num2;
|
||||
}
|
||||
|
||||
// function call with extra argument
|
||||
console.log(getSum(3, 4, 5)); // 7
|
||||
```
|
||||
|
||||
JavaScript will not throw an error in this case. It will instead ignore the extra argument and just add the numbers `3` and `4` together. Functions that accept a variable number of arguments are known as <dfn>variadic functions</dfn>.
|
||||
|
||||
If you are working with variadic functions, then you can utilize the `arguments` object. This array-like object contains the values of the arguments passed into the function.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```js
|
||||
function logArgs() {
|
||||
for (const arg of arguments) {
|
||||
console.log(arg);
|
||||
}
|
||||
}
|
||||
|
||||
logArgs(1, 2, 3);
|
||||
// result:
|
||||
// 1
|
||||
// 2
|
||||
// 3
|
||||
|
||||
logArgs("example"); // "example"
|
||||
```
|
||||
|
||||
Since the `arguments` object is array-like, you can access an argument at a specific index like this:
|
||||
|
||||
```js
|
||||
function getArg() {
|
||||
return arguments[1];
|
||||
}
|
||||
|
||||
console.log(getArg(2, 4, 6)); // 4
|
||||
```
|
||||
|
||||
You can also use the `length` property like this to get the number of arguments the function was called with:
|
||||
|
||||
```js
|
||||
function getArgs() {
|
||||
return arguments.length;
|
||||
}
|
||||
|
||||
console.log(getArgs("Example")); // 1
|
||||
console.log(getArgs("Another", "Example")); // 2
|
||||
```
|
||||
|
||||
Even though the `arguments` object appears to act like a real array, it does not have built in `Array` methods like `includes` or `push`. To have access to those methods, you would need to first convert the `arguments` object to a real array using something like `slice`, `Array.from()` or the spread operator:
|
||||
|
||||
```js
|
||||
function hasCat() {
|
||||
return [...arguments].includes("cat");
|
||||
}
|
||||
|
||||
console.log(hasCat("dog", "chicken", "cat")); // true
|
||||
console.log(hasCat("dog", "chicken", "horse")); // false
|
||||
```
|
||||
|
||||
While it is possible to work with the `arguments` object for variadic functions, modern JavaScript applications will normally use rest parameter syntax. You will learn more about that in a future lecture.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
What is a variadic function?
|
||||
|
||||
## --answers--
|
||||
|
||||
Functions that accept two arguments.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the beginning of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
Functions that accept a variable number of arguments.
|
||||
|
||||
---
|
||||
|
||||
Functions that accept a single argument.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the beginning of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
Functions that accept more than three arguments.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the beginning of the lecture for the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
What is the `arguments` object?
|
||||
|
||||
## --answers--
|
||||
|
||||
A special dictionary that contains the values of the arguments passed into a function.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the beginning of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
An array-like object that contains the values of the arguments passed into a function.
|
||||
|
||||
---
|
||||
|
||||
A variable that contains only the first argument passed into a function.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the beginning of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
A true array that automatically updates when function parameters are reassigned.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the beginning of the lecture for the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Why can't you use built in `Array` methods like `includes` or `push` on the `arguments` object?
|
||||
|
||||
## --answers--
|
||||
|
||||
The `arguments` object is always empty unless explicitly initialized.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
JavaScript automatically blocks method calls on the `arguments` object for performance reasons.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
The `includes` or `push` methods unreliably work on the `arguments` object so those methods should be avoided.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
The `arguments` object is not a real array so it doesn't have those built in methods.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
+221
@@ -0,0 +1,221 @@
|
||||
---
|
||||
id: 68bcc7d9a1807e9752728e45
|
||||
title: What are Rest Parameters and How Do They Differ from the arguments Object?
|
||||
challengeType: 19
|
||||
dashedName: what-are-rest-parameters-and-how-do-they-differ-from-the-arguments-object
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous lecture, you learned how to work with the `arguments` object which is an array-like object containing the values of the arguments passed into the function.
|
||||
|
||||
```js
|
||||
function logArgs() {
|
||||
for (const arg of arguments) {
|
||||
console.log(arg);
|
||||
}
|
||||
}
|
||||
|
||||
logArgs(1, 2, 3);
|
||||
// result:
|
||||
// 1
|
||||
// 2
|
||||
// 3
|
||||
```
|
||||
|
||||
While this is a valid way to access and work with a variable set of arguments from a function, modern JavaScript applications will use the rest parameter syntax instead.
|
||||
|
||||
Here is an updated example using the rest parameter syntax instead of the `arguments` object:
|
||||
|
||||
```js
|
||||
function logArgs(...args) {
|
||||
for (const arg of args) {
|
||||
console.log(arg);
|
||||
}
|
||||
}
|
||||
|
||||
logArgs(1, 2, 3);
|
||||
// result:
|
||||
// 1
|
||||
// 2
|
||||
// 3
|
||||
```
|
||||
|
||||
This updated example no longer references the `arguments` object directly. Instead, the function definition's last parameter has three dots in front of it. This causes this rest parameter to be placed within an `Array` object. You can name this rest parameter whatever you like. Just make sure it is the last parameter in the function definition like this:
|
||||
|
||||
```js
|
||||
function exampleFunction(a, b, ...restOfArgs) {
|
||||
// some code here
|
||||
}
|
||||
|
||||
function anotherFunction(x, y, ...theArgs) {
|
||||
// some code here
|
||||
}
|
||||
```
|
||||
|
||||
There are a few more restrictions when dealing with the rest parameter syntax. One restriction is that function definitions can only have one rest parameter. So the following example here would be considered invalid.
|
||||
|
||||
```js
|
||||
// Won't work
|
||||
|
||||
function badFunction(...args, ...moreArgs) {
|
||||
// some code here
|
||||
}
|
||||
```
|
||||
|
||||
The next restriction is that trailing commas are not allowed after the rest parameter: `function exampleFunction(a, b, ...restOfArgs, )`.
|
||||
|
||||
Another restriction is that the rest parameter cannot have a default value. Otherwise a `SyntaxError` will be thrown.
|
||||
|
||||
```js
|
||||
function badFunction(...args = [1,2]){
|
||||
// some code here
|
||||
}
|
||||
```
|
||||
|
||||
So what are some differences between the `arguments` object and `rest` parameters?
|
||||
|
||||
One key difference is that the `arguments` object is not a real array so it doesn't support methods like `includes`, `pop` and `push`. But the rest parameter is an `Array` instance. So you can use valid built in array methods without needing to convert it to a real array first.
|
||||
|
||||
```js
|
||||
function hasCat(...args) {
|
||||
return args.includes("cat");
|
||||
}
|
||||
|
||||
console.log(hasCat("dog", "chicken", "cat")); // true
|
||||
console.log(hasCat("dog", "chicken", "horse")); // false
|
||||
```
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is the correct way to use the rest parameter syntax in a function definition?
|
||||
|
||||
## --answers--
|
||||
|
||||
```js
|
||||
function logArgs([args]) {
|
||||
for (const arg of args) {
|
||||
console.log(arg);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the beginning of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
function logArgs(>>>args) {
|
||||
for (const arg of args) {
|
||||
console.log(arg);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the beginning of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
function logArgs(...args) {
|
||||
for (const arg of args) {
|
||||
console.log(arg);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
function logArgs(<<<args) {
|
||||
for (const arg of args) {
|
||||
console.log(arg);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the beginning of the lecture for the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is a restriction when dealing with the rest parameter syntax?
|
||||
|
||||
## --answers--
|
||||
|
||||
You can only have one rest parameter per function definition.
|
||||
|
||||
---
|
||||
|
||||
You must place the rest parameter at the beginning of the function parameter list.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
You must have two rest parameters per function definition.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
You can only use rest parameters in arrow functions.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lecture for the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
## --text--
|
||||
|
||||
What is a key difference between the `arguments` object and rest parameters?
|
||||
|
||||
## --answers--
|
||||
|
||||
You can only use built in array methods like `push` and `pop` on the rest parameter while the `arguments` objects accepts all built in array methods.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
You cannot use built in array methods like `push` and `pop` on the rest parameter but those methods can be used on the `arguments` object.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
The `arguments` object is an `Array` instance while the rest parameter is array-like.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Refer to the end of the lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
The rest parameter is an `Array` instance while the `arguments` object is array-like.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "Working with the arguments Object and Rest Parameters",
|
||||
"blockType": "lecture",
|
||||
"blockLayout": "challenge-list",
|
||||
"isUpcomingChange": false,
|
||||
"dashedName": "lecture-working-with-the-arguments-object-and-rest-parameters",
|
||||
"helpCategory": "JavaScript",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "68bcc3b6a7480288cd981be0",
|
||||
"title": "What is the arguments Object?"
|
||||
},
|
||||
{
|
||||
"id": "68bcc7d9a1807e9752728e45",
|
||||
"title": "What are Rest Parameters and How Do They Differ from the arguments Object?"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -385,6 +385,7 @@
|
||||
"lab-falsy-remover",
|
||||
"lab-inventory-management-program",
|
||||
"lecture-understanding-modules-imports-and-exports",
|
||||
"lecture-working-with-the-arguments-object-and-rest-parameters",
|
||||
"lab-password-generator",
|
||||
"lab-sum-all-numbers-algorithm",
|
||||
"lab-html-entitiy-converter",
|
||||
|
||||
Reference in New Issue
Block a user