Foundations

Arrays and Loops

Foundations Course

Introduction

One of the challenges of programming is dealing with large amounts of data. For example, if you want to store the names of all the students in your class, how would you do it? You could create a variable for each name, but that would be tedious and inefficient. It’ll also be hard to manage and update. What if you want to change or access the names later?

Luckily, there is a better way to handle this problem. In this lesson, you’ll learn about arrays, which are data structures that can store multiple values in a single variable. Arrays are very useful for organizing and manipulating large amounts of data. You’ll also learn about loops, which are control structures that allow you to execute a block of code repeatedly. Loops are very handy for performing the same operation on each element of an array. Finally, you’ll be introduced to Test-Driven Development (TDD), which is the practice of writing tests for your code before you write the code itself.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

  • Using arrays.
  • Using built-in array methods.
  • Using loops.
  • Getting your hands dirty with TDD exercises.

Arrays

Strings and numbers may be our building blocks, but as your scripts get more complex, you’re going to need a way to deal with large quantities of them. Luckily, JavaScript has a couple of data types that are used for just that. An Array is an ordered collection of items (Strings, numbers, or other things).

  1. Go through JavaScript Arrays from W3Schools.
  2. JavaScript Array Methods covers some of the most useful built-in array methods. These fundamentals are something you’ll use every day, so don’t rush too much and miss out!
  3. This JavaScript Arrays crash course explains an overview of arrays in JavaScript in about 6 minutes.

Loops

Computers don’t get tired, and they’re really, really fast! For that reason, they are well suited to solving problems that involve doing calculations multiple times. In some cases, a computer will be able to repeat a task thousands or even millions of times in just a few short seconds where it might take a human many hours. (Obviously, speed here depends on the complexity of the calculation and the speed of the computer itself). One way to make a computer do a repetitive task is using a loop.

  1. Read MDN’s Looping Code. It’s a longer one, but make sure you tackle the ‘Active Learning’ sections at the bottom of the page.
  2. Once again, same info, slightly different context from JavaScript.info’s “Loops: While and For”. (Skim the info if you think you know it all, but don’t forget the tasks at the end of the page. You learn best by doing.)

Test Driven Development

Test Driven Development (TDD) is a phrase you often hear in the dev world. It refers to the practice of writing automated tests that describe how your code should work before you actually write the code. For example, if you want to write a function that adds a couple of numbers, you would first write a test that uses the function and supplies the expected output. The test will fail before you write your code, and you should be able to know that your code works correctly when the test passes.

In many ways, TDD is much more productive than writing code without tests. If we didn’t have the test for the adding function above, we would have to run the code ourselves over and over, plugging in different numbers until we were sure that it was working… not a big deal for a basic add(2, 2), but imagine having to do that for more complicated functions, like checking whether or not someone has won a game of tic tac toe: (game_win(["o", null,"x",null,"x",null,"x", "o", "o"])). If you didn’t do TDD, then you might actually have to play multiple games against yourself just to test if the function was working correctly!

We will teach you the art of actually writing these tests later in the course. The following practice has the tests already written out for you. All you have to do is set up the testing environment, read the specs, and write the code that makes them pass!

Assignment

  1. Go and review the README of our javascript-exercises repository to set up your local environment. Once you have cloned the repository and installed Jest, review each README file prior to completing the following exercises in order:
    • 01_helloWorld (This exercise is intentionally very beginner friendly to ensure that you have set up everything properly!)
    • 02_repeatString
    • 03_reverseString
    • 04_removeFromArray
    • 05_sumAll
    • 06_leapYears
    • 07_tempConversion

    Note: Solutions for these exercises can be found in the solution folder of each exercise.

Knowledge check

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

  • It looks like this lesson doesn’t have any additional resources yet. Help us expand this section by contributing to our curriculum.

Support us!

The Odin Project is funded by the community. Join us in empowering learners around the globe by supporting The Odin Project!