Week 01, Day 03.

What we covered today:

Loops in Javascript

The While Loop

The while loop will tell JS to repeat the statements within the curly brackets until the condition is true. It is ridiculously easy to make infinite loops with these. Beware! They'll crash your browsers and crush your spirits.

You need a condition in the parentheses, and you need something within the body (between the curly brackets) that will eventually change the condition to be false.

var x = 0;

while (x < 5) {
  console.log(x);
  x = x + 1;
}
The For Loop

A for loop is another way of repeating statements, more specialized than while.

It looks like the following:

for (initialize; condition; update) {

}

var x = 0; // This is the initialize value
while (x < 5) { // This is the condition (in the parentheses)
    console.log(x);
    x = x + 1; // This is the update
}

// To change this while loop into a for loop...

for (var x = 0; x < 5; x = x + 1) {
    console.log( x )
}
The Break Statement

To prematurely exit any loop, use the break statement:

for (var current = 100; current < 200; current++) {
    // current++ is the same current += 1 and current = current + 1
    // current-- also exists (minus 1)
    // Called syntactic sugar

    console.log('Testing ' + current);
    if (current % 7 == 0) {
        // The % stands for the modulus operator, it finds the remainder
        console.log('Found it! ' + current);
        break;
    }
}

Now that you have done a bit more on loops, have a crack at these exercises.

Collections in Javascript

The Array Data Type

An array is a type of data that holds an ordered list of values, of any type. They are sequences of elements that can be accessed via integer indices starting at zero (it can be zero elements along as well). More or less, it is a special variable that can hold more than one value at a time.

Repeating myself... But the indexes start at zero!

How to create an array

  • var testArray = [ 1, 2, 3 ]; - This is an array literal - definitely the way you should do it.
  • var testArray = new Array( 1, 2, 3 ); - Uses the Array constructor and the keyword new. Does the same thing, but stick to the other way.

How to access arrays

var amazingFrenchAuthors = [ "Alexandre Dumas", "Gustave Flaubert", "Voltaire", "Marcel Proust", "Jean-Paul Sartre", "Stendhal", "Anäis Nin", "Simone de Beauvoir", "Rene Descartes", "Montesquieu" ];

console.log( amazingFrenchAuthors[0] ); // Logs "Alexandre Dumas"
console.log( amazingFrenchAuthors[3] ); // Logs "Marcel Proust"

// You can use variables and expressions to access elements in arrays as well!
var theBestOfTheBest = 4;
console.log( amazingFrenchAuthors[ theBestOfTheBest ] ); // Logs "Jean-Paul Sartre"
console.log( amazingFrenchAuthors[ amazingFrenchAuthors.length - 1 ] ); // Logs "Montesquieu" (the last element)

// This will turn a string into an array, with each element defined by the space
var bros = "Groucho Harpo Chico Zeppo".split(" ");

How to iterate through elements in an array

Stick to the for loop in most cases, but there are always thousands ways of doing things.

var greatPeople = [ "Louis Pasteur", "Jacques Cousteau", "Imhotep", "Sigmund Freud", "Wolfgang Amadeus Mozart" ];

for ( var i = 0; i < greatPeople.length; i++ ) {
    console.log( greatPeople[ i ] ); // Will log out the "i-th" element
}


[ 'a', 'b', 'c' ].forEach( function (elem, index) {
    console.log(index + '. ' + elem);
});

// This will return:
// 0. a
// 1. b
// 2. c

Have a crack at these exercises.

How to set elements in an array

var amazingFrenchAuthors = [ "Alexandre Dumas", "Gustave Flaubert", "Voltaire", "Marcel Proust"];

amazingFrenchAuthors[0] = "Stendhal"; // Just access them and reassign!

console.log( amazingFrenchAuthors );
// Logs [ "Stendhal", "Gustave Flaubert", "Voltaire", "Marcel Proust"]

Common Methods and Properties for Arrays!

Properties, Methods and Functions

var amazingFrenchAuthors = [ "Alexandre Dumas", "Gustave Flaubert", "Voltaire", "Marcel Proust"];

console.log( amazingFrenchAuthors.length ); // Returns 4 - doesn't use a zero index

// POP //
amazingFrenchAuthors.pop(); // Removes the last element from an array and returns that element.
// END POP //

// PUSH //
amazingFrenchAuthors.push(); // Adds one or more elements to the end of an array and returns the new length of the array.
// END PUSH //

// REVERSE //
amazingFrenchAuthors.reverse(); // Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
// END REVERSE //

// SHIFT //
amazingFrenchAuthors.shift(); // Removes the first element from an array and returns that element.
// END SHIFT //

// UNSHIFT //
amazingFrenchAuthors.unshift(); // Adds one or more elements to the front of an array and returns the new length of the array.
// END UNSHIFT //

// JOIN //
amazingFrenchAuthors.join(); // Joins all elements of an array into a string.
// END JOIN //

// SPLICE //
amazingFrenchAuthors.splice(); // Adds and/or removes elements from an array.
amazingFrenchAuthors = ["Alexandre Dumas", "Gustave Flaubert", "Voltaire", "Marcel Proust"];
amazingFrenchAuthors.splice(1,1);
// returns ["Gustave Flaubert"]
// amazingFrenchAuthors is ["Alexandre Dumas", "Voltaire", "Marcel Proust"]

amazingFrenchAuthors.splice(1,1, "Gustave Flaubert");
// Returns the deleted items, and adds in the next parameters ["Voltaire"]
// amazingFrenchAuthors is ["Alexandre Dumas", "Gustave Flaubert", "Marcel Proust"]
// END SPLICE //

amazingFrenchAuthors = ["Alexandre Dumas", "Gustave Flaubert", "Marcel Proust"];

// INCLUDE //
amazingFrenchAuthors.include( "Alexandre Dumas" ); // Returns true.
amazingFrenchAuthors.include( "Montesquieu" ); // Returns false.
// END INCLUDE //

// INDEX OF //
amazingFrenchAuthors.indexOf("Alexandre Dumas"); // Returns 0.
amazingFrenchAuthors.indexOf("Anäis Nin"); // Returns -1 if it doesn't find anything
// END INDEX OF //

Homework