1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Introduction to JavaScript For Loops

Introduction to JavaScript For Loops

Contents

keyboard_tab
JavaScript For Loops
Introduction to JavaScript For Loops
Overview
Difficulty
Beginner
Duration
6m
Students
55
Ratings
5/5
starstarstarstarstar
Description

This practical course explores JavaScript for loops. A for loop is a way to loop over an iterable in JavaScript. In this course, the learners will gain knowledge on This video explores the use of the traditional for loop statement. This video also explores the use of the for...of and for...in loops.

Learning Objectives

  • Learn what is a for loop
  • Learn how to use the for loop
  • Learn how to use the for...of loop for arrays
  • Learn how to use the for...in loop for objects

Intended Audience

This course is intended for anyone who wants to learn about JavaScript Iteration through the use of for loops.

Prerequisites

Anyone with an interest in using the for loop in JavaScript or who wants to improve their knowledge of JavaScript in general.

Transcript

Introduction to JavaScript for loops. The first loop I will be discussing is the for loop. I will begin by typing for parentheses. And the for loop is divided into three expressions. The first expression is the initialization expression, typically used to initialize a counter variable to track the iterations of the for loop. Now, my plan here is to loop through this letters array, and because arrays are zero index, I will set the counter to zero.

I equal zero, semi-colon. And this is evaluated before the loop begins, and before each time the loop iterates again. Now after the initialization expression is the condition. This conditional is evaluated before each loop iteration. If the condition is true, the loop will proceed. I will set this to I less than six, semi-colon. The reason why I wrote this condition as I less than six is because there are six values in the letters array.

Now, I'm doing this part for demonstration purposes. What I'm doing for this conditional is not considered to be a best practice. After the condition, is the final expression. This will be evaluated at the end of each loop iteration. In this case, I will type I++. I++ is a shortcut operator, which is equal to typing, I equals I plus one. So at the end of each iteration, while the condition is true, I will be increased by the value of one. 

Now the three conditions are done, next is the curly brackets. And inside of the curly brackets is where the statement that is supposed to be executed every time to loop iterates is located at. So inside of here, I will type console log, letters at the index of I. Because of this structure, as the loop iterates, each corresponding element that matches with the value of I should appear in the console. I will execute this, and on the right hand side, each element of the letters array is in the console.

Now, circling back, I'm gonna add the letter G to the letters array. And this leads to a problem. Earlier I mentioned that setting I less six is a bad practice. As your array increases or decreases in size, using a fixed value for the condition could lead to issues. If I were to run this loop again, it would exclude the final element, G. The best practice is to use the array's link. So I will go ahead and replace six with letters.length. 

Length is a built-in JavaScript method that will tell you the length of our array. As the arrays grows or shrinks in size, this value will do so automatically. This allows for the loop to dynamically adjust when the size of the array changes. I will execute this console again, and each value of the array, including the letter G is displayed to the right.

Now, I'm gonna transition into using a different loop. I'm gonna change the inside of the parentheses to const letter of letters. And I'm gonna change the console log to just display letter. And when I execute the for loop, I get the same results as the previous loop, showing all the letters of the letters array. In the console, introduce with ES6, the for of loop will loop through each element of an array and return its value. The for of loop is designed to iterate over iterable objects, such as strings, arrays, array-like objects.

An Iterable object is one that has its iteration behavior defined as part of its creation in the language. And it has a default iteration behavior. Object literals do not have any iteration attached. JavaScript has a for in loop for objects. On the screen I have a user object that I'm going to loop through. I will begin by typing for parentheses and inside of the parentheses, const property in user. And inside of the curly brackets, I will type console log property. I will execute the loop and in the console, each user object property name is displayed to the right.

The for in loop is specifically built for iterating over object properties. Versus other methods to capture object keys, such as the object keys method, for in will also capture inherited properties. Going back to the editor, so in this scenario, how would I access the property values from the user object? Because property is a variable, I have to use square bracket notation. I will wrap property in square brackets and to the left of the opening square bracket, I will type user. I will execute this loop again, and to the right is each property's value in the console. And that's it, thanks for watching Cloud Academy.

About the Author
Students
2985
Labs
20
Courses
48
Learning Paths
6

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics