//PROCESS: Using arrays

## <New code>

//PROCESS: `var arrayLength = exampleArr.length;`
— assigns the length of the exampleArr array to arrayLength

//PROCESS: ``` exampleArr[ exampleArr.length ] = newArrayElement; ```
//PROCESS: `exampleArr.push( newArrayElement );`

//PROCESS: `exampleArr.join( 'snakes' );`
— creates a string with all the elements of exampleVar joined together by the word 'snakes'

## Adding new elements to an array using an index

Let's say that we have created the following array:

``````//INIT: set up primeNumbersArr
2, 	//index 0
3,
5,
7,
11,

13,	//index 5
17,
19,
23,
29,

31	//index 10
];``````

What is the value of `primeNumbersArr[ 0 ]`?

What is the value of `primeNumbersArr[ 7 ]`?

What is the value of `primeNumbersArr[ 10 ]`?

What will be the next index number of primeNumbersArr?

``````//PROCESS: add the next prime number to the array
primeNumbersArr[ 11 ] = 37; // the 11th prime number in the array is 37``````

## Finding the length of an array

Arrays hold their length as a property.

So if you want to find out the length of primeNumbersArr, you would look at `primeNumbersArr.length`.

For example:

Notice again that because arrays count from zero, the last element of an array will be at index length - 1.

## Adding new array elements using `.length`

Did you notice that the current length of an array is the same as it's next index number?

You can use this fact if you don't want to automatically add a number to the end of an array:

``````//PROCESS: add the next prime number to the array

## `.push()`ing an element onto the end of an array

You can also use an array method called `push()` to add a new element to an array.

``````//INIT: set up stringArr and primeNumbersArr
var stringArr = [
"Red",
"Orange",
"Yellow",
"Green",
"Blue",

"Indigo"
];

//PROCESS: add violet to the end of the array
stringArr.push( "Violet" );
``````

## Displaying a whole array

If you use an array reference, `exampleArr`, instead of an individual array element, `exampleArr`, it will return the entire contents of your array separated by commas:

For example:

``````//the following line will show all the elements of stringArr, separated by commas:
document.querySelector( '#buttonId' ).innerHTML = stringArr;``````

## `.join()`ing array elements together

It may bug you that the array elements do not have spaces between the commas. There is a solution to that:

Notice how there is now a nice relaxing space after the commas?

`.join()` will join the elements of an array together into a long string, concatenated together with whatever is inside the `join()` brackets.

So `stringArr.join( ':' )` is the same as:

``````stringArr[ 0 ]
+ ':'
+ stringArr[ 1 ]
+ ':'
+ stringArr[ 2 ]
+ ':'
+ stringArr[ 3 ]
+ ':'
+ stringArr[ 4 ]
+ ':'
+ stringArr[ 5 ]
+ ':'
+ stringArr[ 6 ]
+ ':'
+ stringArr[ 7 ]``````

What do you think will happen if you show `stringArr.join('puppies')`?

What do you think will happen if you show `primeNumbersArr.join('...')`?

## Outputting a list using `.join()`

Let's say that I want to create a list of colours. Remember that a list looks like this:

``````<ol>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ol>``````

And it produces:

1. item one
2. item two
3. item three

Did you notice how between each element of the list is joined together with `</li><li>`?

#### To create a list we have to do the following:

1. Create a variable to hold the HTML list code, like outputString
2. Add the beginning HTML of the list: `<ol><li>`
3. Add the list information joined together: `exampleArr.join( '</li><li>' )`
4. Add the end HTML of the list: `</li></ol>`
5. Display the results: `document.querySelector( '#outputId' ).innerHTML = outputString;`

``````//OUTPUT: display the list inside the div called #outputId
var outputList = function ( outputString ) {
console.log( 'in outputList. outputString=' + outputString );

document.querySelector( '#outputId' ).innerHTML = outputString;
}

//PROCESS: join together the elements of stringArr into an HTML list
var createList = function ( stringArr ) {
console.log( 'in createList. stringArr=', stringArr );

var outputString = ""; // define an empty string to code the HTML code

// add the beginning of the list code
outputString = outputString + "<ol><li>";

// join together with more list code
outputString = outputString + stringArr.join( '</li><li>' );

// add the end of the list code
outputString = outputString + "</li></ol>";

return outputString;
}

//INIT: set up the array of colour strings
var initStringArr = function () {
console.log( 'in initStringArr...' );

var stringArr = [
"Red",
"Orange",
"Yellow",
"Green",
"Blue",

"Indigo"
];

//PROCESS: add violet to the end of the array - just to demonstrate .push()
stringArr.push( "Violet" );

return stringArr;
}

//MAIN: link together the functions to create the list
var mainProcedure = function () {

console.log( 'in mainProcedure...' );

//INIT: create the array of colour strings
var stringArr   = initStringArr();

//PROCESS: use the colours to create the HTML code of a list of colours
var listHTML    = createList( stringArr );

//OUTPUT: display the list of colours
outputList( listHTML );
}

//INPUT: start the main procedure when the button is clicked
document.querySelector( '#buttonId' ).onclick   = mainProcedure;``````