Lesson 4

The collective

What Makes a program

Programs made up of different things

Variables - Collections

Statements

Conditionals

Loops

Functions

Classes

Arrays

An array is a collection of data which  is indexed by numbers. Indexes start at 0 then go to array.length. There is no limit to what can be held in an array.

var theEnd = [
    'Hello World', 
    12, 
    false
];

console.log(theEnd[0]);

Bounds

When referencing an array, its important to make sure you reference an existing value.

var theEnd = [
    'Hello World', 
    12, 
    false
];

console.log(theEnd[3]);

Length

If you want to get the number of elements inside of an array, simply use array.length

var theEnd = [
    'Hello World', 
    12, 
    false
];

console.log(theEnd.length);

Adding to arrays

Find a way to add an element to an array using array.length

var theEnd = [
    'Hello World', 
    12, 
    false
];

console.log(theEnd.length);

theEnd[theEnd.length] = 'Steve';

console.log(theEnd.length);

Adding to arrays

You can also use Array.push(element) method.

var theEnd = [
    'Hello World', 
    12, 
    false
];

console.log(theEnd.length);

theEnd.push('Steve');

console.log(theEnd.length);

Adding to arrays

Want to add to the beginning? Array.unshift(element)

var theEnd = [
    'Hello World', 
    12, 
    false
];

console.log(theEnd.length);

theEnd.unshift('Steve');

console.log(theEnd);

Removing from arrays

shift/pop - remove first/last element from the array.

var theEnd = [
    'Hello World', 
    12, 
    false
];

console.log(theEnd.pop);

console.log(theEnd);

console.log(theEnd.shift);

console.log(theEnd);

What to avoid

You can create an array using the new Array() method.

var theEnd = new Array('hello', 12, 42);

var theEnd = new Array(); //bad
var notEnd = []; //good

var theEnd = new Array(40,100); //[40,100]
var notEnd = [40,100]; //[40,100]

var theEnd = new Array(40); //40 Undefined elements
var notEnd = [40]; //[40]

What to avoid (cont.)

When you create an array using

var theEnd = [];

var theEnd = new Array(40,100);

You're telling the interpreter to create a new runtime array. No extra processing necessary at all. Done.

 

You're telling the interpreter, I want to call the constructor "Array" and generate an object. It then looks up through your execution context to find the constructor to call, and calls it, creating your array.

 

You may think "Well, this doesn't matter at all. They're the same!". Unfortunately you can't guarantee that.

What to avoid (cont.)

function Array() {
    this.is = 'SPARTA';
}

var a = new Array();
var b = [];

alert(a.is);  // => 'SPARTA'
alert(b.is);  // => undefined
a.push('Woa'); // => TypeError: a.push is not a function
b.push('Woa'); // => 1 (OK)

Parallel Arrays

You can use two arrays at the same time, to represent more complex data.

var movies   = [
    'Birdman', 
    'Shawshank Redemption', 
    'Batman & Robin'
];

var raitings = [95, 98, 11];

//pick a movie
var choice = 0;

console.log(movies[choice] + ' scores ' + raitings[choice]);

Pick a card

Create a program that picks a random poker card and tells you an associated fortune.

//Find a random number between 1 and 10
Math.floor((Math.random() * 10) + 1);

Pick a card

Now create a browser version.

npm install connect serve-static
//server.js
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080);
//index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Pick a card</title>
    </head>
    <body>
        <script>
            //Javascript Here
        </script>
    </body>
</html>

Pick a card

Browser version hints

alert('Help!');

var person = prompt('Please enter your name', 'Harry Potter');

Lesson 4 - Arrays

By Mathew Kleppin

Made with Slides.com

Lesson 4 - Arrays

How to best use arrays in javascript.

  • 442

More from Mathew Kleppin