Google+
4elements web design & consultancy

4elements

web design & consultancy
4elements web design & consultancy

4elements

  1. web design en consultancy

blog

  1. Home
  2. blog
  3. lees
  4. Learn Computer Science With JavaScript: Part 3, Loops
  • dislike -4 28

    Learn Computer Science With JavaScript: Part 3, Loops

    1. September 2017
    2. Daily
    3. gelezen 595
    4elements | web design Den Haag blog • Learn Computer Science With JavaScript: Part 3, Loops

    Introduction

    Suppose you have been given the task to write a program that displays the numbers 1–100. One way you could accomplish this is to write 100 console.log statements. But I’m sure you wouldn’t because you would have become fed up by the 9th or 10th line.  

    The only part that changes in each statement is the number, so there should be a way to write only one statement. And there is with loops. Loops let us perform a set of steps in a code block repeatedly.  

    Contents

    • While loops
    • Do-while loops
    • For loops
    • Arrays
    • For-in loops
    • For-of loops
    • Review
    • Resources

    While Loops

    While loops will execute a set of statements repeatedly while some condition is true. When the condition is false, the program will exit the loop. This kind of loop tests the condition before performing an iteration. An iteration is an execution of the loop’s body. The following example will not display anything because our condition is false.

    let hungry = false;

while (hungry) {
    console.log("eat");
}

    This is the general form of a while loop:

    while (condition) {
    statement;
    statement;
    etc.
}

    One thing to be careful of when using while loops is creating loops that never end. This happens because the condition never becomes false. If it happens to you, your program will crash. Example:

    let hungry = true;

while (hungry) {
    console.log("eat");
}

    Task

    How many times will the body of this loop be executed:

    let i = 0;

while (i < 10) {
    console.log("Hello, World");
    i += 1;
}

    Do-While Loops

    A do-while loop will execute the body of statements first, and then check the condition. This kind of loop is useful when you know you want to run the code at least once. The following example will display “eat” once, even though the condition is false.

    let hungry = false;

do {
    console.log("eat");
} while (hungry);

    This is the general form for a do while-loop:

    do {
    statement;
    statement;
    etc.
} while (condition);

    Task

    Write a do-while loop that will display the numbers 1–10.

    For Loops

    A for-loop will repeat execution of a code block for a specific number of times. The following example displays the numbers 1–10:

    for (let i = 1; i <= 10; i++) {
    console.log(i);
}

    This is the general form of a for-loop:

    for (initial; condition; step) {
    statement;
    statement;
    etc.
}

    Initial is an expression that sets the value of our variable. Condition is an expression that must be true for the statements to execute. And step is an expression that increments the value of our variable.

    One programming pattern is to use a for loop to update the value of a variable with itself and a new value. This example sums the numbers 1–10:

    let x = 0;

for (let i = 1; i <= 10; i++) {
    x += i;
}

console.log(x)    //55

    The += is an assignment operator that adds a value back to a variable. This is a list of all the assignment operators:

    Operator
    		Example
    		Equivalent
    +=x += 2
    		 x = x + 2
    -=x -= 2
    		x = x - 2
    *=x *= 2
    		x = x * 2
    /=x /= 2
    		x = x / 2
    %=x %= 2
    		x = x % 2

    Task 

    Write a for loop that calculates the factorial of a number. The factor of a number n is the product of all the integers from 1 to n. For example, 4! (4 factorial) is 1 x 2 x 3 x 4 which equals 24.

    Arrays

    An array is an object that holds a list of items, called elements, which are accessed by their index. The index is the position of the element in the array. The first element is at the 0 index. The following are some common array operations.

    Create an empty array:

    let arr = [ ];

    Initialize an array with values:

    let arr = [1, 2, "Hello", "World"];

    Get an element from an array:

    let arr = [1, 2, "Hello", "World"];
arr[0]   //1
arr[2]  //"Hello"

    Update an element in an array:

    let arr = [1, 2, "Hello", "World"];
arr[2] = 3;    //[1, 2, 3, "World"]

    Loop over an array:

    let arr = [1, 2, "Hello", "World"];

for (let i = 0; i < arr.length; i++) {
    console.log(arr);
}

    A two-dimensional array is an array whose elements are arrays. Example:

    let arr = [
    [1, 2],
    ["Hello", "World"]
];

console.log(arr[ 0 ][ 1 ]);    //2

    This is how you would loop over the array and display each element:

    for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
        console.log(arr[ i ][ j ]);
    }
}

    Task 

    What element is displayed when i = 1 and j = 0 in the above for loop?

    For-In Loop

    This kind of loop lets us loop through the keys in an object. An object is a data structure that has keys mapped to values. Here are some common operations that can be performed on an object.

    Create an empty object:

    let obj = { };

    Initialize an object with values:

    let obj = {
    foo: "Hello",
    bar: "World"
};

    Get a property from an object:

    let obj = {
    foo: "Hello",
    bar: "World"
};

obj.foo;     //"Hello"
obj["foo"];  //"Hello"

    Update a property in an object:

    let obj = {
    foo: "Hello",
    bar: "World"
};

obj.foo    = "hi"
obj["foo"] = "hi"

    Loop over the keys of an object:

    for (let key in obj) {
    console.log(key);
}

    Task

    What does the above for loop display given obj = {foo: "Hello", bar: "World"}?

    For-Of Loop

    This kind of loop lets us loop over the values of iterable objects. Examples of iterable objects are arrays and strings.

    Loop over an array:

    let arr = ["foo", "bar", "baz"];

for (let elem of arr) {
    console.log(elem);
}

// foo bar baz

    Loop over a string:

    let str = "Hello";

for (let char of str) {
    console.log(char);
}

//'H' 'e' 'l' 'l' 'o'

    Task

    Using any of the loops, write a program that will display this staircase pattern:

    #
  #
    #
      #
        #

    Review

    Loops let us reduce duplication in our code. While loops let us repeat an action until a condition is false. A do-while loop will execute at least once. For loops let us repeat an action until will we reach the end of a count. The for-in loop is designed so we can access the keys in an object. The for-of loop is designed so we can get the value of an iterable object. 

    Next, in part 4, we will learn about functions.

    Resources

    Photo

    martijn broeders

    founder/ strategic creative bij 4elements web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 06 38 55 28 54
    Plaats reactie...
    4elements
    Comments

Per - categorie

    Op - datum

      Copyright © 1999 - 2020 4elements web design en consultancy, Alle rechten voorbehouden / Algemene voorwaarden / Sitemap: XML, HTML, Images, Mobile, News