learn-co-curriculum / javascript-arrays-lab

JavaScript Arrays Lab

Objectives

1. Practice writing arrays
2. Practice manipulating arrays
3. Explain how to manipulate arrays in a non-destructive way

Introduction

Previously, we've learned about how arrays work. We know that push() pushes elements onto the ends of arrays, and pop() pops them off; similarly, unshift() adds elements to the beginnings of arrays, and shift() pulls them off.

Now it's time to put what we've learned to the test.

What's with all this destruction?

You might have noticed that our tests are looking for functions like destructivelyAppendKitten() — what's up with that? (Rest assured, no kittens will be harmed.)

We want to distinguish between actions that mutate ("change") their underlying structures (like pop(), push(), shift(), and unshift()) and those functions that leave those structures untouched.

In general, it's good practice to avoid mutating a program's state whenever possible. So we want to call out these methods as destructive, since mutating state means we don't always know what we're dealing with. Indeed, these mutations mean that we need to refresh the test environment after every test to make sure that we're not working with mutated data!

By contrast, we also have methods like appendKitten(), which simply adds a kitten to the end of the kittens array and returns the new array, leaving the existing array untouched. This flow is preferable to mutating state because we have complete control over what's going into and coming out of the function.

Try to use methods like slice() or concat() to return a new array when keeping the original array intact.

• concat()

• slice()

Think of it this way: you're making a peanut butter and jelly sandwich. Would you rather work with a sandwich where someone had put an unspecified amount of peanut butter or jelly on the bread before you start making it (or, worse, where someone had taken a bite out of the bread), or would you rather start fresh?

Regardless of your feelings about stale peanut butter and jelly, we're going to state unequivocally that fresh sandwiches are preferable — and fresh functions (ones that don't mutate shared state) are preferable, too.

Run those tests!

You'll notice that the first test asks for an array called kittens, set to an initial value of ["Milo", "Otis", "Garfield"].

In our test file, we're going to reset this array to your initial value after every test. Some of our tests manipulate arrays in place, and we want to be sure that we can get back to a blank slate between tests.

Why is a blank slate important? We want our programs to be predictable: this makes them more robust, easier to maintain, and less prone to bugs. One way to achieve predictability is by isolating our tests from one another, meaning that no test should depend on the outcome or process of any other test. That way, tests can run in any order and test known inputs and environments, rather than depending on other tests running first and modifying the entire environment.

Remember the workflow:

1. Run learn test.

2. Read the errors; vocalize what they're asking you to do.

3. Write code, save, and repeat steps 1 and 2 often until a test passes.

4. Repeat as needed for further tests.

5. Run learn submit when finished!

Normally, resetting the array and the array itself would be decoupled — that is, independent. But because of the nature of this lab, we need to be a bit prescriptive and give you some initial values so that we can focus on what really matters — understanding how to manipulate arrays in JavaScript.

Resources

• npm

javascript-arrays-lab's Issues

Problem with IDE

The IDE is not working properly. My fork of the project exists in my GitHub but does not appear in the IDE on https://learn.co/tracks/bootcamp-prep/javascript-fundamentals/data-structures/javascript-arrays-lab. The console also appears to not be functioning

I had started this lab yesterday (05/10/2018) and it was functioning.

Grammar issue/typo

There's a typo in the lesson. It says "keep" when it should say "keeping." See attached screenshot.

Labs do not instruct user to save file before running tests or submitting.

Labs do not instruct user to save file before running tests or submitting (learn test / learn submit). Since IDE abstracts away the terminal and code editor, it's unclear to new users (and was unclear to me, with a couple CS courses under my belt) why learn test/learn submit were failing. Suggested remedy: Add instruction to first lab to save all files before attempting learn test/learn submit.

`$ learn submit` not syncing

I passed all tests and tried multiple times to $ learn submit, but the "Submit" status will not update.

First test not working properly

When this lesson loads, index.js shows the following and the first test passes.
const app = "I don't do much."
If I empty out index.js and save, the first test still passes.

Unexpected Error message

Not sure how to resolve the issue below. Please let me know if you can assist. Thank you.

// ♥ learn test
yarn install v1.3.2
[1/5] Validating package.json...
error [email protected]: The engine "node" is incompatible with this module. Expected ve
rsion "6.x".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Learn IDE 3

The desktop version of Learn IDE 3 has stopped connecting to the server. I have tried to exit out and reopen it but it is still not working.

Javascript Arrays Lab - Broken

The last test in this lab asks you to create the function removeFirstKitten() which is supposed to remove the first kitten from the kittens array and return a new array, leaving the kittens array unchanged.
If you do this by means of kittens.slice(1,3) it works.

But if you try to do it by kittens.splice(0,1) it doesn't work. It seems to be treating splice as slice. So kittens.splice(1,3) would work. Seems .splice() is being treated as .slice()

Cannot find module 'jsdom/lib/old-api'

I'm on the Javascript arrays lab, and this lesson's tests won't run because a before hook isn't satisfied. Here's a screenshot below of my error message:

Also, since the tests won't run at all the IDE seems to recognize this as all of the tests passing.

Would appreciate any help with this!

broke the javascript arrays lab on my learn ide

const app = "I don't do much."
var kittens = ["Milo", "Otis", "Garfield"]

function destructivelyAppendKitten(name) {
kittens.push(name)
}

function destructivelyPrependKitten(name) {
kittens.unshift(name)
}

function destructivelyRemoveLastKitten() {
kittens.pop()
}

function destructivelyRemoveFirstKitten() {
kittens.shift()
}

function appendKitten(name) {
return [...kittens, name]
}

function prependKitten(name) {
return [name, ...kittens]
}

removeFirstKitten() {
return kittens.slice(1)
}

removeLastKitten() {
return kittens.slice(0, kittens.length - 1)
}

This is the code i submitted, at one point I wrote "kitten" instead of "kittens". I also tried submitting and spelled the word "length" incorrectly. The lab does not open properly now and does not let me submit anything.

Receiving timeout error on freshly forked tests

I have received the following error on the past few labs. My pull requests were still being requested, so I had ignored a few hoping that it was an irregular issue, however, it this same error has been thrown for the past few lessons.

1. arrays "before all" hook:
   Error: timeout of 2000ms exceeded. Ensure the done() callback is being called in this test.
   at Object.done (node_modules/mocha-jsdom/index.js:70:7)
   at process.nextTick (node_modules/jsdom/lib/jsdom.js:325:18)
   at _combinedTickCallback (internal/process/next_tick.js:73:7)
   at process._tickCallback (internal/process/next_tick.js:104:9)

I toyed around a bit with the done() function looking at previous labs with functioning tests, however, I was unable to get the timeout error to resolve. I reached out to another student who is having the same issue. If this is part of the learning process, I'll take another look ;)

EDIT:

When the 'Create Issue' button appeared via learn.com it took me to this repository page, and not the 'learn-co-student/javascript-arrays-lab-cb-gh-000' repository. I have forked directly from 'learn-co-curriculum/javascript-arrays-lab' and it appears to be running okay. The two repositories seem to be identical (from a cursory glance of commits) so it is a mystery to me as to what this issue is related to...

EDIT 2:

Very bizarre, gave it one last try on the original 'students' repo and everything seems to be running fine. Maybe it is the sleep deprivation, but I felt quite sure that I was doing everything right. Leaving the door cracked on the off chance its a server side issue?

Lesson not downloading

The JS arrays lab 1 isn't downloading correctly to IDE when "Open" button is clicked.
Internet connection is good, first time issue.

Screenshot from Learn IDE below:

Testing errors

I have received the following errors:

1. loops
   forLoop(array)
   adds "I am ${i} strange loop${i === 0 ? '' : 's'}." to an array 25 times:
   TypeError: Cannot read property 'slice' of undefined
   at Context.it (test/loops-test.js:33:38)
2. loops
   whileLoop(n)
   counts down from n to 0:
   AssertionError: expected undefined to equal 'done'
   at Context.it (test/loops-test.js:49:31)

Inconsistency in documentation and test files in the 'kittens' array lab

Test file defines kittens newly before each function automatically, which the README and website both do not agree with. As we are asked to define kittens, this leads to all tests obscurely failing with functions undefined. Possible solution -- alter the readme and website to reflect the divergence in the index-test.js file, or alter the index-test.js file and require the user to define and manage it themselves.

NPM error

When I try to run a test I get the following error:

yarn install v1.3.2
[1/5] Validating package.json...
error [email protected]: The engine "node" is incompatible with this module. Expected version "6.x".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Not sure how to handle this

Append and return new array without modifying the old one. JavaScript

I need to append an element to an array and return the new one, leaving the old one unchanged.
var kittens = ["Milo", "Otis", "Cat"]
function appendKitten(name) { kittens.slice(0); kittens.push(); var clone = kittens.slice(0); return clone }

Lesson not downloading

Clicking on "Open IDE" button for this Javascript Arrays Lab, leads to this error:

Looking for lesson...
Hmm...Cannot find lesson with repo: javascript-arrays-lab-bootcamp-prep-000. Please check your input and try again.

Error with first two test

A student was looking in the index-test.js and noticed there was two test that automatically passes (the test that checks if you create the kittens array). He was unsure how to define the array. He actually had this code written.

var window = {
  kittens: ['milo', 'otis', 'garfield']
}

Thinking he had to define it as a window object. He seemed pretty upset because he never saw the test run and didn't really understand what he was looking for.

Any way to re-evaluate the spec in order to make the first two test viewable upon running the test file?

Incorrect statement about splice() method

Fifth paragraph under "WHAT'S WITH ALL THIS DESTRUCTION?" states:

"Try to use methods like slice(), concat(), or splice() to return a new array when keep the original array intact."

This is incorrect as the MDN documentation notes that splice() does mutate the original array.