CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>Looping code - Learn web development | MDN</title><link rel="alternate" title="Code-Schleifen" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/Loops" hrefLang="de"/><link rel="alternate" title="Código de bucle" href="https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Loops" hrefLang="es"/><link rel="alternate" title="Les boucles dans le code" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Scripting/Loops" hrefLang="fr"/><link rel="alternate" title="ループするコード" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Scripting/Loops" hrefLang="ja"/><link rel="alternate" title="반복문" href="https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Scripting/Loops" hrefLang="ko"/><link rel="alternate" title="Código em loop" href="https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Scripting/Loops" hrefLang="pt"/><link rel="alternate" title="Зацикливание кода" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Core/Scripting/Loops" hrefLang="ru"/><link rel="alternate" title="循环吧，代码" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Loops" hrefLang="zh"/><link rel="alternate" title="循環代碼" href="https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Scripting/Loops" hrefLang="zh-Hant"/><link rel="alternate" title="Looping code" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Loops" hrefLang="en"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="Programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete. Here we'll look at the loop structures available in JavaScript that handle such needs."/><meta property="og:url" content="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Loops"/><meta property="og:title" content="Looping code - Learn web development | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="en_US"/><meta property="og:description" content="Programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete. Here we'll look at the loop structures available in JavaScript that handle such needs."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Loops"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-javascript document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/en-US/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/en-US/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/en-US/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/en-US/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/en-US/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/en-US/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/en-US/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/en-US/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/en-US/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/en-US/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/en-US/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/en-US/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/en-US/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/en-US/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/en-US/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/en-US/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/en-US/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/en-US/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/en-US/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/en-US/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FLoops" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FLoops" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Learn</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Learn_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Core learning modules</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Learn_web_development/Core/Scripting" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Dynamic scripting with JavaScript</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Learn_web_development/Core/Scripting/Loops" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Looping code</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>English (US)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/Learn_web_development/Core/Scripting/Loops" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="es" href="/es/docs/Learn_web_development/Core/Scripting/Loops" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Core/Scripting/Loops" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Core/Scripting/Loops" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn_web_development/Core/Scripting/Loops" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn_web_development/Core/Scripting/Loops" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn_web_development/Core/Scripting/Loops" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Core/Scripting/Loops" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn_web_development/Core/Scripting/Loops" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In this article</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#why_are_loops_useful">Why are loops useful?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#looping_through_a_collection">Looping through a collection</a></li><li class="document-toc-item "><a class="document-toc-link" href="#the_standard_for_loop">The standard for loop</a></li><li class="document-toc-item "><a class="document-toc-link" href="#exiting_loops_with_break">Exiting loops with break</a></li><li class="document-toc-item "><a class="document-toc-link" href="#skipping_iterations_with_continue">Skipping iterations with continue</a></li><li class="document-toc-item "><a class="document-toc-link" href="#while_and_do...while">while and do...while</a></li><li class="document-toc-item "><a class="document-toc-link" href="#active_learning_launch_countdown">Active learning: Launch countdown</a></li><li class="document-toc-item "><a class="document-toc-link" href="#active_learning_filling_in_a_guest_list">Active learning: Filling in a guest list</a></li><li class="document-toc-item "><a class="document-toc-link" href="#which_loop_type_should_you_use">Which loop type should you use?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#test_your_skills!">Test your skills!</a></li><li class="document-toc-item "><a class="document-toc-link" href="#summary">Summary</a></li><li class="document-toc-item "><a class="document-toc-link" href="#see_also">See also</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/en-US/docs/Learn_web_development/Getting_started">Getting started modules</a></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup">Environment setup</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">Installing basic software</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">Browsing the web</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">Code editors</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">Dealing with files</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">Command line crash course</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website">Your first website</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">What will your website look like?</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: Creating the content</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: Styling the content</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: Adding interactivity</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">Publishing your website</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards">Web standards</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">How the web works</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">The web standards model</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">How browsers load websites</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills">Soft skills</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">Research and learning</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">Collaboration and teamwork</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">Workflows and processes</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">Succeeding in job interviews</a></li></ol></details></li><li class="section"><a href="/en-US/docs/Learn_web_development/Core">Core modules</a></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Structuring_content">Structuring content with HTML</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">Basic HTML syntax</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">What's in the head? Webpage metadata</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">Headings and paragraphs in HTML</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">Emphasis and importance</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Lists">Lists</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">Structuring documents</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">Advanced text features</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links">Creating links</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">Challenge: Marking up a letter</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">Challenge: Structuring a page of content</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML images</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">HTML video and audio</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Challenge: Mozilla splash page</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">HTML table basics</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">HTML table accessibility</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">Challenge: Structuring a planet data table</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms">Forms and buttons in HTML</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">Debugging HTML</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Styling_basics">CSS styling basics</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">What is CSS?</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started">Getting started with CSS</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">Challenge: Styling a biography page</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Basic CSS selectors</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">Attribute selectors</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudo-classes and pseudo-elements</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators">Combinators</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model">The box model</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Handling conflicts</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS values and units</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing">Sizing items in CSS</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">Backgrounds and borders</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow">Overflowing content</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">Images, media, and form elements</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Tables">Styling tables</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">Debugging CSS</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">Challenge: Fundamental CSS comprehension</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">Challenge: Creating fancy letterheaded paper</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">Challenge: A cool-looking box</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Text_styling">CSS text styling</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals">Fundamental text and font styling</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Styling_lists">Styling lists</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links">Styling links</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts">Web fonts</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">Challenge: Typesetting a community school homepage</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/CSS_layout">CSS layout</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction">Introduction to CSS layout</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Floats">Floats</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning">Positioning</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Grids">CSS grid layout</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsive design</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries">Media query fundamentals</a></li><li><a href="/en-US/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">Challenge: Fundamental layout comprehension</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/en-US/docs/Learn_web_development/Core/Scripting">Dynamic scripting with JavaScript</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">What is JavaScript?</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/A_first_splash">A first splash into JavaScript</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Variables">Storing the information you need — Variables</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Math">Basic math in JavaScript — numbers and operators</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Strings">Handling text — strings in JavaScript</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods">Useful string methods</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Arrays">Arrays</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Silly_story_generator">Challenge: Silly story generator</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Conditionals">Making decisions in your code — conditionals</a></li><li><em><a href="/en-US/docs/Learn_web_development/Core/Scripting/Loops" aria-current="page">Looping code</a></em></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Functions">Functions — reusable blocks of code</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function">Build your own function</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Return_values">Function return values</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Events">Introduction to events</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling">Event bubbling</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Image_gallery">Challenge: Image gallery</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript object basics</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting">DOM scripting introduction</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Network_requests">Making network requests with JavaScript</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/JSON">Working with JSON</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">Debugging JavaScript and handling errors</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript frameworks and libraries</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">Introduction to client-side frameworks</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">Framework main features</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">Getting started with React</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">Beginning our React todo list</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_components">Componentizing our React app</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React interactivity: Events and state</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">Accessibility in React</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React resources</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Core/Accessibility">Accessibility</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">What is accessibility?</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/Tooling">Accessibility tooling and assistive technology</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/HTML">HTML: A good basis for accessibility</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/Multimedia">Accessible multimedia</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/Mobile">Mobile accessibility</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">Challenge: Accessibility troubleshooting</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Core/Design_for_developers">Design for developers</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Version_control">Version control</a></li><li class="section"><a href="/en-US/docs/Learn_web_development/Extensions">Extension modules</a></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">Object prototypes</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">Object-oriented programming</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">Classes in JavaScript</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">Object building practice</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">Challenge: Adding features to our bouncing balls demo</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs">Client-side web APIs</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Introduction to web APIs</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">Video and Audio APIs</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">Drawing graphics</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">Client-side storage</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">Third-party APIs</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS">Asynchronous JavaScript</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing">Introducing asynchronous JavaScript</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises">How to use promises</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">How to implement a promise-based API</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">Introducing workers</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">Challenge: Sequencing animations</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Forms">Web forms</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form">Your first form</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">How to structure a web form</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">Basic native form controls</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">The HTML5 input types</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls">Other form controls</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">Styling web forms</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">Advanced form styling</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI pseudo-classes</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation">Client-side form validation</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">Sending form data</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_tools">Understanding client-side tools</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Client-side tooling overview</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">Package management basics</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">Introducing a complete toolchain</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">Deploying our app</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Server-side">Server-side websites</a></summary><ol><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps">Server-side first steps</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">Introduction to the server side</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">Client-Server Overview</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">Website security</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django">Django web framework (Python)</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Django introduction</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Setting up a Django development environment</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django web application security</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">Assessment: DIY Django mini blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express web framework (Node.js)</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Setting up a Node development environment</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Performance">Web performance</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/why_web_performance">The "why" of web performance</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">What is web performance?</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance">Perceived performance</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/Measuring_performance">Measuring performance</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia">Multimedia: Images</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/video">Multimedia: video</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript performance optimization</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/HTML">HTML performance optimization</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/CSS">CSS performance optimization</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">The business case for web performance</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Extensions/Testing">Testing</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/Introduction">Introduction to cross-browser testing</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies">Strategies for carrying out testing</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection">Implementing feature detection</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing">Introduction to automated testing</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">Setting up your own test automation environment</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Transform_animate">Transform and animate CSS</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Security_privacy">Security and privacy</a></li><li class="section">Further resources</li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Howto">How to solve common problems</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems">Solve common HTML problems</a></li><li><a href="/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems">Solve common CSS problems</a></li><li><a href="/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems">Solve common JavaScript problems</a></li><li><a href="/en-US/docs/Learn_web_development/Howto/Web_mechanics">Web mechanics</a></li><li><a href="/en-US/docs/Learn_web_development/Howto/Tools_and_setup">Tools and setup</a></li><li><a href="/en-US/docs/Learn_web_development/Howto/Design_and_accessibility">Design and accessibility</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/About">About</a></li><li><a href="/en-US/docs/Learn_web_development/Educators">Resources for educators</a></li><li><a href="/en-US/docs/Learn_web_development/Changelog">Changelog</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In this article</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#why_are_loops_useful">Why are loops useful?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#looping_through_a_collection">Looping through a collection</a></li><li class="document-toc-item "><a class="document-toc-link" href="#the_standard_for_loop">The standard for loop</a></li><li class="document-toc-item "><a class="document-toc-link" href="#exiting_loops_with_break">Exiting loops with break</a></li><li class="document-toc-item "><a class="document-toc-link" href="#skipping_iterations_with_continue">Skipping iterations with continue</a></li><li class="document-toc-item "><a class="document-toc-link" href="#while_and_do...while">while and do...while</a></li><li class="document-toc-item "><a class="document-toc-link" href="#active_learning_launch_countdown">Active learning: Launch countdown</a></li><li class="document-toc-item "><a class="document-toc-link" href="#active_learning_filling_in_a_guest_list">Active learning: Filling in a guest list</a></li><li class="document-toc-item "><a class="document-toc-link" href="#which_loop_type_should_you_use">Which loop type should you use?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#test_your_skills!">Test your skills!</a></li><li class="document-toc-item "><a class="document-toc-link" href="#summary">Summary</a></li><li class="document-toc-item "><a class="document-toc-link" href="#see_also">See also</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="en-US"><header><h1>Looping code</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting/Conditionals"><span class="button-wrap"> Previous </span></a></li><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> Overview: Dynamic scripting with JavaScript</span></a></li><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting/Functions"><span class="button-wrap"> Next </span></a></li></ul> <p>Programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete. Here we'll look at the loop structures available in JavaScript that handle such needs.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Prerequisites:</th> <td>An understanding of <a href="/en-US/docs/Learn_web_development/Core/Structuring_content">HTML</a> and the <a href="/en-US/docs/Learn_web_development/Core/Styling_basics">fundamentals of CSS</a>, familiarity with JavaScript basics as covered in previous lessons.</td> </tr> <tr> <th scope="row">Learning outcomes:</th> <td> <ul> <li>Understand the purpose of loops — a code structure that allows you to do something very similar many times without repeating the same code for each iteration.</li> <li>General loop types such as <code>for</code> and <code>while</code>.</li> <li>Looping through collections with constructs like <code>for...of</code> and <code>map()</code>.</li> <li>Breaking out of loops and continuing.</li> </ul> </td> </tr> </tbody> </table></figure></div><section aria-labelledby="why_are_loops_useful"><h2 id="why_are_loops_useful"><a href="#why_are_loops_useful">Why are loops useful?</a></h2><div class="section-content"><p>Loops are all about doing the same thing over and over again. Often, the code will be slightly different each time round the loop, or the same code will run but with different variables.</p></div></section><section aria-labelledby="looping_code_example"><h3 id="looping_code_example"><a href="#looping_code_example">Looping code example</a></h3><div class="section-content"><p>Suppose we wanted to draw 100 random circles on a <a href="/en-US/docs/Web/HTML/Element/canvas"><code><canvas></code></a> element (press the <em>Update</em> button to run the example again and again to see different random sets):</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><button>Update</button> <canvas></canvas> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>html { width: 100%; height: inherit; background: #ddd; } canvas { display: block; } body { margin: 0; } button { position: absolute; top: 5px; left: 5px; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Looping code example sample" id="frame_looping_code_example" width="100%" height="400" src="about:blank" data-live-path="/en-US/docs/Learn_web_development/Core/Scripting/Loops/" data-live-id="looping_code_example" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>Here's the JavaScript code that implements this example:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const btn = document.querySelector("button"); const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); document.addEventListener("DOMContentLoaded", () => { canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight; }); function random(number) { return Math.floor(Math.random() * number); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < 100; i++) { ctx.beginPath(); ctx.fillStyle = "rgb(255 0 0 / 50%)"; ctx.arc( random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI, ); ctx.fill(); } } btn.addEventListener("click", draw); </code></pre></div></div></section><section aria-labelledby="with_and_without_a_loop"><h3 id="with_and_without_a_loop"><a href="#with_and_without_a_loop">With and without a loop</a></h3><div class="section-content"><p>You don't have to understand all the code for now, but let's look at the part of the code that actually draws the 100 circles:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>for (let i = 0; i < 100; i++) { ctx.beginPath(); ctx.fillStyle = "rgb(255 0 0 / 50%)"; ctx.arc( random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI, ); ctx.fill(); } </code></pre></div> <p>You should get the basic idea — we are using a loop to run 100 iterations of this code, each one of which draws a circle in a random position on the page. <code>random(x)</code>, defined earlier in the code, returns a whole number between <code>0</code> and <code>x-1</code>. The amount of code needed would be the same whether we were drawing 100 circles, 1000, or 10,000. Only one number has to change.</p> <p>If we weren't using a loop here, we'd have to repeat the following code for every circle we wanted to draw:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>ctx.beginPath(); ctx.fillStyle = "rgb(255 0 0 / 50%)"; ctx.arc( random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI, ); ctx.fill(); </code></pre></div> <p>This would get very boring and difficult to maintain.</p></div></section><section aria-labelledby="looping_through_a_collection"><h2 id="looping_through_a_collection"><a href="#looping_through_a_collection">Looping through a collection</a></h2><div class="section-content"><p>Most of the time when you use a loop, you will have a collection of items and want to do something with every item.</p> <p>One type of collection is the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a>, which we met in the <a href="/en-US/docs/Learn_web_development/Core/Scripting/Arrays">Arrays</a> chapter of this course. But there are other collections in JavaScript as well, including <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set"><code>Set</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map"><code>Map</code></a>.</p></div></section><section aria-labelledby="the_for...of_loop"><h3 id="the_for...of_loop"><a href="#the_for...of_loop">The for...of loop</a></h3><div class="section-content"><p>The basic tool for looping through a collection is the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a> loop:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"]; for (const cat of cats) { console.log(cat); } </code></pre></div> <p>In this example, <code>for (const cat of cats)</code> says:</p> <ol> <li>Given the collection <code>cats</code>, get the first item in the collection.</li> <li>Assign it to the variable <code>cat</code> and then run the code between the curly braces <code>{}</code>.</li> <li>Get the next item, and repeat (2) until you've reached the end of the collection.</li> </ol></div></section><section aria-labelledby="map_and_filter"><h3 id="map_and_filter"><a href="#map_and_filter">map() and filter()</a></h3><div class="section-content"><p>JavaScript also has more specialized loops for collections, and we'll mention two of them here.</p> <p>You can use <code>map()</code> to do something to each item in a collection and create a new collection containing the changed items:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function toUpper(string) { return string.toUpperCase(); } const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"]; const upperCats = cats.map(toUpper); console.log(upperCats); // [ "LEOPARD", "SERVAL", "JAGUAR", "TIGER", "CARACAL", "LION" ] </code></pre></div> <p>Here we pass a function into <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>cats.map()</code></a>, and <code>map()</code> calls the function once for each item in the array, passing in the item. It then adds the return value from each function call to a new array, and finally returns the new array. In this case the function we provide converts the item to uppercase, so the resulting array contains all our cats in uppercase:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>[ "LEOPARD", "SERVAL", "JAGUAR", "TIGER", "CARACAL", "LION" ] </code></pre></div> <p>You can use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter"><code>filter()</code></a> to test each item in a collection, and create a new collection containing only items that match:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function lCat(cat) { return cat.startsWith("L"); } const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"]; const filtered = cats.filter(lCat); console.log(filtered); // [ "Leopard", "Lion" ] </code></pre></div> <p>This looks a lot like <code>map()</code>, except the function we pass in returns a <a href="/en-US/docs/Learn_web_development/Core/Scripting/Variables#booleans">boolean</a>: if it returns <code>true</code>, then the item is included in the new array. Our function tests that the item starts with the letter "L", so the result is an array containing only cats whose names start with "L":</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>[ "Leopard", "Lion" ] </code></pre></div> <p>Note that <code>map()</code> and <code>filter()</code> are both often used with <em>function expressions</em>, which you will learn about in our <a href="/en-US/docs/Learn_web_development/Core/Scripting/Functions">Functions</a> lesson. Using function expressions we could rewrite the example above to be much more compact:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"]; const filtered = cats.filter((cat) => cat.startsWith("L")); console.log(filtered); // [ "Leopard", "Lion" ] </code></pre></div></div></section><section aria-labelledby="the_standard_for_loop"><h2 id="the_standard_for_loop"><a href="#the_standard_for_loop">The standard for loop</a></h2><div class="section-content"><p>In the "drawing circles" example above, you don't have a collection of items to loop through: you really just want to run the same code 100 times. In a case like that, you can use the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code></a> loop. This has the following syntax:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>for (initializer; condition; final-expression) { // code to run } </code></pre></div> <p>Here we have:</p> <ol> <li> <p>The keyword <code>for</code>, followed by some parentheses.</p> </li> <li> <p>Inside the parentheses we have three items, separated by semicolons:</p> <ol> <li>An <strong>initializer</strong> — this is usually a variable set to a number, which is incremented to count the number of times the loop has run. It is also sometimes referred to as a <strong>counter variable</strong>.</li> <li>A <strong>condition</strong> — this defines when the loop should stop looping. This is generally an expression featuring a comparison operator, a test to see if the exit condition has been met.</li> <li>A <strong>final-expression</strong> — this is always evaluated (or run) each time the loop has gone through a full iteration. It usually serves to increment (or in some cases decrement) the counter variable, to bring it closer to the point where the condition is no longer <code>true</code>.</li> </ol> </li> <li> <p>Some curly braces that contain a block of code — this code will be run each time the loop iterates.</p> </li> </ol></div></section><section aria-labelledby="calculating_squares"><h3 id="calculating_squares"><a href="#calculating_squares">Calculating squares</a></h3><div class="section-content"><p>Let's look at a real example so we can visualize what these do more clearly.</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><button id="calculate">Calculate</button> <button id="clear">Clear</button> <pre id="results"></pre> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const results = document.querySelector("#results"); function calculate() { for (let i = 1; i < 10; i++) { const newResult = `${i} x ${i} = ${i * i}`; results.textContent += `${newResult}\n`; } results.textContent += "\nFinished!\n\n"; } const calculateBtn = document.querySelector("#calculate"); const clearBtn = document.querySelector("#clear"); calculateBtn.addEventListener("click", calculate); clearBtn.addEventListener("click", () => (results.textContent = "")); </code></pre></div> <p>This gives us the following output:</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Calculating squares sample" id="frame_calculating_squares" width="100%" height="250" src="about:blank" data-live-path="/en-US/docs/Learn_web_development/Core/Scripting/Loops/" data-live-id="calculating_squares" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>This code calculates squares for the numbers from 1 to 9, and writes out the result. The core of the code is the <code>for</code> loop that performs the calculation.</p> <p>Let's break down the <code>for (let i = 1; i < 10; i++)</code> line into its three pieces:</p> <ol> <li><code>let i = 1</code>: the counter variable, <code>i</code>, starts at <code>1</code>. Note that we have to use <code>let</code> for the counter, because we're reassigning it each time we go round the loop.</li> <li><code>i < 10</code>: keep going round the loop for as long as <code>i</code> is smaller than <code>10</code>.</li> <li><code>i++</code>: add one to <code>i</code> each time round the loop.</li> </ol> <p>Inside the loop, we calculate the square of the current value of <code>i</code>, that is: <code>i * i</code>. We create a string expressing the calculation we made and the result, and add this string to the output text. We also add <code>\n</code>, so the next string we add will begin on a new line. So:</p> <ol> <li>During the first run, <code>i = 1</code>, so we will add <code>1 x 1 = 1</code>.</li> <li>During the second run, <code>i = 2</code>, so we will add <code>2 x 2 = 4</code>.</li> <li>And so on…</li> <li>When <code>i</code> becomes equal to <code>10</code> we will stop running the loop and move straight to the next bit of code below the loop, printing out the <code>Finished!</code> message on a new line.</li> </ol></div></section><section aria-labelledby="looping_through_collections_with_a_for_loop"><h3 id="looping_through_collections_with_a_for_loop"><a href="#looping_through_collections_with_a_for_loop">Looping through collections with a for loop</a></h3><div class="section-content"><p>You can use a <code>for</code> loop to iterate through a collection, instead of a <code>for...of</code> loop.</p> <p>Let's look again at our <code>for...of</code> example above:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"]; for (const cat of cats) { console.log(cat); } </code></pre></div> <p>We could rewrite that code like this:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"]; for (let i = 0; i < cats.length; i++) { console.log(cats[i]); } </code></pre></div> <p>In this loop we're starting <code>i</code> at <code>0</code>, and stopping when <code>i</code> reaches the length of the array. Then inside the loop, we're using <code>i</code> to access each item in the array in turn.</p> <p>This works just fine, and in early versions of JavaScript, <code>for...of</code> didn't exist, so this was the standard way to iterate through an array. However, it offers more chances to introduce bugs into your code. For example:</p> <ul> <li>you might start <code>i</code> at <code>1</code>, forgetting that the first array index is zero, not 1.</li> <li>you might stop at <code>i <= cats.length</code>, forgetting that the last array index is at <code>length - 1</code>.</li> </ul> <p>For reasons like this, it's usually best to use <code>for...of</code> if you can.</p> <p>Sometimes you still need to use a <code>for</code> loop to iterate through an array. For example, in the code below we want to log a message listing our cats:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const cats = ["Pete", "Biggles", "Jasmine"]; let myFavoriteCats = "My cats are called "; for (const cat of cats) { myFavoriteCats += `${cat}, `; } console.log(myFavoriteCats); // "My cats are called Pete, Biggles, Jasmine, " </code></pre></div> <p>The final output sentence isn't very well-formed:</p> <pre class="brush: plain notranslate">My cats are called Pete, Biggles, Jasmine, </pre> <p>We'd prefer it to handle the last cat differently, like this:</p> <pre class="brush: plain notranslate">My cats are called Pete, Biggles, and Jasmine. </pre> <p>But to do this we need to know when we are on the final loop iteration, and to do that we can use a <code>for</code> loop and examine the value of <code>i</code>:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const cats = ["Pete", "Biggles", "Jasmine"]; let myFavoriteCats = "My cats are called "; for (let i = 0; i < cats.length; i++) { if (i === cats.length - 1) { // We are at the end of the array myFavoriteCats += `and ${cats[i]}.`; } else { myFavoriteCats += `${cats[i]}, `; } } console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine." </code></pre></div></div></section><section aria-labelledby="exiting_loops_with_break"><h2 id="exiting_loops_with_break"><a href="#exiting_loops_with_break">Exiting loops with break</a></h2><div class="section-content"><p>If you want to exit a loop before all the iterations have been completed, you can use the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> statement. We already met this in the previous article when we looked at <a href="/en-US/docs/Learn_web_development/Core/Scripting/Conditionals#switch_statements">switch statements</a> — when a case is met in a switch statement that matches the input expression, the <code>break</code> statement immediately exits the switch statement and moves on to the code after it.</p> <p>It's the same with loops — a <code>break</code> statement will immediately exit the loop and make the browser move on to any code that follows it.</p> <p>Say we wanted to search through an array of contacts and telephone numbers and return just the number we wanted to find? First, some simple HTML — a text <a href="/en-US/docs/Web/HTML/Element/input"><code><input></code></a> allowing us to enter a name to search for, a <a href="/en-US/docs/Web/HTML/Element/button"><code><button></code></a> element to submit a search, and a <a href="/en-US/docs/Web/HTML/Element/p"><code><p></code></a> element to display the results in:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><label for="search">Search by contact name: </label> <input id="search" type="text" /> <button>Search</button> <p></p> </code></pre></div> <p>Now on to the JavaScript:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const contacts = [ "Chris:2232322", "Sarah:3453456", "Bill:7654322", "Mary:9998769", "Dianne:9384975", ]; const para = document.querySelector("p"); const input = document.querySelector("input"); const btn = document.querySelector("button"); btn.addEventListener("click", () => { const searchName = input.value.toLowerCase(); input.value = ""; input.focus(); para.textContent = ""; for (const contact of contacts) { const splitContact = contact.split(":"); if (splitContact[0].toLowerCase() === searchName) { para.textContent = `${splitContact[0]}'s number is ${splitContact[1]}.`; break; } } if (para.textContent === "") { para.textContent = "Contact not found."; } }); </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Exiting loops with break sample" id="frame_exiting_loops_with_break" width="100%" height="100" src="about:blank" data-live-path="/en-US/docs/Learn_web_development/Core/Scripting/Loops/" data-live-id="exiting_loops_with_break" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <ol> <li> <p>First of all, we have some variable definitions — we have an array of contact information, with each item being a string containing a name and phone number separated by a colon.</p> </li> <li> <p>Next, we attach an event listener to the button (<code>btn</code>) so that when it is pressed some code is run to perform the search and return the results.</p> </li> <li> <p>We store the value entered into the text input in a variable called <code>searchName</code>, before then emptying the text input and focusing it again, ready for the next search. Note that we also run the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase"><code>toLowerCase()</code></a> method on the string, so that searches will be case-insensitive.</p> </li> <li> <p>Now on to the interesting part, the <code>for...of</code> loop:</p> <ol> <li>Inside the loop, we first split the current contact at the colon character, and store the resulting two values in an array called <code>splitContact</code>.</li> <li>We then use a conditional statement to test whether <code>splitContact[0]</code> (the contact's name, again lower-cased with <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase"><code>toLowerCase()</code></a>) is equal to the inputted <code>searchName</code>. If it is, we enter a string into the paragraph to report what the contact's number is, and use <code>break</code> to end the loop.</li> </ol> </li> <li> <p>After the loop, we check whether we set a contact, and if not we set the paragraph text to "Contact not found.".</p> </li> </ol> <div class="notecard note"> <p><strong>Note:</strong> You can view the <a href="https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/contact-search.html" class="external" target="_blank">full source code on GitHub</a> too (also <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html" class="external" target="_blank">see it running live</a>).</p> </div></div></section><section aria-labelledby="skipping_iterations_with_continue"><h2 id="skipping_iterations_with_continue"><a href="#skipping_iterations_with_continue">Skipping iterations with continue</a></h2><div class="section-content"><p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> statement works similarly to <code>break</code>, but instead of breaking out of the loop entirely, it skips to the next iteration of the loop. Let's look at another example that takes a number as an input, and returns only the numbers that are squares of integers (whole numbers).</p> <p>The HTML is basically the same as the last example — a simple numeric input, and a paragraph for output.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><label for="number">Enter number: </label> <input id="number" type="number" /> <button>Generate integer squares</button> <p>Output:</p> </code></pre></div> <p>The JavaScript is mostly the same too, although the loop itself is a bit different:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const para = document.querySelector("p"); const input = document.querySelector("input"); const btn = document.querySelector("button"); btn.addEventListener("click", () => { para.textContent = "Output: "; const num = input.value; input.value = ""; input.focus(); for (let i = 1; i <= num; i++) { let sqRoot = Math.sqrt(i); if (Math.floor(sqRoot) !== sqRoot) { continue; } para.textContent += `${i} `; } }); </code></pre></div> <p>Here's the output:</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Skipping iterations with continue sample" id="frame_skipping_iterations_with_continue" width="100%" height="100" src="about:blank" data-live-path="/en-US/docs/Learn_web_development/Core/Scripting/Loops/" data-live-id="skipping_iterations_with_continue" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <ol> <li>In this case, the input should be a number (<code>num</code>). The <code>for</code> loop is given a counter starting at 1 (as we are not interested in 0 in this case), an exit condition that says the loop will stop when the counter becomes bigger than the input <code>num</code>, and an iterator that adds 1 to the counter each time.</li> <li>Inside the loop, we find the square root of each number using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt"><code>Math.sqrt(i)</code></a>, then check whether the square root is an integer by testing whether it is the same as itself when it has been rounded down to the nearest integer (this is what <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor"><code>Math.floor()</code></a> does to the number it is passed).</li> <li>If the square root and the rounded down square root do not equal one another (<code>!==</code>), it means that the square root is not an integer, so we are not interested in it. In such a case, we use the <code>continue</code> statement to skip on to the next loop iteration without recording the number anywhere.</li> <li>If the square root is an integer, we skip past the <code>if</code> block entirely, so the <code>continue</code> statement is not executed; instead, we concatenate the current <code>i</code> value plus a space at the end of the paragraph content.</li> </ol> <div class="notecard note"> <p><strong>Note:</strong> You can view the <a href="https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/integer-squares.html" class="external" target="_blank">full source code on GitHub</a> too (also <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html" class="external" target="_blank">see it running live</a>).</p> </div></div></section><section aria-labelledby="while_and_do...while"><h2 id="while_and_do...while"><a href="#while_and_do...while">while and do...while</a></h2><div class="section-content"><p><code>for</code> is not the only type of general loop available in JavaScript. There are actually many others and, while you don't need to understand all of these now, it is worth having a look at the structure of a couple of others so that you can recognize the same features at work in a slightly different way.</p> <p>First, let's have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/while"><code>while</code></a> loop. This loop's syntax looks like so:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>initializer while (condition) { // code to run final-expression } </code></pre></div> <p>This works in a very similar way to the <code>for</code> loop, except that the initializer variable is set before the loop, and the final-expression is included inside the loop after the code to run, rather than these two items being included inside the parentheses. The condition is included inside the parentheses, which are preceded by the <code>while</code> keyword rather than <code>for</code>.</p> <p>The same three items are still present, and they are still defined in the same order as they are in the for loop. This is because you must have an initializer defined before you can check whether or not the condition is true. The final-expression is then run after the code inside the loop has run (an iteration has been completed), which will only happen if the condition is still true.</p> <p>Let's have a look again at our cats list example, but rewritten to use a while loop:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const cats = ["Pete", "Biggles", "Jasmine"]; let myFavoriteCats = "My cats are called "; let i = 0; while (i < cats.length) { if (i === cats.length - 1) { myFavoriteCats += `and ${cats[i]}.`; } else { myFavoriteCats += `${cats[i]}, `; } i++; } console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine." </code></pre></div> <div class="notecard note"> <p><strong>Note:</strong> This still works just the same as expected — have a look at it <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html" class="external" target="_blank">running live on GitHub</a> (also view the <a href="https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/while.html" class="external" target="_blank">full source code</a>).</p> </div> <p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a> loop is very similar, but provides a variation on the while structure:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>initializer do { // code to run final-expression } while (condition) </code></pre></div> <p>In this case, the initializer again comes first, before the loop starts. The keyword directly precedes the curly braces containing the code to run and the final expression.</p> <p>The main difference between a <code>do...while</code> loop and a <code>while</code> loop is that <em>the code inside a <code>do...while</code> loop is always executed at least once</em>. That's because the condition comes after the code inside the loop. So we always run that code, then check to see if we need to run it again. In <code>while</code> and <code>for</code> loops, the check comes first, so the code might never be executed.</p> <p>Let's rewrite our cat listing example again to use a <code>do...while</code> loop:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const cats = ["Pete", "Biggles", "Jasmine"]; let myFavoriteCats = "My cats are called "; let i = 0; do { if (i === cats.length - 1) { myFavoriteCats += `and ${cats[i]}.`; } else { myFavoriteCats += `${cats[i]}, `; } i++; } while (i < cats.length); console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine." </code></pre></div> <div class="notecard note"> <p><strong>Note:</strong> Again, this works just the same as expected — have a look at it <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html" class="external" target="_blank">running live on GitHub</a> (also view the <a href="https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html" class="external" target="_blank">full source code</a>).</p> </div> <div class="notecard warning"> <p><strong>Warning:</strong> With any kind of loop, you must make sure that the initializer is incremented or, depending on the case, decremented, so the condition eventually becomes false. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an <strong>infinite loop</strong>.</p> </div></div></section><section aria-labelledby="active_learning_launch_countdown"><h2 id="active_learning_launch_countdown"><a href="#active_learning_launch_countdown">Active learning: Launch countdown</a></h2><div class="section-content"><p>In this exercise, we want you to print out a simple launch countdown to the output box, from 10 down to Blastoff. Specifically, we want you to:</p> <ul> <li> <p>Loop from 10 down to 0. We've provided you with an initializer — <code>let i = 10;</code>.</p> </li> <li> <p>For each iteration, create a new paragraph and append it to the output <code><div></code>, which we've selected using <code>const output = document.querySelector('.output');</code>. In comments, we've provided you with three code lines that need to be used somewhere inside the loop:</p> <ul> <li><code>const para = document.createElement('p');</code> — creates a new paragraph.</li> <li><code>output.appendChild(para);</code> — appends the paragraph to the output <code><div></code>.</li> <li><code>para.textContent =</code> — makes the text inside the paragraph equal to whatever you put on the right-hand side, after the equals sign.</li> </ul> </li> <li> <p>Different iteration numbers require different text to be put in the paragraph for that iteration (you'll need a conditional statement and multiple <code>para.textContent =</code> lines):</p> <ul> <li>If the number is 10, print "Countdown 10" to the paragraph.</li> <li>If the number is 0, print "Blast off!" to the paragraph.</li> <li>For any other number, print just the number to the paragraph.</li> </ul> </li> <li> <p>Remember to include an iterator! However, in this example we are counting down after each iteration, not up, so you <strong>don't</strong> want <code>i++</code> — how do you iterate downwards?</p> </li> </ul> <div class="notecard note"> <p><strong>Note:</strong> If you start typing the loop (for example (while(i>=0)), the browser might get stuck because you have not yet entered the end condition. So be careful with this. You can start writing your code in a comment to deal with this issue and remove the comment after you finish.</p> </div> <p>If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><h2>Live output</h2> <div class="output" style="height: 410px;overflow: auto;"></div> <h2>Editable code</h2> <p class="a11y-label"> Press Esc to move focus away from the code area (Tab inserts a tab character). </p> <textarea id="code" class="playable-code" style="height: 300px;width: 95%"> const output = document.querySelector('.output'); output.textContent = ""; // let i = 10; // const para = document.createElement('p'); // para.textContent = ; // output.appendChild(para); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="Reset" /> <input id="solution" type="button" value="Show solution" /> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } </code></pre></div> <div class="code-example"><pre class="brush: js hidden notranslate"><code>const textarea = document.getElementById("code"); const reset = document.getElementById("reset"); const solution = document.getElementById("solution"); let code = textarea.value; let userEntry = textarea.value; function updateCode() { eval(textarea.value); } reset.addEventListener("click", function () { textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; solution.value = "Show solution"; updateCode(); }); solution.addEventListener("click", function () { if (solution.value === "Show solution") { textarea.value = solutionEntry; solution.value = "Hide solution"; } else { textarea.value = userEntry; solution.value = "Show solution"; } updateCode(); }); let jsSolution = `const output = document.querySelector('.output'); output.textContent = ""; let i = 10; while (i >= 0) { const para = document.createElement('p'); if (i === 10) { para.textContent = \`Countdown \${i}\`; } else if (i === 0) { para.textContent = 'Blast off!'; } else { para.textContent = i; } output.appendChild(para); i--; }`; let solutionEntry = jsSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e) { if (e.code === "Tab") { e.preventDefault(); insertAtCaret("\t"); } if (e.code === "Escape") { textarea.blur(); } }; function insertAtCaret(text) { const scrollPos = textarea.scrollTop; let caretPos = textarea.selectionStart; const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } // Update the saved userCode every time the user updates the text area code textarea.onkeyup = () => { // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Show solution") { userEntry = textarea.value; } else { solutionEntry = textarea.value; } updateCode(); }; </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Active learning Launch countdown sample" id="frame_active_learning_launch_countdown" width="100%" height="900" src="about:blank" data-live-path="/en-US/docs/Learn_web_development/Core/Scripting/Loops/" data-live-id="active_learning_launch_countdown" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="active_learning_filling_in_a_guest_list"><h2 id="active_learning_filling_in_a_guest_list"><a href="#active_learning_filling_in_a_guest_list">Active learning: Filling in a guest list</a></h2><div class="section-content"><p>In this exercise, we want you to take a list of names stored in an array and put them into a guest list. But it's not quite that easy — we don't want to let Phil and Lola in because they are greedy and rude, and always eat all the food! We have two lists, one for guests to admit, and one for guests to refuse.</p> <p>Specifically, we want you to:</p> <ul> <li> <p>Write a loop that will iterate through the <code>people</code> array.</p> </li> <li> <p>During each loop iteration, check if the current array item is equal to "Phil" or "Lola" using a conditional statement:</p> <ul> <li>If it is, concatenate the array item to the end of the <code>refused</code> paragraph's <code>textContent</code>, followed by a comma and a space.</li> <li>If it isn't, concatenate the array item to the end of the <code>admitted</code> paragraph's <code>textContent</code>, followed by a comma and a space.</li> </ul> </li> </ul> <p>We've already provided you with:</p> <ul> <li><code>refused.textContent +=</code> — the beginnings of a line that will concatenate something at the end of <code>refused.textContent</code>.</li> <li><code>admitted.textContent +=</code> — the beginnings of a line that will concatenate something at the end of <code>admitted.textContent</code>.</li> </ul> <p>Extra bonus question — after completing the above tasks successfully, you will be left with two lists of names, separated by commas, but they will be untidy — there will be a comma at the end of each one. Can you work out how to write lines that slice the last comma off in each case, and add a full stop to the end? Have a look at the <a href="/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods">Useful string methods</a> article for help.</p> <p>If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><h2>Live output</h2> <div class="output" style="height: 100px;overflow: auto;"> <p class="admitted">Admit:</p> <p class="refused">Refuse:</p> </div> <h2>Editable code</h2> <p class="a11y-label"> Press Esc to move focus away from the code area (Tab inserts a tab character). </p> <textarea id="code" class="playable-code" style="height: 400px;width: 95%"> const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce']; const admitted = document.querySelector('.admitted'); const refused = document.querySelector('.refused'); admitted.textContent = 'Admit: '; refused.textContent = 'Refuse: '; // loop starts here // refused.textContent += ; // admitted.textContent += ; </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="Reset" /> <input id="solution" type="button" value="Show solution" /> </div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } </code></pre></div> <div class="code-example"><pre class="brush: js hidden notranslate"><code>const textarea = document.getElementById("code"); const reset = document.getElementById("reset"); const solution = document.getElementById("solution"); let code = textarea.value; let userEntry = textarea.value; function updateCode() { eval(textarea.value); } reset.addEventListener("click", function () { textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; solution.value = "Show solution"; updateCode(); }); solution.addEventListener("click", function () { if (solution.value === "Show solution") { textarea.value = solutionEntry; solution.value = "Hide solution"; } else { textarea.value = userEntry; solution.value = "Show solution"; } updateCode(); }); const jsSolution = ` const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce']; const admitted = document.querySelector('.admitted'); const refused = document.querySelector('.refused'); admitted.textContent = 'Admit: '; refused.textContent = 'Refuse: '; for (const person of people) { if (person === 'Phil' || person === 'Lola') { refused.textContent += \`\${person}, \`; } else { admitted.textContent += \`\${person}, \`; } } refused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + '.'; admitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + '.';`; let solutionEntry = jsSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e) { if (e.code === "Tab") { e.preventDefault(); insertAtCaret("\t"); } if (e.code === "Escape") { textarea.blur(); } }; function insertAtCaret(text) { const scrollPos = textarea.scrollTop; let caretPos = textarea.selectionStart; const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } // Update the saved userCode every time the user updates the text area code textarea.onkeyup = () => { // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Show solution") { userEntry = textarea.value; } else { solutionEntry = textarea.value; } updateCode(); }; </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Active learning Filling in a guest list sample" id="frame_active_learning_filling_in_a_guest_list" width="100%" height="680" src="about:blank" data-live-path="/en-US/docs/Learn_web_development/Core/Scripting/Loops/" data-live-id="active_learning_filling_in_a_guest_list" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="which_loop_type_should_you_use"><h2 id="which_loop_type_should_you_use"><a href="#which_loop_type_should_you_use">Which loop type should you use?</a></h2><div class="section-content"><p>If you're iterating through an array or some other object that supports it, and don't need access to the index position of each item, then <code>for...of</code> is the best choice. It's easier to read and there's less to go wrong.</p> <p>For other uses, <code>for</code>, <code>while</code>, and <code>do...while</code> loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. We would recommend <code>for</code>, at least to begin with, as it is probably the easiest for remembering everything — the initializer, condition, and final-expression all have to go neatly into the parentheses, so it is easy to see where they are and check that you aren't missing them.</p> <p>Let's have a look at them all again.</p> <p>First <code>for...of</code>:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>for (const item of array) { // code to run } </code></pre></div> <p><code>for</code>:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>for (initializer; condition; final-expression) { // code to run } </code></pre></div> <p><code>while</code>:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>initializer while (condition) { // code to run final-expression } </code></pre></div> <p>and finally <code>do...while</code>:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>initializer do { // code to run final-expression } while (condition) </code></pre></div> <div class="notecard note"> <p><strong>Note:</strong> There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration guide</a>.</p> </div></div></section><section aria-labelledby="test_your_skills!"><h2 id="test_your_skills!"><a href="#test_your_skills!">Test your skills!</a></h2><div class="section-content"><p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills:_Loops">Test your skills: Loops</a>.</p></div></section><section aria-labelledby="summary"><h2 id="summary"><a href="#summary">Summary</a></h2><div class="section-content"><p>This article has revealed to you the basic concepts behind, and different options available when looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code and raring to use them in your own examples!</p> <p>Next up, we'll look at functions.</p></div></section><section aria-labelledby="see_also"><h2 id="see_also"><a href="#see_also">See also</a></h2><div class="section-content"><ul> <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration in detail</a></li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of reference</a></li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for statement reference</a></li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> references</li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> references</li> </ul> <ul class="prev-next"><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting/Conditionals"><span class="button-wrap"> Previous </span></a></li><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> Overview: Dynamic scripting with JavaScript</span></a></li><li><a class="button secondary" href="/en-US/docs/Learn_web_development/Core/Scripting/Functions"><span class="button-wrap"> Next </span></a></li></ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-12-19T15:37:45.000Z">Dec 19, 2024</time> by <a href="/en-US/docs/Learn_web_development/Core/Scripting/Loops/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/scripting/loops/index.md?plain=1" title="Folder: en-us/learn_web_development/core/scripting/loops (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FLoops&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fscripting%2Floops%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FLoops%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fscripting%2Floops%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F5b20f5f4265f988f80f513db0e4b35c7e0cd70dc%0A*+Document+last+modified%3A+2024-12-19T15%3A37%3A45.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/en-US/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/en-US/docs/Learn_web_development/Core/Scripting/Loops","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Conditionals\"><span class=\"button-wrap\"> Previous </span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Overview: Dynamic scripting with JavaScript</span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Functions\"><span class=\"button-wrap\"> Next </span></a></li></ul>\n<p>Programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete. Here we'll look at the loop structures available in JavaScript that handle such needs.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Prerequisites:</th>\n <td>An understanding of <a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content\">HTML</a> and the <a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics\">fundamentals of CSS</a>, familiarity with JavaScript basics as covered in previous lessons.</td>\n </tr>\n <tr>\n <th scope=\"row\">Learning outcomes:</th>\n <td>\n <ul>\n <li>Understand the purpose of loops — a code structure that allows you to do something very similar many times without repeating the same code for each iteration.</li>\n <li>General loop types such as <code>for</code> and <code>while</code>.</li>\n <li>Looping through collections with constructs like <code>for...of</code> and <code>map()</code>.</li>\n <li>Breaking out of loops and continuing.</li>\n </ul>\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"why_are_loops_useful","title":"Why are loops useful?","isH3":false,"content":"<p>Loops are all about doing the same thing over and over again. Often, the code will be slightly different each time round the loop, or the same code will run but with different variables.</p>"}},{"type":"prose","value":{"id":"looping_code_example","title":"Looping code example","isH3":true,"content":"<p>Suppose we wanted to draw 100 random circles on a <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code><canvas></code></a> element (press the <em>Update</em> button to run the example again and again to see different random sets):</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><button>Update</button> <canvas></canvas>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>html {\n width: 100%;\n height: inherit;\n background: #ddd;\n}\n\ncanvas {\n display: block;\n}\n\nbody {\n margin: 0;\n}\n\nbutton {\n position: absolute;\n top: 5px;\n left: 5px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Looping code example sample\" id=\"frame_looping_code_example\" width=\"100%\" height=\"400\" src=\"about:blank\" data-live-path=\"/en-US/docs/Learn_web_development/Core/Scripting/Loops/\" data-live-id=\"looping_code_example\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>Here's the JavaScript code that implements this example:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const btn = document.querySelector(\"button\");\nconst canvas = document.querySelector(\"canvas\");\nconst ctx = canvas.getContext(\"2d\");\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n canvas.width = document.documentElement.clientWidth;\n canvas.height = document.documentElement.clientHeight;\n});\n\nfunction random(number) {\n return Math.floor(Math.random() * number);\n}\n\nfunction draw() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n for (let i = 0; i < 100; i++) {\n ctx.beginPath();\n ctx.fillStyle = \"rgb(255 0 0 / 50%)\";\n ctx.arc(\n random(canvas.width),\n random(canvas.height),\n random(50),\n 0,\n 2 * Math.PI,\n );\n ctx.fill();\n }\n}\n\nbtn.addEventListener(\"click\", draw);\n</code></pre></div>"}},{"type":"prose","value":{"id":"with_and_without_a_loop","title":"With and without a loop","isH3":true,"content":"<p>You don't have to understand all the code for now, but let's look at the part of the code that actually draws the 100 circles:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>for (let i = 0; i < 100; i++) {\n ctx.beginPath();\n ctx.fillStyle = \"rgb(255 0 0 / 50%)\";\n ctx.arc(\n random(canvas.width),\n random(canvas.height),\n random(50),\n 0,\n 2 * Math.PI,\n );\n ctx.fill();\n}\n</code></pre></div>\n<p>You should get the basic idea — we are using a loop to run 100 iterations of this code, each one of which draws a circle in a random position on the page. <code>random(x)</code>, defined earlier in the code, returns a whole number between <code>0</code> and <code>x-1</code>.\nThe amount of code needed would be the same whether we were drawing 100 circles, 1000, or 10,000.\nOnly one number has to change.</p>\n<p>If we weren't using a loop here, we'd have to repeat the following code for every circle we wanted to draw:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>ctx.beginPath();\nctx.fillStyle = \"rgb(255 0 0 / 50%)\";\nctx.arc(\n random(canvas.width),\n random(canvas.height),\n random(50),\n 0,\n 2 * Math.PI,\n);\nctx.fill();\n</code></pre></div>\n<p>This would get very boring and difficult to maintain.</p>"}},{"type":"prose","value":{"id":"looping_through_a_collection","title":"Looping through a collection","isH3":false,"content":"<p>Most of the time when you use a loop, you will have a collection of items and want to do something with every item.</p>\n<p>One type of collection is the <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array\"><code>Array</code></a>, which we met in the <a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a> chapter of this course.\nBut there are other collections in JavaScript as well, including <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\"><code>Set</code></a> and <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\"><code>Map</code></a>.</p>"}},{"type":"prose","value":{"id":"the_for...of_loop","title":"The for...of loop","isH3":true,"content":"<p>The basic tool for looping through a collection is the <a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/for...of\"><code>for...of</code></a> loop:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const cats = [\"Leopard\", \"Serval\", \"Jaguar\", \"Tiger\", \"Caracal\", \"Lion\"];\n\nfor (const cat of cats) {\n console.log(cat);\n}\n</code></pre></div>\n<p>In this example, <code>for (const cat of cats)</code> says:</p>\n<ol>\n<li>Given the collection <code>cats</code>, get the first item in the collection.</li>\n<li>Assign it to the variable <code>cat</code> and then run the code between the curly braces <code>{}</code>.</li>\n<li>Get the next item, and repeat (2) until you've reached the end of the collection.</li>\n</ol>"}},{"type":"prose","value":{"id":"map_and_filter","title":"map() and filter()","isH3":true,"content":"<p>JavaScript also has more specialized loops for collections, and we'll mention two of them here.</p>\n<p>You can use <code>map()</code> to do something to each item in a collection and create a new collection containing the changed items:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function toUpper(string) {\n return string.toUpperCase();\n}\n\nconst cats = [\"Leopard\", \"Serval\", \"Jaguar\", \"Tiger\", \"Caracal\", \"Lion\"];\n\nconst upperCats = cats.map(toUpper);\n\nconsole.log(upperCats);\n// [ \"LEOPARD\", \"SERVAL\", \"JAGUAR\", \"TIGER\", \"CARACAL\", \"LION\" ]\n</code></pre></div>\n<p>Here we pass a function into <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\"><code>cats.map()</code></a>, and <code>map()</code> calls the function once for each item in the array, passing in the item. It then adds the return value from each function call to a new array, and finally returns the new array. In this case the function we provide converts the item to uppercase, so the resulting array contains all our cats in uppercase:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>[ \"LEOPARD\", \"SERVAL\", \"JAGUAR\", \"TIGER\", \"CARACAL\", \"LION\" ]\n</code></pre></div>\n<p>You can use <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\"><code>filter()</code></a> to test each item in a collection, and create a new collection containing only items that match:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function lCat(cat) {\n return cat.startsWith(\"L\");\n}\n\nconst cats = [\"Leopard\", \"Serval\", \"Jaguar\", \"Tiger\", \"Caracal\", \"Lion\"];\n\nconst filtered = cats.filter(lCat);\n\nconsole.log(filtered);\n// [ \"Leopard\", \"Lion\" ]\n</code></pre></div>\n<p>This looks a lot like <code>map()</code>, except the function we pass in returns a <a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Variables#booleans\">boolean</a>: if it returns <code>true</code>, then the item is included in the new array.\nOur function tests that the item starts with the letter \"L\", so the result is an array containing only cats whose names start with \"L\":</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>[ \"Leopard\", \"Lion\" ]\n</code></pre></div>\n<p>Note that <code>map()</code> and <code>filter()</code> are both often used with <em>function expressions</em>, which you will learn about in our <a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Functions\">Functions</a> lesson.\nUsing function expressions we could rewrite the example above to be much more compact:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const cats = [\"Leopard\", \"Serval\", \"Jaguar\", \"Tiger\", \"Caracal\", \"Lion\"];\n\nconst filtered = cats.filter((cat) => cat.startsWith(\"L\"));\nconsole.log(filtered);\n// [ \"Leopard\", \"Lion\" ]\n</code></pre></div>"}},{"type":"prose","value":{"id":"the_standard_for_loop","title":"The standard for loop","isH3":false,"content":"<p>In the \"drawing circles\" example above, you don't have a collection of items to loop through: you really just want to run the same code 100 times.\nIn a case like that, you can use the <a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/for\"><code>for</code></a> loop.\nThis has the following syntax:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>for (initializer; condition; final-expression) {\n // code to run\n}\n</code></pre></div>\n<p>Here we have:</p>\n<ol>\n<li>\n<p>The keyword <code>for</code>, followed by some parentheses.</p>\n</li>\n<li>\n<p>Inside the parentheses we have three items, separated by semicolons:</p>\n<ol>\n<li>An <strong>initializer</strong> — this is usually a variable set to a number, which is incremented to count the number of times the loop has run.\nIt is also sometimes referred to as a <strong>counter variable</strong>.</li>\n<li>A <strong>condition</strong> — this defines when the loop should stop looping.\nThis is generally an expression featuring a comparison operator, a test to see if the exit condition has been met.</li>\n<li>A <strong>final-expression</strong> — this is always evaluated (or run) each time the loop has gone through a full iteration.\nIt usually serves to increment (or in some cases decrement) the counter variable, to bring it closer to the point where the condition is no longer <code>true</code>.</li>\n</ol>\n</li>\n<li>\n<p>Some curly braces that contain a block of code — this code will be run each time the loop iterates.</p>\n</li>\n</ol>"}},{"type":"prose","value":{"id":"calculating_squares","title":"Calculating squares","isH3":true,"content":"<p>Let's look at a real example so we can visualize what these do more clearly.</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><button id=\"calculate\">Calculate</button>\n<button id=\"clear\">Clear</button>\n<pre id=\"results\"></pre>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const results = document.querySelector(\"#results\");\n\nfunction calculate() {\n for (let i = 1; i < 10; i++) {\n const newResult = `${i} x ${i} = ${i * i}`;\n results.textContent += `${newResult}\\n`;\n }\n results.textContent += \"\\nFinished!\\n\\n\";\n}\n\nconst calculateBtn = document.querySelector(\"#calculate\");\nconst clearBtn = document.querySelector(\"#clear\");\n\ncalculateBtn.addEventListener(\"click\", calculate);\nclearBtn.addEventListener(\"click\", () => (results.textContent = \"\"));\n</code></pre></div>\n<p>This gives us the following output:</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Calculating squares sample\" id=\"frame_calculating_squares\" width=\"100%\" height=\"250\" src=\"about:blank\" data-live-path=\"/en-US/docs/Learn_web_development/Core/Scripting/Loops/\" data-live-id=\"calculating_squares\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>This code calculates squares for the numbers from 1 to 9, and writes out the result. The core of the code is the <code>for</code> loop that performs the calculation.</p>\n<p>Let's break down the <code>for (let i = 1; i < 10; i++)</code> line into its three pieces:</p>\n<ol>\n<li><code>let i = 1</code>: the counter variable, <code>i</code>, starts at <code>1</code>. Note that we have to use <code>let</code> for the counter, because we're reassigning it each time we go round the loop.</li>\n<li><code>i < 10</code>: keep going round the loop for as long as <code>i</code> is smaller than <code>10</code>.</li>\n<li><code>i++</code>: add one to <code>i</code> each time round the loop.</li>\n</ol>\n<p>Inside the loop, we calculate the square of the current value of <code>i</code>, that is: <code>i * i</code>. We create a string expressing the calculation we made and the result, and add this string to the output text. We also add <code>\\n</code>, so the next string we add will begin on a new line. So:</p>\n<ol>\n<li>During the first run, <code>i = 1</code>, so we will add <code>1 x 1 = 1</code>.</li>\n<li>During the second run, <code>i = 2</code>, so we will add <code>2 x 2 = 4</code>.</li>\n<li>And so on…</li>\n<li>When <code>i</code> becomes equal to <code>10</code> we will stop running the loop and move straight to the next bit of code below the loop, printing out the <code>Finished!</code> message on a new line.</li>\n</ol>"}},{"type":"prose","value":{"id":"looping_through_collections_with_a_for_loop","title":"Looping through collections with a for loop","isH3":true,"content":"<p>You can use a <code>for</code> loop to iterate through a collection, instead of a <code>for...of</code> loop.</p>\n<p>Let's look again at our <code>for...of</code> example above:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const cats = [\"Leopard\", \"Serval\", \"Jaguar\", \"Tiger\", \"Caracal\", \"Lion\"];\n\nfor (const cat of cats) {\n console.log(cat);\n}\n</code></pre></div>\n<p>We could rewrite that code like this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const cats = [\"Leopard\", \"Serval\", \"Jaguar\", \"Tiger\", \"Caracal\", \"Lion\"];\n\nfor (let i = 0; i < cats.length; i++) {\n console.log(cats[i]);\n}\n</code></pre></div>\n<p>In this loop we're starting <code>i</code> at <code>0</code>, and stopping when <code>i</code> reaches the length of the array.\nThen inside the loop, we're using <code>i</code> to access each item in the array in turn.</p>\n<p>This works just fine, and in early versions of JavaScript, <code>for...of</code> didn't exist, so this was the standard way to iterate through an array.\nHowever, it offers more chances to introduce bugs into your code. For example:</p>\n<ul>\n<li>you might start <code>i</code> at <code>1</code>, forgetting that the first array index is zero, not 1.</li>\n<li>you might stop at <code>i <= cats.length</code>, forgetting that the last array index is at <code>length - 1</code>.</li>\n</ul>\n<p>For reasons like this, it's usually best to use <code>for...of</code> if you can.</p>\n<p>Sometimes you still need to use a <code>for</code> loop to iterate through an array.\nFor example, in the code below we want to log a message listing our cats:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const cats = [\"Pete\", \"Biggles\", \"Jasmine\"];\n\nlet myFavoriteCats = \"My cats are called \";\n\nfor (const cat of cats) {\n myFavoriteCats += `${cat}, `;\n}\n\nconsole.log(myFavoriteCats); // \"My cats are called Pete, Biggles, Jasmine, \"\n</code></pre></div>\n<p>The final output sentence isn't very well-formed:</p>\n<pre class=\"brush: plain notranslate\">My cats are called Pete, Biggles, Jasmine,\n</pre>\n<p>We'd prefer it to handle the last cat differently, like this:</p>\n<pre class=\"brush: plain notranslate\">My cats are called Pete, Biggles, and Jasmine.\n</pre>\n<p>But to do this we need to know when we are on the final loop iteration, and to do that we can use a <code>for</code> loop and examine the value of <code>i</code>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const cats = [\"Pete\", \"Biggles\", \"Jasmine\"];\n\nlet myFavoriteCats = \"My cats are called \";\n\nfor (let i = 0; i < cats.length; i++) {\n if (i === cats.length - 1) {\n // We are at the end of the array\n myFavoriteCats += `and ${cats[i]}.`;\n } else {\n myFavoriteCats += `${cats[i]}, `;\n }\n}\n\nconsole.log(myFavoriteCats); // \"My cats are called Pete, Biggles, and Jasmine.\"\n</code></pre></div>"}},{"type":"prose","value":{"id":"exiting_loops_with_break","title":"Exiting loops with break","isH3":false,"content":"<p>If you want to exit a loop before all the iterations have been completed, you can use the <a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/break\">break</a> statement.\nWe already met this in the previous article when we looked at <a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Conditionals#switch_statements\">switch statements</a> — when a case is met in a switch statement that matches the input expression, the <code>break</code> statement immediately exits the switch statement and moves on to the code after it.</p>\n<p>It's the same with loops — a <code>break</code> statement will immediately exit the loop and make the browser move on to any code that follows it.</p>\n<p>Say we wanted to search through an array of contacts and telephone numbers and return just the number we wanted to find?\nFirst, some simple HTML — a text <a href=\"/en-US/docs/Web/HTML/Element/input\"><code><input></code></a> allowing us to enter a name to search for, a <a href=\"/en-US/docs/Web/HTML/Element/button\"><code><button></code></a> element to submit a search, and a <a href=\"/en-US/docs/Web/HTML/Element/p\"><code><p></code></a> element to display the results in:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><label for=\"search\">Search by contact name: </label>\n<input id=\"search\" type=\"text\" />\n<button>Search</button>\n\n<p></p>\n</code></pre></div>\n<p>Now on to the JavaScript:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const contacts = [\n \"Chris:2232322\",\n \"Sarah:3453456\",\n \"Bill:7654322\",\n \"Mary:9998769\",\n \"Dianne:9384975\",\n];\nconst para = document.querySelector(\"p\");\nconst input = document.querySelector(\"input\");\nconst btn = document.querySelector(\"button\");\n\nbtn.addEventListener(\"click\", () => {\n const searchName = input.value.toLowerCase();\n input.value = \"\";\n input.focus();\n para.textContent = \"\";\n for (const contact of contacts) {\n const splitContact = contact.split(\":\");\n if (splitContact[0].toLowerCase() === searchName) {\n para.textContent = `${splitContact[0]}'s number is ${splitContact[1]}.`;\n break;\n }\n }\n if (para.textContent === \"\") {\n para.textContent = \"Contact not found.\";\n }\n});\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Exiting loops with break sample\" id=\"frame_exiting_loops_with_break\" width=\"100%\" height=\"100\" src=\"about:blank\" data-live-path=\"/en-US/docs/Learn_web_development/Core/Scripting/Loops/\" data-live-id=\"exiting_loops_with_break\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<ol>\n<li>\n<p>First of all, we have some variable definitions — we have an array of contact information, with each item being a string containing a name and phone number separated by a colon.</p>\n</li>\n<li>\n<p>Next, we attach an event listener to the button (<code>btn</code>) so that when it is pressed some code is run to perform the search and return the results.</p>\n</li>\n<li>\n<p>We store the value entered into the text input in a variable called <code>searchName</code>, before then emptying the text input and focusing it again, ready for the next search.\nNote that we also run the <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase\"><code>toLowerCase()</code></a> method on the string, so that searches will be case-insensitive.</p>\n</li>\n<li>\n<p>Now on to the interesting part, the <code>for...of</code> loop:</p>\n<ol>\n<li>Inside the loop, we first split the current contact at the colon character, and store the resulting two values in an array called <code>splitContact</code>.</li>\n<li>We then use a conditional statement to test whether <code>splitContact[0]</code> (the contact's name, again lower-cased with <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase\"><code>toLowerCase()</code></a>) is equal to the inputted <code>searchName</code>.\nIf it is, we enter a string into the paragraph to report what the contact's number is, and use <code>break</code> to end the loop.</li>\n</ol>\n</li>\n<li>\n<p>After the loop, we check whether we set a contact, and if not we set the paragraph text to \"Contact not found.\".</p>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nYou can view the <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/contact-search.html\" class=\"external\" target=\"_blank\">full source code on GitHub</a> too (also <a href=\"https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html\" class=\"external\" target=\"_blank\">see it running live</a>).</p>\n</div>"}},{"type":"prose","value":{"id":"skipping_iterations_with_continue","title":"Skipping iterations with continue","isH3":false,"content":"<p>The <a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/continue\">continue</a> statement works similarly to <code>break</code>, but instead of breaking out of the loop entirely, it skips to the next iteration of the loop.\nLet's look at another example that takes a number as an input, and returns only the numbers that are squares of integers (whole numbers).</p>\n<p>The HTML is basically the same as the last example — a simple numeric input, and a paragraph for output.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><label for=\"number\">Enter number: </label>\n<input id=\"number\" type=\"number\" />\n<button>Generate integer squares</button>\n\n<p>Output:</p>\n</code></pre></div>\n<p>The JavaScript is mostly the same too, although the loop itself is a bit different:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const para = document.querySelector(\"p\");\nconst input = document.querySelector(\"input\");\nconst btn = document.querySelector(\"button\");\n\nbtn.addEventListener(\"click\", () => {\n para.textContent = \"Output: \";\n const num = input.value;\n input.value = \"\";\n input.focus();\n for (let i = 1; i <= num; i++) {\n let sqRoot = Math.sqrt(i);\n if (Math.floor(sqRoot) !== sqRoot) {\n continue;\n }\n para.textContent += `${i} `;\n }\n});\n</code></pre></div>\n<p>Here's the output:</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Skipping iterations with continue sample\" id=\"frame_skipping_iterations_with_continue\" width=\"100%\" height=\"100\" src=\"about:blank\" data-live-path=\"/en-US/docs/Learn_web_development/Core/Scripting/Loops/\" data-live-id=\"skipping_iterations_with_continue\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<ol>\n<li>In this case, the input should be a number (<code>num</code>). The <code>for</code> loop is given a counter starting at 1 (as we are not interested in 0 in this case), an exit condition that says the loop will stop when the counter becomes bigger than the input <code>num</code>, and an iterator that adds 1 to the counter each time.</li>\n<li>Inside the loop, we find the square root of each number using <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt\"><code>Math.sqrt(i)</code></a>, then check whether the square root is an integer by testing whether it is the same as itself when it has been rounded down to the nearest integer (this is what <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor\"><code>Math.floor()</code></a> does to the number it is passed).</li>\n<li>If the square root and the rounded down square root do not equal one another (<code>!==</code>), it means that the square root is not an integer, so we are not interested in it. In such a case, we use the <code>continue</code> statement to skip on to the next loop iteration without recording the number anywhere.</li>\n<li>If the square root is an integer, we skip past the <code>if</code> block entirely, so the <code>continue</code> statement is not executed; instead, we concatenate the current <code>i</code> value plus a space at the end of the paragraph content.</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nYou can view the <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/integer-squares.html\" class=\"external\" target=\"_blank\">full source code on GitHub</a> too (also <a href=\"https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html\" class=\"external\" target=\"_blank\">see it running live</a>).</p>\n</div>"}},{"type":"prose","value":{"id":"while_and_do...while","title":"while and do...while","isH3":false,"content":"<p><code>for</code> is not the only type of general loop available in JavaScript. There are actually many others and, while you don't need to understand all of these now, it is worth having a look at the structure of a couple of others so that you can recognize the same features at work in a slightly different way.</p>\n<p>First, let's have a look at the <a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/while\"><code>while</code></a> loop. This loop's syntax looks like so:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>initializer\nwhile (condition) {\n // code to run\n\n final-expression\n}\n</code></pre></div>\n<p>This works in a very similar way to the <code>for</code> loop, except that the initializer variable is set before the loop, and the final-expression is included inside the loop after the code to run, rather than these two items being included inside the parentheses.\nThe condition is included inside the parentheses, which are preceded by the <code>while</code> keyword rather than <code>for</code>.</p>\n<p>The same three items are still present, and they are still defined in the same order as they are in the for loop.\nThis is because you must have an initializer defined before you can check whether or not the condition is true.\nThe final-expression is then run after the code inside the loop has run (an iteration has been completed), which will only happen if the condition is still true.</p>\n<p>Let's have a look again at our cats list example, but rewritten to use a while loop:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const cats = [\"Pete\", \"Biggles\", \"Jasmine\"];\n\nlet myFavoriteCats = \"My cats are called \";\n\nlet i = 0;\n\nwhile (i < cats.length) {\n if (i === cats.length - 1) {\n myFavoriteCats += `and ${cats[i]}.`;\n } else {\n myFavoriteCats += `${cats[i]}, `;\n }\n\n i++;\n}\n\nconsole.log(myFavoriteCats); // \"My cats are called Pete, Biggles, and Jasmine.\"\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nThis still works just the same as expected — have a look at it <a href=\"https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html\" class=\"external\" target=\"_blank\">running live on GitHub</a> (also view the <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/while.html\" class=\"external\" target=\"_blank\">full source code</a>).</p>\n</div>\n<p>The <a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/do...while\"><code>do...while</code></a> loop is very similar, but provides a variation on the while structure:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>initializer\ndo {\n // code to run\n\n final-expression\n} while (condition)\n</code></pre></div>\n<p>In this case, the initializer again comes first, before the loop starts. The keyword directly precedes the curly braces containing the code to run and the final expression.</p>\n<p>The main difference between a <code>do...while</code> loop and a <code>while</code> loop is that <em>the code inside a <code>do...while</code> loop is always executed at least once</em>. That's because the condition comes after the code inside the loop. So we always run that code, then check to see if we need to run it again. In <code>while</code> and <code>for</code> loops, the check comes first, so the code might never be executed.</p>\n<p>Let's rewrite our cat listing example again to use a <code>do...while</code> loop:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const cats = [\"Pete\", \"Biggles\", \"Jasmine\"];\n\nlet myFavoriteCats = \"My cats are called \";\n\nlet i = 0;\n\ndo {\n if (i === cats.length - 1) {\n myFavoriteCats += `and ${cats[i]}.`;\n } else {\n myFavoriteCats += `${cats[i]}, `;\n }\n\n i++;\n} while (i < cats.length);\n\nconsole.log(myFavoriteCats); // \"My cats are called Pete, Biggles, and Jasmine.\"\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nAgain, this works just the same as expected — have a look at it <a href=\"https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html\" class=\"external\" target=\"_blank\">running live on GitHub</a> (also view the <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html\" class=\"external\" target=\"_blank\">full source code</a>).</p>\n</div>\n<div class=\"notecard warning\">\n<p><strong>Warning:</strong>\nWith any kind of loop, you must make sure that the initializer is incremented or, depending on the case, decremented, so the condition eventually becomes false.\nIf not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an <strong>infinite loop</strong>.</p>\n</div>"}},{"type":"prose","value":{"id":"active_learning_launch_countdown","title":"Active learning: Launch countdown","isH3":false,"content":"<p>In this exercise, we want you to print out a simple launch countdown to the output box, from 10 down to Blastoff.\nSpecifically, we want you to:</p>\n<ul>\n<li>\n<p>Loop from 10 down to 0. We've provided you with an initializer — <code>let i = 10;</code>.</p>\n</li>\n<li>\n<p>For each iteration, create a new paragraph and append it to the output <code><div></code>, which we've selected using <code>const output = document.querySelector('.output');</code>.\nIn comments, we've provided you with three code lines that need to be used somewhere inside the loop:</p>\n<ul>\n<li><code>const para = document.createElement('p');</code> — creates a new paragraph.</li>\n<li><code>output.appendChild(para);</code> — appends the paragraph to the output <code><div></code>.</li>\n<li><code>para.textContent =</code> — makes the text inside the paragraph equal to whatever you put on the right-hand side, after the equals sign.</li>\n</ul>\n</li>\n<li>\n<p>Different iteration numbers require different text to be put in the paragraph for that iteration (you'll need a conditional statement and multiple <code>para.textContent =</code> lines):</p>\n<ul>\n<li>If the number is 10, print \"Countdown 10\" to the paragraph.</li>\n<li>If the number is 0, print \"Blast off!\" to the paragraph.</li>\n<li>For any other number, print just the number to the paragraph.</li>\n</ul>\n</li>\n<li>\n<p>Remember to include an iterator! However, in this example we are counting down after each iteration, not up, so you <strong>don't</strong> want <code>i++</code> — how do you iterate downwards?</p>\n</li>\n</ul>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nIf you start typing the loop (for example (while(i>=0)), the browser might get stuck because you have not yet entered the end condition. So be careful with this. You can start writing your code in a comment to deal with this issue and remove the comment after you finish.</p>\n</div>\n<p>If you make a mistake, you can always reset the example with the \"Reset\" button.\nIf you get really stuck, press \"Show solution\" to see a solution.</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><h2>Live output</h2>\n<div class=\"output\" style=\"height: 410px;overflow: auto;\"></div>\n\n<h2>Editable code</h2>\n<p class=\"a11y-label\">\n Press Esc to move focus away from the code area (Tab inserts a tab character).\n</p>\n<textarea id=\"code\" class=\"playable-code\" style=\"height: 300px;width: 95%\">\nconst output = document.querySelector('.output');\noutput.textContent = \"\";\n\n// let i = 10;\n\n// const para = document.createElement('p');\n// para.textContent = ;\n// output.appendChild(para);\n</textarea>\n\n<div class=\"playable-buttons\">\n <input id=\"reset\" type=\"button\" value=\"Reset\" />\n <input id=\"solution\" type=\"button\" value=\"Show solution\" />\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>html {\n font-family: sans-serif;\n}\n\nh2 {\n font-size: 16px;\n}\n\n.a11y-label {\n margin: 0;\n text-align: right;\n font-size: 0.7rem;\n width: 98%;\n}\n\nbody {\n margin: 10px;\n background: #f5f9fa;\n}\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: js hidden notranslate\"><code>const textarea = document.getElementById(\"code\");\nconst reset = document.getElementById(\"reset\");\nconst solution = document.getElementById(\"solution\");\nlet code = textarea.value;\nlet userEntry = textarea.value;\n\nfunction updateCode() {\n eval(textarea.value);\n}\n\nreset.addEventListener(\"click\", function () {\n textarea.value = code;\n userEntry = textarea.value;\n solutionEntry = jsSolution;\n solution.value = \"Show solution\";\n updateCode();\n});\n\nsolution.addEventListener(\"click\", function () {\n if (solution.value === \"Show solution\") {\n textarea.value = solutionEntry;\n solution.value = \"Hide solution\";\n } else {\n textarea.value = userEntry;\n solution.value = \"Show solution\";\n }\n updateCode();\n});\n\nlet jsSolution = `const output = document.querySelector('.output');\noutput.textContent = \"\";\n\nlet i = 10;\n\nwhile (i >= 0) {\n const para = document.createElement('p');\n if (i === 10) {\n para.textContent = \\`Countdown \\${i}\\`;\n } else if (i === 0) {\n para.textContent = 'Blast off!';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}`;\n\nlet solutionEntry = jsSolution;\n\ntextarea.addEventListener(\"input\", updateCode);\nwindow.addEventListener(\"load\", updateCode);\n\n// stop tab key tabbing out of textarea and\n// make it write a tab at the caret position instead\n\ntextarea.onkeydown = function (e) {\n if (e.code === \"Tab\") {\n e.preventDefault();\n insertAtCaret(\"\\t\");\n }\n\n if (e.code === \"Escape\") {\n textarea.blur();\n }\n};\n\nfunction insertAtCaret(text) {\n const scrollPos = textarea.scrollTop;\n let caretPos = textarea.selectionStart;\n const front = textarea.value.substring(0, caretPos);\n const back = textarea.value.substring(\n textarea.selectionEnd,\n textarea.value.length,\n );\n\n textarea.value = front + text + back;\n caretPos += text.length;\n textarea.selectionStart = caretPos;\n textarea.selectionEnd = caretPos;\n textarea.focus();\n textarea.scrollTop = scrollPos;\n}\n\n// Update the saved userCode every time the user updates the text area code\n\ntextarea.onkeyup = () => {\n // We only want to save the state when the user code is being shown,\n // not the solution, so that solution is not saved over the user code\n if (solution.value === \"Show solution\") {\n userEntry = textarea.value;\n } else {\n solutionEntry = textarea.value;\n }\n\n updateCode();\n};\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Active learning Launch countdown sample\" id=\"frame_active_learning_launch_countdown\" width=\"100%\" height=\"900\" src=\"about:blank\" data-live-path=\"/en-US/docs/Learn_web_development/Core/Scripting/Loops/\" data-live-id=\"active_learning_launch_countdown\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"active_learning_filling_in_a_guest_list","title":"Active learning: Filling in a guest list","isH3":false,"content":"<p>In this exercise, we want you to take a list of names stored in an array and put them into a guest list. But it's not quite that easy — we don't want to let Phil and Lola in because they are greedy and rude, and always eat all the food! We have two lists, one for guests to admit, and one for guests to refuse.</p>\n<p>Specifically, we want you to:</p>\n<ul>\n<li>\n<p>Write a loop that will iterate through the <code>people</code> array.</p>\n</li>\n<li>\n<p>During each loop iteration, check if the current array item is equal to \"Phil\" or \"Lola\" using a conditional statement:</p>\n<ul>\n<li>If it is, concatenate the array item to the end of the <code>refused</code> paragraph's <code>textContent</code>, followed by a comma and a space.</li>\n<li>If it isn't, concatenate the array item to the end of the <code>admitted</code> paragraph's <code>textContent</code>, followed by a comma and a space.</li>\n</ul>\n</li>\n</ul>\n<p>We've already provided you with:</p>\n<ul>\n<li><code>refused.textContent +=</code> — the beginnings of a line that will concatenate something at the end of <code>refused.textContent</code>.</li>\n<li><code>admitted.textContent +=</code> — the beginnings of a line that will concatenate something at the end of <code>admitted.textContent</code>.</li>\n</ul>\n<p>Extra bonus question — after completing the above tasks successfully, you will be left with two lists of names, separated by commas, but they will be untidy — there will be a comma at the end of each one.\nCan you work out how to write lines that slice the last comma off in each case, and add a full stop to the end?\nHave a look at the <a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Useful string methods</a> article for help.</p>\n<p>If you make a mistake, you can always reset the example with the \"Reset\" button.\nIf you get really stuck, press \"Show solution\" to see a solution.</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><h2>Live output</h2>\n<div class=\"output\" style=\"height: 100px;overflow: auto;\">\n <p class=\"admitted\">Admit:</p>\n <p class=\"refused\">Refuse:</p>\n</div>\n\n<h2>Editable code</h2>\n<p class=\"a11y-label\">\n Press Esc to move focus away from the code area (Tab inserts a tab character).\n</p>\n<textarea id=\"code\" class=\"playable-code\" style=\"height: 400px;width: 95%\">\nconst people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];\n\nconst admitted = document.querySelector('.admitted');\nconst refused = document.querySelector('.refused');\nadmitted.textContent = 'Admit: ';\nrefused.textContent = 'Refuse: ';\n\n// loop starts here\n\n// refused.textContent += ;\n// admitted.textContent += ;\n\n</textarea>\n\n<div class=\"playable-buttons\">\n <input id=\"reset\" type=\"button\" value=\"Reset\" />\n <input id=\"solution\" type=\"button\" value=\"Show solution\" />\n</div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>html {\n font-family: sans-serif;\n}\n\nh2 {\n font-size: 16px;\n}\n\n.a11y-label {\n margin: 0;\n text-align: right;\n font-size: 0.7rem;\n width: 98%;\n}\n\nbody {\n margin: 10px;\n background: #f5f9fa;\n}\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: js hidden notranslate\"><code>const textarea = document.getElementById(\"code\");\nconst reset = document.getElementById(\"reset\");\nconst solution = document.getElementById(\"solution\");\nlet code = textarea.value;\nlet userEntry = textarea.value;\n\nfunction updateCode() {\n eval(textarea.value);\n}\n\nreset.addEventListener(\"click\", function () {\n textarea.value = code;\n userEntry = textarea.value;\n solutionEntry = jsSolution;\n solution.value = \"Show solution\";\n updateCode();\n});\n\nsolution.addEventListener(\"click\", function () {\n if (solution.value === \"Show solution\") {\n textarea.value = solutionEntry;\n solution.value = \"Hide solution\";\n } else {\n textarea.value = userEntry;\n solution.value = \"Show solution\";\n }\n updateCode();\n});\n\nconst jsSolution = `\nconst people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];\n\nconst admitted = document.querySelector('.admitted');\nconst refused = document.querySelector('.refused');\n\nadmitted.textContent = 'Admit: ';\nrefused.textContent = 'Refuse: ';\n\nfor (const person of people) {\n if (person === 'Phil' || person === 'Lola') {\n refused.textContent += \\`\\${person}, \\`;\n } else {\n admitted.textContent += \\`\\${person}, \\`;\n }\n}\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + '.';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + '.';`;\n\nlet solutionEntry = jsSolution;\n\ntextarea.addEventListener(\"input\", updateCode);\nwindow.addEventListener(\"load\", updateCode);\n\n// stop tab key tabbing out of textarea and\n// make it write a tab at the caret position instead\n\ntextarea.onkeydown = function (e) {\n if (e.code === \"Tab\") {\n e.preventDefault();\n insertAtCaret(\"\\t\");\n }\n\n if (e.code === \"Escape\") {\n textarea.blur();\n }\n};\n\nfunction insertAtCaret(text) {\n const scrollPos = textarea.scrollTop;\n let caretPos = textarea.selectionStart;\n const front = textarea.value.substring(0, caretPos);\n const back = textarea.value.substring(\n textarea.selectionEnd,\n textarea.value.length,\n );\n\n textarea.value = front + text + back;\n caretPos += text.length;\n textarea.selectionStart = caretPos;\n textarea.selectionEnd = caretPos;\n textarea.focus();\n textarea.scrollTop = scrollPos;\n}\n\n// Update the saved userCode every time the user updates the text area code\n\ntextarea.onkeyup = () => {\n // We only want to save the state when the user code is being shown,\n // not the solution, so that solution is not saved over the user code\n if (solution.value === \"Show solution\") {\n userEntry = textarea.value;\n } else {\n solutionEntry = textarea.value;\n }\n\n updateCode();\n};\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Active learning Filling in a guest list sample\" id=\"frame_active_learning_filling_in_a_guest_list\" width=\"100%\" height=\"680\" src=\"about:blank\" data-live-path=\"/en-US/docs/Learn_web_development/Core/Scripting/Loops/\" data-live-id=\"active_learning_filling_in_a_guest_list\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"which_loop_type_should_you_use","title":"Which loop type should you use?","isH3":false,"content":"<p>If you're iterating through an array or some other object that supports it, and don't need access to the index position of each item, then <code>for...of</code> is the best choice. It's easier to read and there's less to go wrong.</p>\n<p>For other uses, <code>for</code>, <code>while</code>, and <code>do...while</code> loops are largely interchangeable.\nThey can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive.\nWe would recommend <code>for</code>, at least to begin with, as it is probably the easiest for remembering everything — the initializer, condition, and final-expression all have to go neatly into the parentheses, so it is easy to see where they are and check that you aren't missing them.</p>\n<p>Let's have a look at them all again.</p>\n<p>First <code>for...of</code>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>for (const item of array) {\n // code to run\n}\n</code></pre></div>\n<p><code>for</code>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>for (initializer; condition; final-expression) {\n // code to run\n}\n</code></pre></div>\n<p><code>while</code>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>initializer\nwhile (condition) {\n // code to run\n\n final-expression\n}\n</code></pre></div>\n<p>and finally <code>do...while</code>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>initializer\ndo {\n // code to run\n\n final-expression\n} while (condition)\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nThere are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced <a href=\"/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration\">Loops and iteration guide</a>.</p>\n</div>"}},{"type":"prose","value":{"id":"test_your_skills!","title":"Test your skills!","isH3":false,"content":"<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills:_Loops\">Test your skills: Loops</a>.</p>"}},{"type":"prose","value":{"id":"summary","title":"Summary","isH3":false,"content":"<p>This article has revealed to you the basic concepts behind, and different options available when looping code in JavaScript.\nYou should now be clear on why loops are a good mechanism for dealing with repetitive code and raring to use them in your own examples!</p>\n<p>Next up, we'll look at functions.</p>"}},{"type":"prose","value":{"id":"see_also","title":"See also","isH3":false,"content":"<ul>\n<li><a href=\"/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration\">Loops and iteration in detail</a></li>\n<li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/for...of\">for...of reference</a></li>\n<li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/for\">for statement reference</a></li>\n<li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/while\">while</a> and <a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/do...while\">do...while</a> references</li>\n<li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/break\">break</a> and <a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/continue\">continue</a> references</li>\n</ul>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Conditionals\"><span class=\"button-wrap\"> Previous </span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Overview: Dynamic scripting with JavaScript</span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn_web_development/Core/Scripting/Functions\"><span class=\"button-wrap\"> Next </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":false,"locale":"en-US","mdn_url":"/en-US/docs/Learn_web_development/Core/Scripting/Loops","modified":"2024-12-19T15:37:45.000Z","native":"English (US)","noIndexing":false,"other_translations":[{"locale":"de","title":"Code-Schleifen","native":"Deutsch"},{"locale":"es","title":"Código de bucle","native":"Español"},{"locale":"fr","title":"Les boucles dans le code","native":"Français"},{"locale":"ja","title":"ループするコード","native":"日本語"},{"locale":"ko","title":"반복문","native":"한국어"},{"locale":"pt-BR","title":"Código em loop","native":"Português (do Brasil)"},{"locale":"ru","title":"Зацикливание кода","native":"Русский"},{"locale":"zh-CN","title":"循环吧，代码","native":"中文 (简体)"},{"locale":"zh-TW","title":"循環代碼","native":"正體中文 (繁體)"}],"pageTitle":"Looping code - Learn web development | MDN","parents":[{"uri":"/en-US/docs/Learn_web_development","title":"Learn"},{"uri":"/en-US/docs/Learn_web_development/Core","title":"Core learning modules"},{"uri":"/en-US/docs/Learn_web_development/Core/Scripting","title":"Dynamic scripting with JavaScript"},{"uri":"/en-US/docs/Learn_web_development/Core/Scripting/Loops","title":"Looping code"}],"popularity":null,"short_title":"Looping code","sidebarHTML":"<ol><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Getting_started\">Getting started modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup\">Environment setup</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installing basic software</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Browsing the web</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code editors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Dealing with files</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Command line crash course</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website\">Your first website</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">What will your website look like?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Creating the content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Styling the content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Adding interactivity</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Publishing your website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards\">Web standards</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">The web standards model</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">How browsers load websites</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills\">Soft skills</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Research and learning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Collaboration and teamwork</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows and processes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Succeeding in job interviews</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Core\">Core modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content\">Structuring content with HTML</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Basic HTML syntax</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">What's in the head? Webpage metadata</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Headings and paragraphs in HTML</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Emphasis and importance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Lists\">Lists</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Structuring documents</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Advanced text features</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Creating links</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Challenge: Marking up a letter</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Challenge: Structuring a page of content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML images</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video and audio</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Challenge: Mozilla splash page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML table basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML table accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Challenge: Structuring a planet data table</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Forms and buttons in HTML</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics\">CSS styling basics</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">What is CSS?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Getting started with CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Challenge: Styling a biography page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Basic CSS selectors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribute selectors</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudo-classes and pseudo-elements</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators\">Combinators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model\">The box model</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Handling conflicts</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS values and units</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing\">Sizing items in CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Backgrounds and borders</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow\">Overflowing content</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Images, media, and form elements</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Tables\">Styling tables</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Challenge: Fundamental CSS comprehension</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Challenge: Creating fancy letterheaded paper</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Challenge: A cool-looking box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling\">CSS text styling</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Fundamental text and font styling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Styling lists</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links\">Styling links</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Web fonts</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Challenge: Typesetting a community school homepage</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout\">CSS layout</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction\">Introduction to CSS layout</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning\">Positioning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS grid layout</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsive design</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Media query fundamentals</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Challenge: Fundamental layout comprehension</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/en-US/docs/Learn_web_development/Core/Scripting\">Dynamic scripting with JavaScript</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">What is JavaScript?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/A_first_splash\">A first splash into JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong\">What went wrong? Troubleshooting JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Variables\">Storing the information you need — Variables</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Math\">Basic math in JavaScript — numbers and operators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Strings\">Handling text — strings in JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Useful string methods</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Challenge: Silly story generator</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Conditionals\">Making decisions in your code — conditionals</a></li><li><em><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Loops\" aria-current=\"page\">Looping code</a></em></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Functions\">Functions — reusable blocks of code</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Build your own function</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Return_values\">Function return values</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Events\">Introduction to events</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Event bubbling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Image_gallery\">Challenge: Image gallery</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript object basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting\">DOM scripting introduction</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Network_requests\">Making network requests with JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/JSON\">Working with JSON</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">Debugging JavaScript and handling errors</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript frameworks and libraries</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">Introduction to client-side frameworks</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Framework main features</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Getting started with React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginning our React todo list</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Componentizing our React app</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React interactivity: Events and state</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Accessibility in React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React resources</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility\">Accessibility</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">What is accessibility?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Tooling\">Accessibility tooling and assistive technology</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: A good basis for accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript accessibility best practices</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Multimedia\">Accessible multimedia</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile accessibility</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Challenge: Accessibility troubleshooting</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Design_for_developers\">Design for developers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Version_control\">Version control</a></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Extensions\">Extension modules</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Object prototypes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Object-oriented programming</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Classes in JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Object building practice</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Challenge: Adding features to our bouncing balls demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-side web APIs</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Introduction to web APIs</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video and Audio APIs</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Drawing graphics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-side storage</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">Third-party APIs</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS\">Asynchronous JavaScript</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Introducing asynchronous JavaScript</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises\">How to use promises</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">How to implement a promise-based API</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Introducing workers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Challenge: Sequencing animations</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms\">Web forms</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Your first form</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">How to structure a web form</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Basic native form controls</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">The HTML5 input types</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Other form controls</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling web forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Advanced form styling</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI pseudo-classes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-side form validation</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Sending form data</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools\">Understanding client-side tools</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Client-side tooling overview</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Package management basics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">Introducing a complete toolchain</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Deploying our app</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side\">Server-side websites</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps\">Server-side first steps</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Introduction to the server side</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Client-Server Overview</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-side web frameworks</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website security</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django\">Django web framework (Python)</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django introduction</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Setting up a Django development environment</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django Tutorial Part 2: Creating a skeleton website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Part 3: Using models</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django admin site</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Part 5: Creating our home page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django Tutorial Part 7: Sessions framework</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Part 9: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django web application security</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Assessment: DIY Django mini blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web framework (Node.js)</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node introduction</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Setting up a Node development environment</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: The Local Library website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express Tutorial Part 2: Creating a skeleton website</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Part 4: Routes and controllers</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Part 5: Displaying library data</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Part 6: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance\">Web performance</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/why_web_performance\">The \"why\" of web performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">What is web performance?</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Perceived performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Measuring performance</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Images</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/HTML\">HTML performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/CSS\">CSS performance optimization</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">The business case for web performance</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing\">Testing</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Introduction\">Introduction to cross-browser testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategies for carrying out testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Handling common HTML and CSS problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementing feature detection</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing\">Introduction to automated testing</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Setting up your own test automation environment</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Transform_animate\">Transform and animate CSS</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Security_privacy\">Security and privacy</a></li><li class=\"section\">Further resources</li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Howto\">How to solve common problems</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems\">Solve common HTML problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems\">Solve common CSS problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Solve common JavaScript problems</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Web_mechanics\">Web mechanics</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Tools_and_setup\">Tools and setup</a></li><li><a href=\"/en-US/docs/Learn_web_development/Howto/Design_and_accessibility\">Design and accessibility</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\">About</a></li><li><a href=\"/en-US/docs/Learn_web_development/Educators\">Resources for educators</a></li><li><a href=\"/en-US/docs/Learn_web_development/Changelog\">Changelog</a></li></ol>","source":{"folder":"en-us/learn_web_development/core/scripting/loops","github_url":"https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/scripting/loops/index.md","last_commit_url":"https://github.com/mdn/content/commit/5b20f5f4265f988f80f513db0e4b35c7e0cd70dc","filename":"index.md"},"summary":"Programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete. Here we'll look at the loop structures available in JavaScript that handle such needs.","title":"Looping code","toc":[{"text":"Why are loops useful?","id":"why_are_loops_useful"},{"text":"Looping through a collection","id":"looping_through_a_collection"},{"text":"The standard for loop","id":"the_standard_for_loop"},{"text":"Exiting loops with break","id":"exiting_loops_with_break"},{"text":"Skipping iterations with continue","id":"skipping_iterations_with_continue"},{"text":"while and do...while","id":"while_and_do...while"},{"text":"Active learning: Launch countdown","id":"active_learning_launch_countdown"},{"text":"Active learning: Filling in a guest list","id":"active_learning_filling_in_a_guest_list"},{"text":"Which loop type should you use?","id":"which_loop_type_should_you_use"},{"text":"Test your skills!","id":"test_your_skills!"},{"text":"Summary","id":"summary"},{"text":"See also","id":"see_also"}],"pageType":"learn-module-chapter"}}</script></body></html>