.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
functional-programming
add-elements-to-the-end-of-an-array-using-concat-instead-of-push.english.md
apply-functional-programming-to-convert-strings-to-url-slugs.english.md
avoid-mutations-and-side-effects-using-functional-programming.english.md
combine-an-array-into-a-string-using-the-join-method.english.md
combine-two-arrays-using-the-concat-method.english.md
implement-map-on-a-prototype.english.md
implement-the-filter-method-on-a-prototype.english.md
introduction-to-currying-and-partial-application.english.md
learn-about-functional-programming.english.md
pass-arguments-to-avoid-external-dependence-in-a-function.english.md
refactor-global-variables-out-of-functions.english.md
remove-elements-from-an-array-using-slice-instead-of-splice.english.md
return-a-sorted-array-without-changing-the-original-array.english.md
return-part-of-an-array-using-the-slice-method.english.md
sort-an-array-alphabetically-using-the-sort-method.english.md
split-a-string-into-an-array-using-the-split-method.english.md
understand-functional-programming-terminology.english.md
understand-the-hazards-of-using-imperative-code.english.md
use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.english.md
use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.english.md
use-the-filter-method-to-extract-data-from-an-array.english.md
use-the-map-method-to-extract-data-from-an-array.english.md
use-the-reduce-method-to-analyze-data.english.md
use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.english.md
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
79 lines
3.4 KiB
Markdown
79 lines
3.4 KiB
Markdown
---
|
|
id: 9d7123c8c441eeafaeb5bdef
|
|
title: Remove Elements from an Array Using slice Instead of splice
|
|
challengeType: 1
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
A common pattern while working with arrays is when you want to remove items and keep the rest of the array. JavaScript offers the <code>splice</code> method for this, which takes arguments for the index of where to start removing items, then the number of items to remove. If the second argument is not provided, the default is to remove items through the end. However, the <code>splice</code> method mutates the original array it is called on. Here's an example:
|
|
|
|
```js
|
|
var cities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"];
|
|
cities.splice(3, 1); // Returns "London" and deletes it from the cities array
|
|
// cities is now ["Chicago", "Delhi", "Islamabad", "Berlin"]
|
|
```
|
|
|
|
As we saw in the last challenge, the <code>slice</code> method does not mutate the original array, but returns a new one which can be saved into a variable. Recall that the <code>slice</code> method takes two arguments for the indices to begin and end the slice (the end is non-inclusive), and returns those items in a new array. Using the <code>slice</code> method instead of <code>splice</code> helps to avoid any array-mutating side effects.
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
Rewrite the function <code>nonMutatingSplice</code> by using <code>slice</code> instead of <code>splice</code>. It should limit the provided <code>cities</code> array to a length of 3, and return a new array with only the first three items.
|
|
Do not mutate the original array provided to the function.
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests:
|
|
- text: Your code should use the <code>slice</code> method.
|
|
testString: assert(code.match(/\.slice/g), 'Your code should use the <code>slice</code> method.');
|
|
- text: Your code should not use the <code>splice</code> method.
|
|
testString: assert(!code.match(/\.splice/g), 'Your code should not use the <code>splice</code> method.');
|
|
- text: The <code>inputCities</code> array should not change.
|
|
testString: assert(JSON.stringify(inputCities) === JSON.stringify(["Chicago", "Delhi", "Islamabad", "London", "Berlin"]), 'The <code>inputCities</code> array should not change.');
|
|
- text: <code>nonMutatingSplice(["Chicago", "Delhi", "Islamabad", "London", "Berlin"])</code> should return <code>["Chicago", "Delhi", "Islamabad"]</code>.
|
|
testString: assert(JSON.stringify(nonMutatingSplice(["Chicago", "Delhi", "Islamabad", "London", "Berlin"])) === JSON.stringify(["Chicago", "Delhi", "Islamabad"]), '<code>nonMutatingSplice(["Chicago", "Delhi", "Islamabad", "London", "Berlin"])</code> should return <code>["Chicago", "Delhi", "Islamabad"]</code>.');
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
<div id='js-seed'>
|
|
|
|
```js
|
|
function nonMutatingSplice(cities) {
|
|
// Add your code below this line
|
|
return cities.splice(3);
|
|
|
|
// Add your code above this line
|
|
}
|
|
var inputCities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"];
|
|
nonMutatingSplice(inputCities);
|
|
```
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
function nonMutatingSplice(cities) {
|
|
// Add your code below this line
|
|
return cities.slice(0,3);
|
|
// Add your code above this line
|
|
}
|
|
var inputCities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"];
|
|
nonMutatingSplice(inputCities);
|
|
```
|
|
</section>
|