//PROCESS: Using arrays

<New code>

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

//PROCESS: exampleArr[ exampleArr.length ] = newArrayElement;
— adds newArrayElement to exampleArr
//PROCESS: exampleArr.push( newArrayElement );
— adds newArrayElement to exampleArr

//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
var primeNumbersArr = [
	2, 	//index 0
	3,	
	5,
	7,
	11,
	
	13,	//index 5
	17,
	19,
	23,
	29,
	
	31	//index 10
];

Check your understanding

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?

We can add a new element to primeNumbersArr by adding the next index number. For example: 

//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
primeNumbersArr[ primeNumbersArr.length ] = 41;

.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[0], 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;

Learn more