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?

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?

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