More Array Methods (7/9) Step 4

#1

I’m working on Step 4 where it asks: Log the grocery list to the console one more time.
Notice that the groceryList array still contains the same items it had in Step 2.

The original groceryList was:
let groceryList = [‘orange juice’, ‘bananas’, ‘coffee beans’, ‘brown rice’, ‘pasta’, ‘coconut oil’, ‘plantains’];

As it mentions in the instructions, when you log groceryList to the console, it shows the array that was left from step 2 where it asked you to use .unshift(); and replace ‘orange juice’ with ‘popcorn’ so groceryList.unshift(‘popcorn’); gave this result:

[ ‘popcorn’,
‘bananas’,
‘coffee beans’,
‘brown rice’,
‘pasta’,
‘coconut oil’,
‘plantains’ ]

How come the last step doesn’t revert back to the original array that had the orange juice or the .shift() method from Step 1 where it didn’t have ‘orange juice’ or ‘popcorn’ at all? Why does it skip over the array from Step 1 and go directly to the array in step 2?

#2

Link to the exercise, please. Thanks.

#3

Sorry about that: https://www.codecademy.com/courses/learn-javascript-arrays/lessons/arrays/exercises/more-array-methods?action=lesson_resume&course_redirect=introduction-to-javascript

Hope that works!

#4

At the start of step 2 ‘orange juice’ was gone. We replace it with ‘popcorn’ which is still present. The focal point of the lesson is that the slice is merely a copy of the selected range of the array. Nothing in the original array is affected and it remains completely intact.

A slice is a copy. That’s the bottom line.

slice is a copy

This is nice to know if we wish to spin off a true independent copy of an array.

const myArray = [];
const myClone = myArray.slice();

Let’s pretend that the first array is populated before the second is declared.

#5

Thank you but I understood the .slice() method. After the original array, the lesson asks you to do 1. a groceryList.shift(); 2. a groceryList.unshift(‘popcorn’); and 3. a groceryList.slice(1,4) which was more of a console.log(groceryList(1,4));

When you in input the last step console.log(groceryList); then it gives you the array it had on Step 2. This is the part I don’t understand. How does it decide it will still include Step 2’s list?

#6

It doesn’t decide. As mentioned earlier a slice does not remove any elements from the array, so the array from Step 2 is still fully intact. Nothing has changed.

Here is an example…

const fullScale = ['do', 're', 'mi', 'fa', 'sol', 'la', 'ti', 'do'];
const tonicToFourth = fullArray.slice(0, 4);
const fifthToTonic = fullArray.slice(4)

console.log(tonicToFourth);
console.log(fifthToTonic);
console.log(fullScale);

Output

 Native Browser JavaScript
 >
 [ 'do', 're', 'mi', 'fa' ]
 [ 'sol', 'la', 'ti', 'do' ]
 [ 'do', 're', 'mi', 'fa', 'sol', 'la', 'ti', 'do' ]
=> undefined
 >

Notice that the fullScale array is still what we started with? The two slices are only copies of the two ranges, bottom half and top half.

#7

this is really a usefull answer.
I’m still confused tho about .slice() function, hope you can provide an answer one more time.

So when you call const tonicToFourth = fullArray.slice(0, 4);
why does it give you [ 'do', 're', 'mi', 'fa' ] ?
why doesnt it give you [ 'do', 're', 'mi', 'fa', 'sol' ] ?
since 0 = 'do' , 1 = 're' , 2 = 'mi' , 3 = 'fa' , 4 = 'sol' .

#8

Because the ending index is not included in the slice. There will be four elements, though, since the first is index[0]. Think of it as first index NOT to include.

#9

Thanks for the example! I had not seen your complete reply for some reason but yes that’s useful!

#10

I think what was confusing is the fact that with the methods .shift() and .unshift(), the array will be modified while .slice() won’t modify the array and is just a copy of the array as you say. The lesson doesn’t explicitly tell you which ones out of the group of methods will modify and won’t modify an array (with the exception of .pop() and .push()). That’s something that you have to look up on your own to really understand this lesson.

#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.