.github
api-server
client
config
curriculum
challenges
_meta
arabic
chinese
english
01-responsive-web-design
02-javascript-algorithms-and-data-structures
basic-algorithm-scripting
basic-data-structures
basic-javascript
debugging
es6
compare-scopes-of-the-var-and-let-keywords.english.md
create-an-export-fallback-with-export-default.english.md
create-strings-using-template-literals.english.md
declare-a-read-only-variable-with-the-const-keyword.english.md
explore-differences-between-the-var-and-let-keywords.english.md
import-a-default-export.english.md
mutate-an-array-declared-with-const.english.md
prevent-object-mutation.english.md
set-default-parameters-for-your-functions.english.md
understand-the-differences-between-import-and-require.english.md
use--to-import-everything-from-a-file.english.md
use-arrow-functions-to-write-concise-anonymous-functions.english.md
use-class-syntax-to-define-a-constructor-function.english.md
use-destructuring-assignment-to-assign-variables-from-arrays.english.md
use-destructuring-assignment-to-assign-variables-from-nested-objects.english.md
use-destructuring-assignment-to-assign-variables-from-objects.english.md
use-destructuring-assignment-to-extract-values-from-objects.english.md
use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.english.md
use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.english.md
use-export-to-reuse-a-code-block.english.md
use-getters-and-setters-to-control-access-to-an-object.english.md
use-the-rest-parameter-with-function-parameters.english.md
use-the-spread-operator-to-evaluate-arrays-in-place.english.md
write-arrow-functions-with-parameters.english.md
write-concise-declarative-functions-with-es6.english.md
write-concise-object-literal-declarations-using-simple-fields.english.md
functional-programming
intermediate-algorithm-scripting
javascript-algorithms-and-data-structures-projects
object-oriented-programming
regular-expressions
03-front-end-libraries
04-data-visualization
05-apis-and-microservices
06-information-security-and-quality-assurance
08-coding-interview-prep
09-certificates
portuguese
russian
spanish
formattingConversion
math-challenges
requiresTests
schema
test
.babelrc
.editorconfig
.npmignore
.travis.yml
CHANGELOG.md
LICENSE.md
commitizen.config.js
commitlint.config.js
create-challenge-bundle.js
getChallenges.js
gulpfile.js
index.js
lib.js
md-translation.js
package-entry.js
package-lock.json
package.json
utils.js
docs
guide
mock-guide
search-indexing
tools
.editorconfig
.eslintignore
.eslintrc.json
.gitattributes
.gitignore
.node-inspectorrc
.prettierrc
.snyk
.travis.yml
.vcmrc
CODE_OF_CONDUCT.md
CONTRIBUTING.md
Dockerfile.tests
LICENSE.md
README.french.md
README.italian.md
README.korean.md
README.md
SECURITY.md
azure-pipelines.yml
change_volumes_owner.sh
docker-compose-shared.yml
docker-compose.tests.yml
docker-compose.yml
lerna.json
libcimp_index_js.patch
package-lock.json
package.json
patch_npm_and_install.sh
sample.env
05f73ca409
* fix: convert js algorithms and data structures * fix: revert some blocks back to blockquote * fix: reverted comparison code block to blockquotes * fix: change js to json Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: convert various section to triple backticks * fix: Make the formatting consistent for comparisons
83 lines
2.4 KiB
Markdown
83 lines
2.4 KiB
Markdown
---
|
|
id: 587d7b8a367417b2b2512b4c
|
|
title: Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements
|
|
challengeType: 1
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array.
|
|
The result is similar to <code>Array.prototype.slice()</code>, as shown below:
|
|
|
|
```js
|
|
const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
|
|
console.log(a, b); // 1, 2
|
|
console.log(arr); // [3, 4, 5, 7]
|
|
```
|
|
|
|
Variables <code>a</code> and <code>b</code> take the first and second values from the array. After that, because of rest parameter's presence, <code>arr</code> gets rest of the values in the form of an array.
|
|
The rest element only works correctly as the last variable in the list. As in, you cannot use the rest parameter to catch a subarray that leaves out last element of the original array.
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
Use destructuring assignment with the rest parameter to perform an effective <code>Array.prototype.slice()</code> so that <code>arr</code> is a sub-array of the original array <code>source</code> with the first two elements omitted.
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests:
|
|
- text: <code>arr</code> should be <code>[3,4,5,6,7,8,9,10]</code>
|
|
testString: assert(arr.every((v, i) => v === i + 3) && arr.length === 8);
|
|
- text: <code>Array.slice()</code> should not be used.
|
|
testString: getUserInput => assert(!getUserInput('index').match(/slice/g));
|
|
- text: Destructuring on <code>list</code> should be used.
|
|
testString: assert(code.replace(/\s/g, '').match(/\[(([_$a-z]\w*)?,){1,}\.\.\.arr\]=list/i));
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
<div id='js-seed'>
|
|
|
|
```js
|
|
const source = [1,2,3,4,5,6,7,8,9,10];
|
|
function removeFirstTwo(list) {
|
|
"use strict";
|
|
// change code below this line
|
|
const arr = list; // change this
|
|
// change code above this line
|
|
return arr;
|
|
}
|
|
const arr = removeFirstTwo(source);
|
|
console.log(arr); // should be [3,4,5,6,7,8,9,10]
|
|
console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];
|
|
```
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
const source = [1,2,3,4,5,6,7,8,9,10];
|
|
function removeFirstTwo(list) {
|
|
"use strict";
|
|
// change code below this line
|
|
const [, , ...arr] = list;
|
|
// change code above this line
|
|
return arr;
|
|
}
|
|
const arr = removeFirstTwo(source);
|
|
```
|
|
</section>
|