JavaScript for Kids: Arrays Tutorial

Welcome to the Awesome Array Adventure! I hope you learned something cool about our loops tutorial. Open codepen.io to begin our lesson.

Today we're going to learn about something super cool in JavaScript called arrays. Think of an array like a magical box that can hold lots of different things. It's like having a toy box where you can store all your favorite toys in order.

For example, we could have an array of your favorite fruits:

let fruits = ["apple", "banana", "orange", "strawberry"]; 

See how we put all those fruits in square brackets [ ] separated by a comma? That's how we make an array in JavaScript!

We can access those values by a thing called index. Indices begins from 0 and can go very big.

if you wanted to get apple as your favorite fruit, you will write:

let favorite = fruits[0];
console.log(favorite) //will output apple

It's because apple is the first index of the array "fruits".

And if you want to show orange as your least favorite fruit you will write:

let leastFavorite = fruits[2];
console.log(leastFavorite) // will output orange

That is because we begin counting apple as 0, banana as 1 and orange as 2. That is magical right? Do you know what index strawberry is? Yes, 3 is strawberry's index.

Let's try making an array of colors:

 let colors = ["red", "blue", "green", "yellow"]; 

Cool! You've just created your first array.

Let's make another one with numbers:

let luckyNumbers = [7, 13, 22, 31]; 

You can put any type of thing in an array - words, numbers, or even a mix!

let mixedArray = ["pizza", 42, "unicorn", 99]; 

Now you're an array-making pro!

Guess what? Your array isn't stuck with the same items forever! You can add new things or take things away. It's like adding new toys to your toy box or giving some away.

Adding Items:

To add an item to the end of your array, use the push() method.

It's like pushing a new toy into your toy box:

let fruits = ["apple", "banana", "orange"]; fruits.push("grape"); 

console.log(fruits); // will output ["apple", "banana", "orange", "grape"]

Removing Items:

To remove the last item from your array, use the pop() method.

It's like taking out the last toy you put in:

let lastFruit = fruits.pop(); 
console.log(lastFruit); // This will be "grape" 
console.log(fruits); // Now it's back to ["apple", "banana", "orange"] 

Adding to the Front:

Want to add something to the beginning? Use unshift() method.

fruits.unshift("strawberry");

console.log(fruits); // Now it's ["strawberry", "apple", "banana", "orange"]

Removing from the Front:

To remove the first item, use shift():

let firstFruit = fruits.shift(); 
console.log(firstFruit); // This will be "strawberry" 
console.log(fruits); // Now it's ["apple", "banana", "orange"] 

Now you're a master of changing your arrays!

Homework:

Create Your Own Animal Zoo!

It's time to become a zookeeper and manage your very own zoo using arrays!

Your tasks:

1. Create an array called myZoo with at least 5 different animals.

2. Use console.log to print out the third animal in your zoo.

3. Add a new animal to the end of your zoo using push().

4. Remove the first animal from your zoo using shift().

5. Replace the second animal in your zoo with a different animal. (Hint: you can do this by accessing the element directly, like myZoo[1] = "new animal")

6. Print out all the animals in your zoo. (Bonus: Can you use a loop to do this?)

7. Create a new array called zooSounds with animal sounds that match your zoo animals.

8. Print a message that says "[Animal] goes [Sound]" for each animal in your zoo. (Hint: Use the animals from myZoo and the sounds from zooSounds)

Example of what your code might look like:

let myZoo = ["elephant", "lion", "giraffe", "monkey", "penguin"];

console.log("The third animal in my zoo is: " + myZoo[2]);

myZoo.push("tiger");

console.log("I added a tiger to my zoo!");

// Continue with the rest of the tasks...

Remember, there's no single right answer. Be creative and have fun with your zoo!

Write your answers in the comment section and please don't forget to share!