for in / for of – Beau teaches JavaScript



For… in and for… of loops allow you to loop through property names and values in JavaScript.

🔗 Code: http://codepen.io/beaucarnes/pen/oBKWLq?editors=0012

🐦 Beau Carnes on Twitter: https://twitter.com/carnesbeau

⭐JavaScript Playlists⭐
▶JavaScript Basics: https://www.youtube.com/playlist?list=PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5
▶Data Structures and Algorithms: https://www.youtube.com/playlist?list=PLWKjhJtqVAbkso-IbgiiP48n-O-JQA9PJ
▶Design Patterns: https://www.youtube.com/playlist?list=PLWKjhJtqVAbnZtkAI3BqcYxKnfWn_C704
▶ES6: https://www.youtube.com/playlist?list=PLWKjhJtqVAbljtmmeS0c-CEl2LdE-eR_F
▶Clean Code: https://www.youtube.com/playlist?list=PLWKjhJtqVAbkK24EaPurzMq0-kw5U9pJh


We’re busy people who learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get great references with our open source community.

Join our community at https://freecodecamp.com
Read great tech articles at https://medium.freecodecamp.com

source

This Post Has 41 Comments

  1. Black+Purple

    This helped clear the difference between the 2 loops, thanks a lot

  2. Lázaro Joabe

    MAAN! You helped me so much! in the first 10s you just explained a stuff I spent a few hours to know and couldn't. You're amazing!

  3. Jake M.

    Thank you for this! You've clearly described the difference between the two! 💪🏽

  4. Om Pandey

    U should to get a reward in how to complicated easy things such an asshole

  5. Johnny Postblock

    This makes a lot of sense. I see how I need to restructure the semantics of my knockoff JavaScript interpreter.

  6. Davy Jones

    Need to watch another video on "for..in" loops on the objects..

  7. Jake Daurham

    I’m stuck on fitting a method inside a function. 😖 it sounds so simple!
    I can get it to run without being in a function (.split()) but the assignment is to create a function that splits a string of first + last name into an array of the split 2 strings.
    😫 this seems like it should be simple

  8. Eric Zedd

    Just remember!
    1. for (every prop in objects) { // do this } *objects – enumerable*
    2. for (every item of array) { // do this } *arrays – iterable**

  9. Mister Momo

    yeah i did not understand shoit. Mainly cuz i have more of a problem understanding syntax. It's so helpful when code is turned into english text, then I get it mad quickk

  10. Kevin Tempel

    To those who maybe are still confused I'm going to help you out and I'm going to be very specific with each individual word because they all mean something very important.

    ( let x in person ) – Also known as – ( Let X go into the variable person )

    1. (let) – tells x what to do
    2. (x)- is what will be going into something
    3. (In) – tells x to attach to the key properties inside the object
    4. (person) – is the destination for x

  11. Ousman D

    is it possible to iterate through the values of the object with the for…in — not using object.values ()

  12. ll

    Thank God you have two arms Beau!

  13. Sm1LeY

    thanks but i have a question, in the end when you console log everything, why the for (of) loop didn't print the foo value ??

  14. hoang lam

    Please give me the application you used to write this

  15. Student Coder

    Wow, this is quite good! Though I think that instead of "x" the first variable name should've been "propertyName" — just to make it more explicit and thus clear what's happening. And then maybe go over the code with "x" afterwards just to show that it really doesn't matter what that first variable is called.

    Slightly more problematically, in the beginning, stating that "'for…in' will loop through property names and 'for…of' will loop through property values" can be confusing at first when compared to the later statement (beginning at around 2:15) that the former works on what is enumerable while the latter what is iterable. In that vein, finally, I also thought that the later contrast between the two was good but felt just a bit rushed somehow.

    Still, overall a nice video for us beginners; thanks!

  16. Climbers137

    "for in" loops through innumerable properties, property "names" 0:05:
    1:582:16, object defined properties
    3:12, array numeric indexes & object defined properties

    "for of" loops through iterable objects (i.e. array, map, set), property "values" 0:08:
    4:014:18, values in arrays

  17. Tom Ormiston

    one way of remembering : 'i' n –> ob 'j' ect [look visually similar]
    so the other must be : off –> array

    OR "I want to get to know you in person " if you know that person is normally best as an object ?

  18. 90AlmostFamous

    just remember by this:
    for (let index in Arr) {
    console.log(index + Arr[index] ); //gives fname beau
    }
    for (let item of Arr) {
    console.log(item); //gives 3,5,7
    }

  19. Arvee -

    feels like javaScript god made these videos 😀

  20. liu yu

    why the `for of` can't output the `foo` value of the arr? It's confusing. Do you mind to explain that a little bit explicit? Many thanks.

Leave a Reply