JS repetition with loops

Agenda

Today we will look into

• Group work
• Repetition Loops
• More about objects
• Exercises

But first ... remember ternary conditions?

Ternary condition

condition ? expr1 : expr2

If the condition is true, provide expr1 else provide expr2.

It is like shorthand for an if else statement.

Example

function isUserValid(bool){
  return true;
}

var answer = isUserValid(true) ? "You may enter" : "Access denied";

var automatedAnswer = "You account number is " 
  + ( isUserValid(false) ? "1234" : "not available") + "."

Change this function into a ternary

... and assign it to variable called experiencePoints

function experiencePoints() {
    if (winBattle()) {
        return 10;
    } else {
        return 1;
    }
}

Group work (1h)

Let's build a very basic to-do list.

• Define the key features in your group.
• Start creating the JavaScript code.
• Ignore HTML for now.

Group work (1h)

Let's build a very basic Facebook or Twitter.

• What does Faceboook or Twitter do at their core?
• Define the key features in your group.
• Start creating the JavaScript code.
• Ignore HTML for now.

Repetition loops

Loops

There are four types of loops:

• while
• do while
• for
• forEach

while

The while loop is the easiest. It repeats through a block of code, as long as a specified condition is true.

while(statement){
  //codeblock this gets looped until the statment is false
}

If a condition is always true, the loop will run forever.
Make sure that the condition eventually becomes false.

do while

The do while loop is rarely used. The loop will always be executed at least once, even if the condition is false.

do {
  //code block here
} while(statment);

for

The for loop is most commonly used.

for(initialization; condition; iterator){
  //codeblock this gets looped until the condition is false
}

The for loop has a specific pre-defined amount of loops

forEach

The forEach loop came with ES5.

array.forEach(function(value, index) {
  //more code here 
});

The forEach loop is for looping through arrays, the length of the array defined how many loops there will be.

forEach in ES6

New notation in ES6: forEach with arrow function

array.forEach(element => {
  //more code here     
});

Looping through an array

The for of loop is intended for iterating over arrays. An alternative to forEach.

let list = ["doors", "windows", "rooms"];
for(let x of list){
  console.log(x);
}         

It works for all iterable objects, including strings.

for(let ch of "hello"){
  console.log(ch);
}         

Looping through an object

The for in loop is intended for iterating over the keys of an object.

let obj = {doors: 2, windows: 8, rooms: 5};
for(let x in obj){
  console.log(x);
}         

• Do not use this loop for arrays.
• The iterating variable x is always a string.

Looping through an object

Alternatively you can use Object.keys().forEach() or Object.values().forEach to loop through an object.

let obj = {doors: 2, windows: 8, rooms: 5};
Object.keys(obj).forEach(function(property_name){
  console.log(obj[property_name]);
});         

let obj = {doors: 2, windows: 8, rooms: 5};
Object.values(obj).forEach(function(property_value){
  console.log(property_value);
});         

More about objects

Remeber this?

Object constructor

function Person(name, age, married) {
this.name = name;
this.age = age;
this.isMarried = married;
this.hello = function() {
  return "Hello " + this.name;
}
};          

Classes

New in ES 6

class Person {
  constructor(name, age, married) {
    this.name = name;
    this.age = age;
    this.isMarried = married;
    this.hello = function() {
      return "Hello " + this.name;
    }
  }
}

Classes are templates for JavaScript objects

A newer notation for the object constructor

Destructuring

Faster and easier way to access object properties. New in ES6. The name of the variable and the property name have to be identical.

const obj = {
  person: "Susanne",
  age: 38,
  experience: 13
}

/** the way we know */
const person = obj.person;
let age = obj.age;
let experience = obj.experience;

/** destructured */
const { person } = obj;
let { age, experience } = obj;

Destructure this

const person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};

let firstName = person.firstName;
let lastName = person.lastName;
let age = person.age;
let eyeColor = person.eyeColor;

Dynamic object properties

With [] in your property name, you can put in dynamic values, like another variable or a calculation.

const name = "first name";

const obj = {
  [name]: "Susanne",
  [5 + 13]: 38,
  experience: 13
}

Symbol

The one datatype we did not talk about yet.

const s1 = Symbol();
const s2 = Symbol();

• Mainly used as unique identifier aka keys in objects
• It is hidden

• It is unique

Group exercises (15 min each)

Arrays

// using this array,
// var array = ["Banana", "Apples", "Oranges", "Blueberries"];

1. Access and output Oranges.
2. Remove the Banana from the array.
3. Sort the array in order.
4. Put "Kiwi" at the end of the array.
5. Remove "Apples" from the array.
6. Sort the array in reverse order, i.e. ['a', 'c', 'b'] becomes ['b', 'c', 'a'])

You should at the end have ["Kiwi", "Oranges", "Blueberries"]

Work on your project