{"id":92221,"date":"2026-04-26T07:24:05","date_gmt":"2026-04-26T12:24:05","guid":{"rendered":"https:\/\/www.bricktowntom.com\/blog\/?p=92221"},"modified":"2026-04-26T07:24:05","modified_gmt":"2026-04-26T12:24:05","slug":"javascript-for-loop-how-to-use-the-forin-loop","status":"publish","type":"post","link":"https:\/\/www.bricktowntom.com\/blog\/04\/javascript-for-loop-how-to-use-the-forin-loop.html","title":{"rendered":"JavaScript For Loop: How to Use the for\u2026in Loop"},"content":{"rendered":"


\n \"\"
\n <\/a><\/p>\n

Loops allow us to cycle through items in arrays or objects and do things like print them, modify them, or perform other kinds of tasks or actions. There are different kinds of loops in JavaScript, and one of them is the for…in loop.<\/strong><\/p>\n

In this article, we’ll learn about the for...in<\/code> loop JavaScript provides. We’ll look at how the for...in<\/code> loop is used in JavaScript, its syntax, examples of how it works, when to use it, when not to use it, and what other types of loops we can use instead.<\/p>\n

Why Use Loops<\/h2>\n

In JavaScript, just as in other programming languages, we use loops to read or access the items of a collection. The collection can be an array or an object. Every pass through the items of a collection is called an iteration<\/strong>.<\/p>\n

There are two ways to access an item in a collection. The first way is via its key in the collection, which is an index in an array or a property in an object. The second way is via the item itself, without needing the key.<\/p>\n

\"A<\/p>\n

Definition of the for\u2026in Loop<\/h2>\n

The JavaScript for...in<\/code> loop goes through or iterates keys of a collection. Using these keys, you can then access the item it represents in the collection.<\/p>\n

The collection of items can be either arrays, objects, or even strings.<\/p>\n

Syntax of the for\u2026in Loop<\/h2>\n

The for...in<\/code> loop has the following syntax or structure:<\/p>\n

for (let key in value) {\r\n  \/\/do something here\r\n}\r\n<\/code><\/pre>\n
In this code block, value<\/code> is the collection of items we’re iterating over. It can be an object, array, string, and so on. key<\/code> will be the key of each item in value<\/code>, changing on each iteration to the next key in the list.<\/p>\n
Note that we use let<\/code> or const<\/code> to declare key<\/code>.<\/p>\n
\"For<\/p>\n
Using the for\u2026in Loop with Objects<\/h2>\n
When using for...in<\/code> loop to iterate an object in JavaScript, the iterated keys or properties \u2014 which, in the snippet above, are represented by the key<\/code> variable \u2014 are the object’s own properties.<\/p>\n
As objects might inherit items through the prototype chain, which includes the default methods and properties of Objects as well as Object prototypes we might define, we should then use hasOwnProperty<\/a>.<\/p>\n
A for\u2026in loop object example<\/h3>\n
In the following example, we’re looping over the following variable obj<\/code>:<\/p>\n
const obj = {\r\n  1: \"JavaScript\",\r\n  3: \"PHP\",\r\n  2: \"Python\",\r\n  4: \"Java\"\r\n};\r\n<\/code><\/pre>\n
In the loop, we’re rendering the property and value in a <div><\/code> element.<\/p>\n
\nSee the Pen 
\nLooping Objects<\/a> by SitePoint (@SitePoint<\/a>)
\non CodePen<\/a>.<\/span>\n<\/p>\n<\/p>\n
Notice that the order of the iteration is ascending for the keys (that is, starting with digits in numerical order and then letters in alphabetical order). However, this outputted order is different from the index order of the items as created when initializing the object.<\/p>\n
Using a for\u2026in Loop with Arrays<\/h2>\n
When using the for...in<\/code> loop to iterate arrays in JavaScript, key<\/code> in this case will be the indices of the elements. However, the indices might be iterated in a random order.<\/p>\n
So, if the value<\/code> variable in the for...in<\/code> loop syntax structure we showed above was an array of five items, key<\/code> would not be guaranteed to be 0 to 4. Some indices might precede others. Details on when this might happen is explained later in this article.<\/p>\n
For\u2026in loop array example<\/h3>\n
In the example below, we’re looping over the following variable arr<\/code>:<\/p>\n
const arr = [\"Javascript\", \"PHP\", \"Python\", \"Java\"];\r\n<\/code><\/pre>\n
And in the loop, we’re rendering the index and the value of each array element.<\/p>\n
\nSee the Pen 
\nLooping Arrays<\/a> by SitePoint (@SitePoint<\/a>)
\non CodePen<\/a>.<\/span>\n<\/p>\n<\/p>\n
\n              Continue reading
\n              JavaScript For Loop: How to Use the for\u2026in Loop<\/a>
\n              on SitePoint<\/a>.\n            <\/p>\n
Source: Site Point<\/p>\n
Republished by  Blog Post Promoter<\/a><\/small><\/p>","protected":false},"excerpt":{"rendered":"
Loops allow us to cycle through items in arrays or objects and do things like print them, modify them, or perform other kinds …<\/p>\n","protected":false},"author":1,"featured_media":92222,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[51],"tags":[128],"class_list":["post-92221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a-few-things","tag-advantage"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/02\/1645567223loop.jpg?fit=1200%2C630&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p3k0YU-nZr","jetpack-related-posts":[{"id":92385,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/arrow-functions-in-javascript-how-to-use-fat-concise-syntax.html","url_meta":{"origin":92221,"position":0},"title":"Arrow Functions in JavaScript: How to Use Fat & Concise Syntax","author":"admin","date":"April 23, 2026","format":false,"excerpt":"Learn all about JavaScript arrow functions. We\u2019ll show you how to use ES6 arrow syntax, and some of the common mistakes you need to be aware of when leveraging arrow functions in your code. You\u2019ll see lots of examples that illustrate how they work. JavaScript arrow functions arrived with the\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":93250,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/8-css-and-javascript-snippets-that-celebrate-synthwave.html","url_meta":{"origin":92221,"position":1},"title":"8 CSS and JavaScript Snippets That Celebrate Synthwave","author":"admin","date":"April 5, 2026","format":false,"excerpt":"Web design trends aren\u2019t always a nod to what\u2019s new. Take the popularity of the Synthwave aesthetic. It harkens back to the early 1980s \u2013 years before the world wide web was even invented. It\u2019s gaudy and impractical. Yet it\u2019s hard to deny both the charm and the feelings of\u2026","rel":"","context":"In "Affiliate Marketing"","block_context":{"text":"Affiliate Marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/affiliate-marketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":93750,"url":"https:\/\/www.bricktowntom.com\/blog\/03\/how-to-generate-random-numbers-in-javascript-with-math-random.html","url_meta":{"origin":92221,"position":2},"title":"How to Generate Random Numbers in JavaScript with Math.random()","author":"admin","date":"March 31, 2026","format":false,"excerpt":"Learn how to use Math.random to generate random numbers in JavaScript and create random colors, letters, strings, phrases, passwords, & more. Continue reading How to Generate Random Numbers in JavaScript with Math.random() on SitePoint. Source: Site Point","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/09\/1663565358random-numbers-js.jpg?fit=1200%2C680&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/09\/1663565358random-numbers-js.jpg?fit=1200%2C680&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/09\/1663565358random-numbers-js.jpg?fit=1200%2C680&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/09\/1663565358random-numbers-js.jpg?fit=1200%2C680&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/09\/1663565358random-numbers-js.jpg?fit=1200%2C680&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":93777,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/8-css-javascript-snippets-for-building-mega-menus.html","url_meta":{"origin":92221,"position":3},"title":"8 CSS & JavaScript Snippets for Building Mega Menus","author":"admin","date":"April 3, 2026","format":false,"excerpt":"When it comes to website navigation, the old rule of thumb is that content should be no more than a click or two away. It\u2019s all about ensuring users can find what they need without having to jump through hoops. But the more content you have, the more difficult it\u2026","rel":"","context":"In "Affiliate Marketing"","block_context":{"text":"Affiliate Marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/affiliate-marketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":92799,"url":"https:\/\/www.bricktowntom.com\/blog\/03\/learn-to-code-with-javascript-the-most-popular-programming-language-on-earth.html","url_meta":{"origin":92221,"position":4},"title":"Learn to Code with JavaScript: The Most Popular Programming Language on Earth","author":"admin","date":"March 30, 2026","format":false,"excerpt":"In this guide, we will show you how you can learn to code with JavaScript for free. The JavaScript programming language is versatile, popular, and in high demand \u2014 making it a great language for learning how to code. Continue reading Learn to Code with JavaScript: The Most Popular Programming\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/04\/1651123441ltcarticle.jpg?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/04\/1651123441ltcarticle.jpg?fit=1200%2C630&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/04\/1651123441ltcarticle.jpg?fit=1200%2C630&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/04\/1651123441ltcarticle.jpg?fit=1200%2C630&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/04\/1651123441ltcarticle.jpg?fit=1200%2C630&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":93484,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/typescript-vs-javascript-which-one-you-should-use-and-why.html","url_meta":{"origin":92221,"position":5},"title":"TypeScript vs JavaScript: Which One You Should Use, and Why","author":"admin","date":"April 20, 2026","format":false,"excerpt":"In this TypeScript vs JavaScript comparison, you'll learn about TypeScript's advantages and disadvantages, and when and when not to use it. Continue reading TypeScript vs JavaScript: Which One You Should Use, and Why on SitePoint. Source: Site Point","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/08\/1660222703typescript-vs-javascript2.jpg?fit=1200%2C680&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/08\/1660222703typescript-vs-javascript2.jpg?fit=1200%2C680&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/08\/1660222703typescript-vs-javascript2.jpg?fit=1200%2C680&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/08\/1660222703typescript-vs-javascript2.jpg?fit=1200%2C680&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/08\/1660222703typescript-vs-javascript2.jpg?fit=1200%2C680&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/92221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/comments?post=92221"}],"version-history":[{"count":1,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/92221\/revisions"}],"predecessor-version":[{"id":92275,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/92221\/revisions\/92275"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/media\/92222"}],"wp:attachment":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/media?parent=92221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/categories?post=92221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/tags?post=92221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}