Arrays

• All about storing several pieces of data in one place.
• They are defined with square brackets and items are separated with commas

                const names = ["Travis", "Anna", "Ivan", "Carlyon"];
                const speeds  = [12, 31, 115, 800, 1080, 2];
                console.log('names:', names);
                console.log('speeds:', speeds);
            

Production Code example

            const menuItems = [
                {
                    title: t('New products'),
                    url: getNewProductsUrl(),
                    itemType: MenuItemType.InternalLink,
                    highlighted: true,
                },
                {
                    title: t('Hot deal'),
                    url: config.links.looks,
                    itemType: MenuItemType.ExternalLink,
                    highlighted: false,
                }
                ...
            

What can arrays hold?

• technically they can hold elements of any type including functions
• you should always try to store data of the same type in an array, especially in regards to looping
• More about loops in the next lesson

Best to avoid doing:

                const myCrazyArray = ["Travis", 10, false, "Carlyon"];
                console.log('myCrazyArray:', myCrazyArray);
            

Accessing Arrays

• array elements can be accessed via their index
• similar to how we access an object values with a key now we use an index
• in javascript arrays indexes start at 0, so the first element is myArray[0]

                const names = ["Travis", "Anna", "Ivan", "Carlyon"];
                const secondName = names[1];
                console.log('secondName:', secondName);
            

Updating Array Elements

• now that we know how to access array items we can also change them
• this way of changing an already created variable is called `mutation`

                const names = ["Travis", "Anna", "Ivan", "Carlyon"];
                names[0] = "Bob";
                console.log('names:', names);
            

Adding to an Array

• elements can be added to an array via the `.push` function

                const names = ["Travis", "Anna", "Ivan", "Carlyon"];
                console.log('names pre push:', names);
                names.push("Tim");
                console.log('name post push:', names);
            

The length property

• arrays have a very useful property `length`
• for example, we could use it to get the last item of an array

                const names = ["Travis", "Anna", "Ivan", "Carlyon"];
                const lastPerson = names[names.length - 1];
                console.log('lastPerson:', lastPerson);
            

Remove item from array

• use the array's splice method

                const names = ["Travis", "Anna", "Ivan", "Carlyon"];
                names.splice(2, 1);
                console.log(names);
            

string literial review

• as many of you noticed last class creating html with string literials is pretty powerful

                const teachers = ['jim', 'bob', 'fred', 'tim'];
                namesEl.innerHTML = `
                
Teadhers:
                

                    
${teachers[0]}
                    
${teachers[1]}
                    
${teachers[2]}
                    
${teachers[3]}
                
                `;