Git Product home page Git Product logo

javascript-intro-to-looping-v-000's Introduction

JavaScript Loops

Objectives

  • Build a for loop
  • Build a while loop
  • Build a do-while loop
  • Explain the purpose of a loop
  • Explain the difference between each type of loop in JS

About

Loops are used to execute the same block of code a specified number of times. JavaScript loops come in a few different flavors — namely, for, while, and do-while. We'll cover each of these kinds of loop below.

This is a code-along, so follow along with the instructions in each section. There are tests to make sure you're coding your solutions correctly.

Prefatory Note

In order to get the tests to pass, you'll need to have Node.js of at least version 6.0.0 on your system. If you don't know what that means, head to Installing Node below.

The for Loop

Of the loops in JavaScript, the for loop is the most common. The for loop is made up of four statements and has the following structure:

Syntax

for ([initialization]; [condition]; [iteration]) {
  [loopBody]
}
  • initialization
    • An expression (including assignment expressions) or variable declaration. Typically used to initialize a counter variable. This expression may optionally declare new variables with the var keyword
  • Condition
    • An expression evaluated before each loop iteration. If this expression evaluates to true, statement is executed
  • Iteration
    • A statement executed at the end of each iteration. Typically, this will involve incrementing or decrementing a counter and thus bringing the loop ever closer to its end
  • loopBody
    • Code which runs on every iteration as long as condition evaluates to true

Use for loop when you know how many times you want the loop to run (for example, when you have an array of known size)

Example

The code below will print the string "Hello World!" 99 times

// i is set to equal to 1
// as long as i is less than 100 execute the code in the loopBody
// - which is print "Hello World"; increment i each time code in loopBody is executed

for (let i = 1; i < 100; i++) {
  console.log( "Hello World the " + i + " time" );
}

// The above prints:
// Hello World the 1 time
// Hello World the 2 time
// Hello World the 3 time

You'll encounter for loops again when you learn about iterating through object literals.

TODO: Build a function forLoop. It takes an array as an argument. Start counting from 0, and, using a for loop, add a string to the array. But not just any string. If you're i value is 1, add the string "I am 1 strange loop."; but if your i value is anything else, add the string "I am ${i} strange loops." to the array 25 times. (Remember flow control with if and else? And how do we interpolate i?) Then return the array.

HINT: Your for loop could look something like this:

for (let i = 0; i < 25; i++) {
  // ...
}

The while Loop

The while loop similar to an if statement, except that its body will keep executing until the condition evaluates to false. Has the following structure:

Syntax

while ([condition]) {
  [loopBody]
}

A while loop is best used when we don't know how many times your loop needs to run - that is, your condition is dependent on a dynamic function/return value

Example

function maybeTrue() {
  return Math.random() >= 0.5
}

// run until `maybeTrue()` returns `false`
// (so the body of the loop might _never_ run!)
while (maybeTrue()) {
  console.log("And I ran, I ran so far away!");
}

In this example, maybeTrue() returns true 50% of the time, and our loop runs until maybeTrue() returns false. We've used a while loop because we don't have any specific number to count up or down to in our loop — we just want it to run until the condition is no longer met.

But we can also use a while loop in place of a for loop — we just have to remember to change the condition on each pass so that the loop terminates (otherwise it will run forever).

let countdown = 100;

while (countdown > 0) {
  console.log(--countdown)
}

TODO: Create a function called whileLoop in loops.js. The function should take a number as an argument. Using a while loop, count down from the passed in number to 0. Then return the string 'done'.

The Do-While Loop

The do-while loop is almost exactly the same as the while loop, except for the fact that the loop's body is executed at least once before the condition is tested. Has the following structure:

Syntax

do {
  [loopBody];
} while ([condition]);

You will rarely see do-while used since very few situations require a loop that blindly executes at least once. That being said, take a look at the example below:

Example

function maybeTrue() {
  return Math.random() >= 0.5
}

do {
  console.log('doo-bee-doo-bee-doo')
} while (maybeTrue());

Remember how we couldn't be sure with the plain while loop above that the body would run using maybeTrue()? With do, we can be sure that the body will run!

TODO: Define a function called doWhileLoop in loops.js. The function should take an array as an argument. Use the maybeTrue() function (you can copy it from this README) as the condition, and remove elements from the array until the array is empty or until maybeTrue() returns false. (Your condition might look something like array.length > 0 && maybeTrue().) Finally, return the array.

Conclusion

If seeing all of these new loops all at once is freaking you out, take a deep breath. Remember, 98% of the time you will want to use a for loop. A general heuristic for choosing which loop, is try a for. If using for doesn't serve your purposes, then go ahead and try a different loop. Also remember that you can always refer to documentation on these loops at any time. After some time coding in JavaScript, writing a for loop will come as naturally to you as writing an each loop to iterate over an array in Ruby.

Resources

Installing Node

Node.js is JavaScript runtime that operates on the server. It's not important to know exactly what that means, but it's important to know why we're requiring it here. Even though we're learning about browser-based JavaScript, almost all of what we write can run as written on the server. That means that Node.js gives us a way of, e.g., running tests without having to hack together some browser-based testing environment (which would be slow and error prone). Instead, we just pass our code to the Node.js runtime and our tests chug along (and print out handy errors to boot!).

If you're on OS X, you can install Node using Homebrew (brew install node).

If you're using Linux, use your package manager (sudo apt-get node or something like that.)

On Windows, you can install from source or use something like Chocolatey.

Then, once you have a base Node.js installed, you can use a version manager like n or nvm (for Windows) so that you can easily switch between multiple versions. (For this course, and most things you'll encounter afterwards, version 6 or higher will be all you'll need.)

View JavaScript Loops on Learn.co and start learning to code for free.

javascript-intro-to-looping-v-000's People

Contributors

annjohn avatar franknowinski avatar kthffmn avatar pletcher avatar victhevenot avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.