diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 664d83f63a5..92734bd5851 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -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 arguments object and rest parameter syntax." + ] + }, "lab-password-generator": { "title": "Build a Password Generator App", "intro": [ diff --git a/client/src/pages/learn/full-stack-developer/lecture-working-with-the-arguments-object-and-rest-parameters/index.md b/client/src/pages/learn/full-stack-developer/lecture-working-with-the-arguments-object-and-rest-parameters/index.md new file mode 100644 index 00000000000..3c827aa12d2 --- /dev/null +++ b/client/src/pages/learn/full-stack-developer/lecture-working-with-the-arguments-object-and-rest-parameters/index.md @@ -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. diff --git a/curriculum/challenges/english/blocks/lecture-working-with-the-arguments-object-and-rest-parameters/68bcc3b6a7480288cd981be0.md b/curriculum/challenges/english/blocks/lecture-working-with-the-arguments-object-and-rest-parameters/68bcc3b6a7480288cd981be0.md new file mode 100644 index 00000000000..85f28dddf6b --- /dev/null +++ b/curriculum/challenges/english/blocks/lecture-working-with-the-arguments-object-and-rest-parameters/68bcc3b6a7480288cd981be0.md @@ -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 variadic functions. + +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 diff --git a/curriculum/challenges/english/blocks/lecture-working-with-the-arguments-object-and-rest-parameters/68bcc7d9a1807e9752728e45.md b/curriculum/challenges/english/blocks/lecture-working-with-the-arguments-object-and-rest-parameters/68bcc7d9a1807e9752728e45.md new file mode 100644 index 00000000000..5bdf06c399c --- /dev/null +++ b/curriculum/challenges/english/blocks/lecture-working-with-the-arguments-object-and-rest-parameters/68bcc7d9a1807e9752728e45.md @@ -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(<<