|
This article has links to websites or programs outside of Scratch and Wikipedia. Remember to stay safe while using the internet as we cannot guarantee the safety of other websites. |
|
This article is a stub. It may be incomplete, unfinished, or have missing parts/sections. If the article can be expanded, please do so! There may be suggestions on its talk page. (August 2020) |
This tutorial discusses arrays in JavaScript and compares them to lists in Scratch.
Creating a List or Array
In Scratch, a list can be made using the "Make a List" button in the Variables section of the Block Palette. In JavaScript, an array can be created and stored in a variable with this syntax:
const aNewArray = [item1, item2, item3];For example, this is the JavaScript version of the list in the image to the right:
const inventory = ['ruby', 'crystal', 'shovel', 'shoes', 'pan', 'emerald'];Arrays can hold different data types, just like lists in Scratch:
const aNewArray = ['string', 5, false];Adding Items to a List or Array
In Scratch, an item can be added to a list with the add [thing] to [list v] block. In JavaScript, the push() method can be used to add items to an array. For example, to add "gold" to the "inventory" list in Scratch, this could be done:
when green flag clicked add [gold] to [inventory v]
In JavaScript, this could be done:
let inventory = ['ruby', 'crystal', 'shovel', 'shoes', 'pan', 'emerald'];
inventory.push('gold');Removing Items From a List or Array
In Scratch removing project can be done with the delete [1] of [list v] block. It will remove the item index from the list. In Javascript, the splice() method can remove an item from an array. To remove item 4 ('shoes') from the "inventory" list in Scratch, this could be done:
when green flag clicked delete [4] of [inventory v]
In Javascript, removing items is a bit different. If you remove item 1 of an array, it will remove item 2. If you try removing item 0 of an array, it will remove item 1 of an array, as the first item in a Javascript array has an index of 0, whereas in scratch it has an index of 1. This is how removing an item could be done:
let inventory = ['ruby', 'crystal', 'shovel', 'shoes', 'pan', 'emerald'];
inventory.splice(3, 1);
Syntax for the splice() method: splice(start, deleteCount). More info can be found here: [Splice() Method]
Deleting All Items From a List or Array
Removing every item of an array in Scratch can be done with the delete all of [list v]. In JavaScript, this can be done by setting the array to an array with no items.
let mailbox = ['Letter from Mom', 'Advertisement', 'Scratch Blocks'];
mailbox = [];This is much easier than using the splice function:
let mailbox = ['Letter from Mom', 'Advertisement', 'Scratch Blocks'];
mailbox.splice(0, mailbox.length);
This has similar performance to the previous one but has more code. To break this one down, the length in mailbox.length gets how many items there are to the mailbox array. This is similar to the length of [list v] block in Scratch. With the splice command, it deletes index 0 of the array and the following 3 items in it with the length property.
Inserting Items to a List or Array
Inserting items to a list in Scratch can be done with the insert [thing] at (1) of [list v] block. In JavaScript, the splice will also be used for this. This will insert 'steel' in between the 'paper bag' item and the 'chips' item which makes 'steel' the 4th item:
let factoryItems = ['box', 'plastic bottle', 'paper bag', 'chips'];
factoryItems.splice(3, 0, 'steel');
Breaking this down, the splice property will insert 'steel' at the 3rd index making it the fourth in the array. The '0' in (3, 0, 'steel') means it will not delete any items from the array. The 'steel' in it means that it will insert 'steel' into the array.
