Shape Up explainer

Aim of the puzzle: Use .length - 1 to change the last value in an array.
Walk through of solution: Using .length on an array will return the number of items in the array. For example:

let animals = ['dogs', 'cats', 'frogs', 'turtles'];
console.log(animals.length);

The console.log() will print 4, as there are 4 items in the animals array.

Because arrays are indexed starting at 0, the index of the last item in an array will always be 1 less than the array’s length. To access the last item directly, we can use .length -1.

For example:

let doughnuts = [jelly, glazed];
let lastItem = doughnuts.length - 1

doughnuts has a length of 2, and the index of the last item 'glazed' is 1.

let cookies = ['chocolate chip', 'oatmeal raisin', 'snickerdoodle'];
let lastItem = cookies.length - 1

cookies has a length of 3, and the last item 'snickerdoodle' is at index 2.

In this puzzle, the setLastValue function will need to take an array and a string, and replace the last item in the array with the string.

To start, add 2 parameters to the function by tapping on the underline in the parentheses () and bringing up the keyboard. Give the parameters names like array and string, or arr and str.

Inside the function’s code block {}, create a variable to store the last index of the array:

let lastIndex = array.length - 1;

On the next line, use the variable to set the last item in the array to the string:

array[lastIndex] = string;

Finally, call the function at the bottom of the code to replace the last item in shapes with 'hexagon'
Sample code solution:

import { shapes } from 'grasshopper.shapes';

function setLastValue(array, lastValue) {
  let lastIndex = array.length - 1;
  array[lastIndex] = lastValue;
}

setLastValue(shapes,'hexagon');

for (let item of shapes) {
    console.log(item);
}

Javascript Concepts: Arrays, .length, Imports, Functions, Console

1 Like

My app might be bugged. I am unable to enter any parameters within the parentheses of the setLastvalue() function. All the options are grayed out. I tried typing the string in manually, but it won’t allow quote characters for the code.
Anyone else having this issue?

1 Like

Hey there,

Tap inside the parentheses of the function declaration to bring up the keyboard, and then type in the name you want to give the parameter. It’s like a variable name, so it won’t need any quotes.

Once the parameter is entered, you’ll then see a new key on the code keyboard. You can then use this key inside the function’s code block.

Hope this helps! Let me know if you have any questions.
Ben

Hi Ben,

Thank you for your suggestion, however that was what I last attempted to do. The system’s automated recommendatiln tells me to stick the string value into the parameter.

Unfortunately it will not allow me to declare or define the variable outside or within the function. I’ve attached a screenshot to show the system telling me to place the string value in the parameter itself.

Thanks for the screenshot, I see what the issue is.

When a function is declared, parameters are placed in the parentheses. These parameters can then be used to tell the function what to do when the function is called.

When the function is called, you can add “arguments” to the function call to give the function information it needs to run. You can read more about parameters vs arguments in this post.

You have the function declaration, but you aren’t calling the function anywhere.

Below the function declaration (after the closing } bracket), but before the for loop, add a new line that calls the function.

Tap the setLastValue() key to add the function call, then add the arguments inside the parentheses. Use the variable shapes as the 1st argument, and the string 'hexagon' as the 2nd.

Hope this clears things up. Let me know if you have any questions.
Ben

Ah thank you, such a simple fix. I very much appreciate your attentive and detailed answer. I grasp the concept much better now.

Also thanks to your team for developing Grasshopper, it is by far the best JavaScript educational tool I’ve found out there.

2 Likes

Hey,
Just to have some fun, I also tried this and it worked, but the app didn’t like it. Is this code problematic?

1 Like

Hey there,

The puzzle will complete if the code has a specific output, but if it doesn’t, the feedback messages will instruct you to create a separate variable for the .length - 1.

This is because the ability to write an expression inside array brackets was added to the app after these puzzles were written.

In this case, the puzzle wants 'hexagon' to be all lower case. Changing 'Hexagon' to 'hexagon' will solve the puzzle.

Hope this helps!
Ben

1 Like

Hey,
Thanks for your reply!
The puzzle was actually solved in this way too - I’m just asking if there would be problems in writing the code like I did.
Could you please elaborate - what do you mean by ‘specific output’?
Thank you for your help and for a great app!

Your solution, writing the expression inside the array brackets like arr[arr.length - 1], is actually much more common, and is how one would normally access the last item in an array when writing code.

Declaring a separate variable looks a bit clearer, however, which is useful for teaching the concept.

As for specific output, I mean to say that the app is checking that the function successfully changes the last item in the array to 'hexagon'.

1 Like

This is the exact same solution that is demestrated up there I don’t understand why it is saying this

What did I do wrong?

Hey there,

It looks like the import statement at the top of the code has been changed. It should be importing shapes, but is instead trying to import array. This can happen sometime if you rename variables.

Try resetting the code. Use array inside the function definition, as array is the parameter name. Use shapes outside the function definition.

Hope that helps! Let me know if you have any questions.
Ben

Hey there,

In your function call, you are using the string 'shapes' as an argument, instead of the array shapes. Delete the string, and replace it with the shapes key on the keyboard.

Hope this helps!
Ben

It did not work, can someone just send me the correct answer?

Sure. It’s posted up at the top of this thread. Try resetting the puzzle, then try the solution code. If that isn’t working, send in a bug report from inside the puzzle by tapping on the 3-dot button at the top-right of the puzzle and selecting “Send Feedback”.

Hope this helps,
Ben

I tried to enter the code at the top and when I got to the line:

array[lastindex] = lastvalue it kept putting the ‘=’ sign inside the brackets.

what am i doing wrong?

Hey there,

Make sure you have all of array[lastIndex] highlighted, then tap on the = sign. That should work.

Hope this helps! Let me know if you’re still having trouble,
Ben

Hi there,

I tried to add the return-statement to return the updated array from the function, but it was not avaiable.
It was correct without the return-statement, as I could also see in your solution.
But I did not understand why. Can you explain why I don‘t need it?

Thanks
Matthias

Hey there,

This function’s purpose is to take an array and some kind of data, like a string or a number, and change the last item in the array to store that data.

The function doesn’t necessarily need to return anything, although it would make sense to return the modified array from the function, like this:

function setLastValue(array, someNewData) {
    let lastIndex = array.length - 1;
    array[lastIndex] = lastValue
    return array;
}

This was likely left out to keep the puzzle’s focus on the concept of using .length - 1 to access the last item in an array.

Hope this helps! Let me know if you have any questions.
Ben