<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ loop - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ loop - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Sun, 05 Jul 2026 20:04:38 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/loop/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ Python Do While – Loop Example ]]>
                </title>
                <description>
                    <![CDATA[ Loops are a useful and frequently used feature in all modern programming languages. If you want to automate a specific repetitive task or prevent yourself from writing repetitive code in your programs, using a loop is the best option for that. Loops ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/python-do-while-loop-example/</link>
                <guid isPermaLink="false">66b1e47141fdb67461b85274</guid>
                
                    <category>
                        <![CDATA[ loop ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Python ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Dionysia Lemonaki ]]>
                </dc:creator>
                <pubDate>Tue, 31 Aug 2021 21:15:26 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2021/08/pexels-pixabay-106155.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Loops are a useful and frequently used feature in all modern programming languages.</p>
<p>If you want to automate a specific repetitive task or prevent yourself from writing repetitive code in your programs, using a loop is the best option for that.</p>
<p>Loops are a set of instructions that run repeatedly until a condition is met. Let's learn more about how loops work in Python.</p>
<h2 id="heading-loops-in-python">Loops in Python</h2>
<p>There are two types of loops built into Python:</p>
<ul>
<li><code>for</code> loops</li>
<li><code>while</code> loops</li>
</ul>
<p>Let's focus on how you can create a <code>while</code> loop in Python and how it works.</p>
<h2 id="heading-what-is-a-while-loop-in-python">What is a while loop in Python?</h2>
<p>The general syntax of a <code>while</code> loop in Python looks like this:</p>
<pre><code class="lang-python"><span class="hljs-keyword">while</span> condition:
    execute this code <span class="hljs-keyword">in</span> the loop<span class="hljs-string">'s body</span>
</code></pre>
<p>A while loop will run a piece of code while a condition is True. It will keep executing the desired set of code statements until that condition is no longer True.</p>
<p>A while loop will always first check the condition before running. </p>
<p>If the condition evaluates to <code>True</code> then the loop will run the code within the loop's body.</p>
<p>For example, this loop runs as long as <code>number</code> is less than <code>10</code>:</p>
<pre><code class="lang-python">number = <span class="hljs-number">0</span>
<span class="hljs-keyword">while</span> number &lt; <span class="hljs-number">10</span>:
    print(<span class="hljs-string">f"Number is <span class="hljs-subst">{number}</span>!"</span>)
    number = number + <span class="hljs-number">1</span>
</code></pre>
<p>Output:</p>
<pre><code><span class="hljs-built_in">Number</span> is <span class="hljs-number">0</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">1</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">2</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">3</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">4</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">5</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">6</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">7</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">8</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">9</span>!
</code></pre><p>Here, the variable <code>number</code> is set to <code>0</code> initially. </p>
<p>Before any code is run, Python checks the condition (<code>number &lt; 10</code>). It evaluates to True so the print statement gets executed and <code>Number is 0!</code> is printed to the console.</p>
<p><code>number</code> is then incremented by <code>1</code>. The condition is re-evaluated and it is again True, so the whole procedure repeats until <code>number</code> is equal to <code>9</code>.</p>
<p>This time <code>Number is 9!</code> is printed and <code>number</code> is incremented, but now <code>number</code> is equal to <code>10</code> so the condition is no longer met and therefore the loop is terminated.</p>
<p>It's possible that the <code>while</code> loop never runs if it doesn't meet the condition, like in this example:</p>
<pre><code class="lang-python">number = <span class="hljs-number">50</span>
<span class="hljs-keyword">while</span> number &lt; <span class="hljs-number">10</span> :
    print(<span class="hljs-string">f"Number is <span class="hljs-subst">{number}</span>!"</span>)
</code></pre>
<p>Since the condition is always False, the instructions in the loop's body don't execute.</p>
<h3 id="heading-dont-create-infinite-loops">Don't create infinite loops</h3>
<p>As you saw from the example above, <code>while</code> loops are typically accompanied by a variable whose value changes throughout the duration of the loop. And it ultimately determines when the loop will end.</p>
<p>If you do not add this line, you will create an infinite loop.</p>
<p><code>number</code> will not be incremented and updated. It will always be set and remain at <code>0</code> and therefore the condition <code>number &lt; 10</code> will be True forever. This means that the loop will continue to loop forever.</p>
<pre><code class="lang-python">
<span class="hljs-comment"># don't run this</span>

number = <span class="hljs-number">0</span>
<span class="hljs-keyword">while</span> number &lt; <span class="hljs-number">10</span>:
    print(<span class="hljs-string">f"Number is <span class="hljs-subst">{number}</span>!"</span>)
</code></pre>
<p>Output:</p>
<pre><code><span class="hljs-built_in">Number</span> is <span class="hljs-number">0</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">0</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">0</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">0</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">0</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">0</span>!
<span class="hljs-built_in">Number</span> is <span class="hljs-number">0</span>!
...
</code></pre><p>It runs infinitely.</p>
<p>It is the same as doing this:</p>
<pre><code class="lang-python">
<span class="hljs-comment">#don't run this</span>
<span class="hljs-keyword">while</span> <span class="hljs-literal">True</span>:
    print(<span class="hljs-string">"I am always true"</span>)
</code></pre>
<p>What if you find yourself in a situation like this?</p>
<p>Press <code>Control C</code> to escape and end the loop.</p>
<h2 id="heading-what-is-a-do-while-loop">What is a do while loop?</h2>
<p>The general syntax of a <code>do while</code> loop in other programming languages looks something like this:</p>
<pre><code><span class="hljs-keyword">do</span> {
  loop block statement to be executed;
  }
<span class="hljs-keyword">while</span>(condition);
</code></pre><p>For example, a do while loop in C looks like this:</p>
<pre><code class="lang-c"><span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string">&lt;stdio.h&gt;</span></span>

<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">(<span class="hljs-keyword">void</span>)</span>
 </span>{
   <span class="hljs-keyword">int</span> i = <span class="hljs-number">10</span>;
   <span class="hljs-keyword">do</span> {
      <span class="hljs-built_in">printf</span>(<span class="hljs-string">"the value of i: %i\n"</span>, i);
      i++;
      }
  <span class="hljs-keyword">while</span>( i &lt; <span class="hljs-number">20</span> );
 }
</code></pre>
<p>What is unique in do while loops is the fact that the code in the loop block will be executed <em>at least</em> one time.</p>
<p>The code in the statement runs one time and then the condition is checked <em>only after</em> the code is executed.</p>
<p>So the code runs once first and then the condition is checked. </p>
<p>If the condition checked evaluates to true, the loop continues.</p>
<p>There are cases where you would want your code to run at least one time, and that is where do while loops come in handy. </p>
<p>For example, when you're writing a program that takes in input from users you may ask for only a positive number. The code will run at least once. If the number the user submits is negative, the loop will keep on running. If it is positive, it will stop.</p>
<p>Python does not have built-in functionality to explicitly create a <code>do while</code> loop like other languages. But it is possible to emulate a <code>do while</code> loop in Python.</p>
<h2 id="heading-how-to-emulate-a-do-while-loop-in-python">How to emulate a do while loop in Python</h2>
<p>To create a <code>do while</code> loop in Python, you need to modify the <code>while</code> loop a bit in order to get similar behavior to a <code>do while</code> loop in other languages.</p>
<p>As a refresher so far, a <code>do while</code> loop will run at least once. If the condition is met, then it will run again.</p>
<p>The <code>while</code> loop, on the other hand, doesn't run at least once and may in fact never run. It runs when and only when the condition is met.</p>
<p>So, let's say we have an example where we want a line of code to run at least once.</p>
<pre><code class="lang-python">secret_word = <span class="hljs-string">"python"</span>
counter = <span class="hljs-number">0</span>

<span class="hljs-keyword">while</span> <span class="hljs-literal">True</span>:
    word = input(<span class="hljs-string">"Enter the secret word: "</span>).lower()
    counter = counter + <span class="hljs-number">1</span>
    <span class="hljs-keyword">if</span> word == secret_word:
        <span class="hljs-keyword">break</span>
    <span class="hljs-keyword">if</span> word != secret_word <span class="hljs-keyword">and</span> counter &gt; <span class="hljs-number">7</span>: 
        <span class="hljs-keyword">break</span>
</code></pre>
<p>The code will run at least one time, asking for user input.</p>
<p>It is always guaranteed to run at least once, with <code>True</code>, which otherwise creates an infinite loop.</p>
<p>If the user inputs the correct secret word, the loop is terminated.</p>
<p>If the user enters the wrong secret word more than 7 times, then the loop will be completely exited.</p>
<p>The <code>break</code> statement allows you to control the flow of a <code>while</code> loop and not end up with an infinite loop.</p>
<p><code>break</code> will immediately terminate the current loop all together and break out of it.</p>
<p>So this is how you create the a similar effect to a <code>do while</code> loop in Python.</p>
<p>The loop always executes at least once. It will continue to loop if a condition is not met and then terminate when a condition is met.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>You now know how to create a <code>do while</code> loop in Python.</p>
<p>If you're interested in learning more about Python, you can watch the <a target="_blank" href="https://www.youtube.com/watch?v=8ext9G7xspg&amp;t=40s">12 Python Projects video</a> on freeCodeCamp's YouTube channel. You'll get to build 12 projects and it's geared towards beginners.</p>
<p>freeCodeCamp also has a free <a target="_blank" href="https://www.freecodecamp.org/learn/scientific-computing-with-python/">Python Certification</a> to help you gain a good understanding and a well rounded overview of the important fundamentals of the language. </p>
<p>You'll also get to build five projects at the end of the course to practice what you've learned. </p>
<p>Thanks for reading and happy learning!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ JavaScript Array of Objects Tutorial – How to Create, Update, and Loop Through Objects Using JS Array Methods ]]>
                </title>
                <description>
                    <![CDATA[ By Ondrej Polesny On average I work with JSON data 18 times a week. And I still need to google for specific ways to manipulate them almost every time. What if there was an ultimate guide that could always give you the answer? In this article, I'll sh... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/javascript-array-of-objects-tutorial-how-to-create-update-and-loop-through-objects-using-js-array-methods/</link>
                <guid isPermaLink="false">66d4609b230dff0166905859</guid>
                
                    <category>
                        <![CDATA[ arrays ]]>
                    </category>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ loop ]]>
                    </category>
                
                    <category>
                        <![CDATA[ object ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Thu, 14 May 2020 11:48:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/05/js-tutorial-cover.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Ondrej Polesny</p>
<p>On average I work with JSON data 18 times a week. And I still need to google for specific ways to manipulate them almost every time. What if there was an ultimate guide that could always give you the answer?</p>
<p>In this article, I'll show you the basics of working with object arrays in JavaScript.</p>
<p>If you ever worked with a JSON structure, you've worked with JavaScript objects. Quite literally. JSON stands for JavaScript Object Notation. </p>
<p>Creating an object is as simple as this:</p>
<pre><code class="lang-js">{
  <span class="hljs-string">"color"</span>: <span class="hljs-string">"purple"</span>,
  <span class="hljs-string">"type"</span>: <span class="hljs-string">"minivan"</span>,
  <span class="hljs-string">"registration"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">'2012-02-03'</span>),
  <span class="hljs-string">"capacity"</span>: <span class="hljs-number">7</span>
}
</code></pre>
<p>This object represents a car. There can be many types and colors of cars, each object then represents a specific car.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/purple.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Now, most of the time you get data like this from an external service. But sometimes you need to create objects and their arrays manually. Like I did when I was creating this e-shop:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/categories.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Considering each category list item looks like this in HTML:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/code.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>I didn't want to have this code repeated 12 times, which would make it unmaintainable.</p>
<h2 id="heading-creating-an-array-of-objects">Creating an array of objects</h2>
<p>But let's get back to cars. Let's take a look at this set of cars:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/cars.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We can represent it as an array this way:</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> cars = [
  {
    <span class="hljs-string">"color"</span>: <span class="hljs-string">"purple"</span>,
    <span class="hljs-string">"type"</span>: <span class="hljs-string">"minivan"</span>,
    <span class="hljs-string">"registration"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">'2017-01-03'</span>),
    <span class="hljs-string">"capacity"</span>: <span class="hljs-number">7</span>
  },
  {
    <span class="hljs-string">"color"</span>: <span class="hljs-string">"red"</span>,
    <span class="hljs-string">"type"</span>: <span class="hljs-string">"station wagon"</span>,
    <span class="hljs-string">"registration"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">'2018-03-03'</span>),
    <span class="hljs-string">"capacity"</span>: <span class="hljs-number">5</span>
  },
  {
    ...
  },
  ...
]
</code></pre>
<p>Arrays of objects don't stay the same all the time. We almost always need to manipulate them. So let's take a look at how we can add objects to an already existing array.</p>
<h3 id="heading-add-a-new-object-at-the-start-arrayunshift">Add a new object at the start - Array.unshift</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/beginning.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>To add an object at the first position, use <code>Array.unshift</code>.</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> car = {
  <span class="hljs-string">"color"</span>: <span class="hljs-string">"red"</span>,
  <span class="hljs-string">"type"</span>: <span class="hljs-string">"cabrio"</span>,
  <span class="hljs-string">"registration"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">'2016-05-02'</span>),
  <span class="hljs-string">"capacity"</span>: <span class="hljs-number">2</span>
}
cars.unshift(car);
</code></pre>
<h3 id="heading-add-a-new-object-at-the-end-arraypush">Add a new object at the end - Array.push</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/ending.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>To add an object at the last position, use <code>Array.push</code>.</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> car = {
 <span class="hljs-string">"color"</span>: <span class="hljs-string">"red"</span>,
 <span class="hljs-string">"type"</span>: <span class="hljs-string">"cabrio"</span>,
 <span class="hljs-string">"registration"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">'2016-05-02'</span>),
 <span class="hljs-string">"capacity"</span>: <span class="hljs-number">2</span>
}
cars.push(car);
</code></pre>
<h3 id="heading-add-a-new-object-in-the-middle-arraysplice">Add a new object in the middle - Array.splice</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/middle.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>To add an object in the middle, use <code>Array.splice</code>. This function is very handy as it can also remove items. Watch out for its parameters:</p>
<pre><code class="lang-js"><span class="hljs-built_in">Array</span>.splice(
  {index where to start},
  {how many items to remove},
  {items to add}
);
</code></pre>
<p>So if we want to add the red Volkswagen Cabrio on the fifth position, we'd use:</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> car = {
  <span class="hljs-string">"color"</span>: <span class="hljs-string">"red"</span>,
  <span class="hljs-string">"type"</span>: <span class="hljs-string">"cabrio"</span>,
  <span class="hljs-string">"registration"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-string">'2016-05-02'</span>),
  <span class="hljs-string">"capacity"</span>: <span class="hljs-number">2</span>
}
cars.splice(<span class="hljs-number">4</span>, <span class="hljs-number">0</span>, car);
</code></pre>
<h2 id="heading-looping-through-an-array-of-objects">Looping through an array of objects</h2>
<p>Let me ask you a question here: Why do you want to loop through an array of objects? The reason I'm asking is that the looping is almost never the primary cause of what we want to achieve. </p>
<p>JavaScript provides many functions that can solve your problem without actually implementing the logic in a general cycle. Let's take a look.</p>
<h3 id="heading-find-an-object-in-an-array-by-its-values-arrayfind">Find an object in an array by its values - Array.find</h3>
<p>Let's say we want to find a car that is red. We can use the function <code>Array.find</code>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/cars-colorred.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> car = cars.find(<span class="hljs-function"><span class="hljs-params">car</span> =&gt;</span> car.color === <span class="hljs-string">"red"</span>);
</code></pre>
<p>This function returns the first matching element:</p>
<pre><code class="lang-js"><span class="hljs-built_in">console</span>.log(car);
<span class="hljs-comment">// output:</span>
<span class="hljs-comment">// {</span>
<span class="hljs-comment">//   color: 'red',</span>
<span class="hljs-comment">//   type: 'station wagon',</span>
<span class="hljs-comment">//   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',</span>
<span class="hljs-comment">//   capacity: 5</span>
<span class="hljs-comment">// }</span>
</code></pre>
<p>It's also possible to search for multiple values:</p>
<p><code>let car = cars.find(car =&gt; car.color === "red" &amp;&amp; car.type === "cabrio");</code></p>
<p>In that case we'll get the last car in the list.</p>
<h3 id="heading-get-multiple-items-from-an-array-that-match-a-condition-arrayfilter">Get multiple items from an array that match a condition - Array.filter</h3>
<p>The <code>Array.find</code> function returns only one object. If we want to get all red cars, we need to use <code>Array.filter</code>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/cars-colorred2.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> redCars = cars.filter(<span class="hljs-function"><span class="hljs-params">car</span> =&gt;</span> car.color === <span class="hljs-string">"red"</span>);
<span class="hljs-built_in">console</span>.log(redCars);
<span class="hljs-comment">// output:</span>
<span class="hljs-comment">// [</span>
<span class="hljs-comment">//   {</span>
<span class="hljs-comment">//     color: 'red',</span>
<span class="hljs-comment">//     type: 'station wagon',</span>
<span class="hljs-comment">//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',</span>
<span class="hljs-comment">//     capacity: 5</span>
<span class="hljs-comment">//   },</span>
<span class="hljs-comment">//   {</span>
<span class="hljs-comment">//     color: 'red',</span>
<span class="hljs-comment">//     type: 'cabrio',</span>
<span class="hljs-comment">//     registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',</span>
<span class="hljs-comment">//     capacity: 2</span>
<span class="hljs-comment">//   }</span>
<span class="hljs-comment">// ]</span>
</code></pre>
<h3 id="heading-transform-objects-of-an-array-arraymap">Transform objects of an array - Array.map</h3>
<p>This is something we need very often. Transform an array of objects into an array of different objects. That's a job for <code>Array.map</code>. Let's say we want to classify our cars into three groups based on their size.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/cars-sizes.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> sizes = cars.map(<span class="hljs-function"><span class="hljs-params">car</span> =&gt;</span> {
  <span class="hljs-keyword">if</span> (car.capacity &lt;= <span class="hljs-number">3</span>){
    <span class="hljs-keyword">return</span> <span class="hljs-string">"small"</span>;
  }
  <span class="hljs-keyword">if</span> (car.capacity &lt;= <span class="hljs-number">5</span>){
    <span class="hljs-keyword">return</span> <span class="hljs-string">"medium"</span>;
  }
  <span class="hljs-keyword">return</span> <span class="hljs-string">"large"</span>;
});
<span class="hljs-built_in">console</span>.log(sizes);
<span class="hljs-comment">// output:</span>
<span class="hljs-comment">// ['large','medium','medium', ..., 'small']</span>
</code></pre>
<p>It's also possible to create a new object if we need more values:</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> carsProperties = cars.map(<span class="hljs-function"><span class="hljs-params">car</span> =&gt;</span> {
 <span class="hljs-keyword">let</span> properties = {
   <span class="hljs-string">"capacity"</span>: car.capacity,
   <span class="hljs-string">"size"</span>: <span class="hljs-string">"large"</span>
 };
 <span class="hljs-keyword">if</span> (car.capacity &lt;= <span class="hljs-number">5</span>){
   properties[<span class="hljs-string">'size'</span>] = <span class="hljs-string">"medium"</span>;
 }
 <span class="hljs-keyword">if</span> (car.capacity &lt;= <span class="hljs-number">3</span>){
   properties[<span class="hljs-string">'size'</span>] = <span class="hljs-string">"small"</span>;
 }
 <span class="hljs-keyword">return</span> properties;
});
<span class="hljs-built_in">console</span>.log(carsProperties);
<span class="hljs-comment">// output:</span>
<span class="hljs-comment">// [</span>
<span class="hljs-comment">//   { capacity: 7, size: 'large' },</span>
<span class="hljs-comment">//   { capacity: 5, size: 'medium' },</span>
<span class="hljs-comment">//   { capacity: 5, size: 'medium' },</span>
<span class="hljs-comment">//   { capacity: 2, size: 'small' },</span>
<span class="hljs-comment">//   ...</span>
<span class="hljs-comment">// ]</span>
</code></pre>
<h3 id="heading-add-a-property-to-every-object-of-an-array-arrayforeach">Add a property to every object of an array - Array.forEach</h3>
<p>But what if we want the car size too? In that case we can enhance the object for a new property <code>size</code>. This is a good use-case for the <code>Array.forEach</code> function.</p>
<pre><code class="lang-js">cars.forEach(<span class="hljs-function"><span class="hljs-params">car</span> =&gt;</span> {
 car[<span class="hljs-string">'size'</span>] = <span class="hljs-string">"large"</span>;
 <span class="hljs-keyword">if</span> (car.capacity &lt;= <span class="hljs-number">5</span>){
   car[<span class="hljs-string">'size'</span>] = <span class="hljs-string">"medium"</span>;
 }
 <span class="hljs-keyword">if</span> (car.capacity &lt;= <span class="hljs-number">3</span>){
   car[<span class="hljs-string">'size'</span>] = <span class="hljs-string">"small"</span>;
 }
});
</code></pre>
<h3 id="heading-sort-an-array-by-a-property-arraysort">Sort an array by a property - Array.sort</h3>
<p>When we're done with transforming the objects, we usually need to sort them one way or another. </p>
<p>Typically, the sorting is based on a value of a property every object has. We can use the <code>Array.sort</code> function, but we need to provide a function that defines the sorting mechanism. </p>
<p>Let's say we want to sort the cars based on their capacity in descending order.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/cars-sort.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> sortedCars = cars.sort(<span class="hljs-function">(<span class="hljs-params">c1, c2</span>) =&gt;</span> (c1.capacity &lt; c2.capacity) ? <span class="hljs-number">1</span> : (c1.capacity &gt; c2.capacity) ? <span class="hljs-number">-1</span> : <span class="hljs-number">0</span>);
<span class="hljs-built_in">console</span>.log(sortedCars);
<span class="hljs-comment">// output:</span>
<span class="hljs-comment">// [</span>
<span class="hljs-comment">//   {</span>
<span class="hljs-comment">//     color: 'purple',</span>
<span class="hljs-comment">//     type: 'minivan',</span>
<span class="hljs-comment">//     registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',</span>
<span class="hljs-comment">//     capacity: 7</span>
<span class="hljs-comment">//   },</span>
<span class="hljs-comment">//   {</span>
<span class="hljs-comment">//     color: 'red',</span>
<span class="hljs-comment">//     type: 'station wagon',</span>
<span class="hljs-comment">//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',</span>
<span class="hljs-comment">//     capacity: 5</span>
<span class="hljs-comment">//   },</span>
<span class="hljs-comment">//   ...</span>
<span class="hljs-comment">// ]</span>
</code></pre>
<p>The <code>Array.sort</code> compares two objects and puts the first object in the second place if the result of the sorting function is positive. So you can look at the sorting function as if it was a question: Should the first object be placed in second place?</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/sort.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.</p>
<h3 id="heading-checking-if-objects-in-array-fulfill-a-condition-arrayevery-arrayincludes">Checking if objects in array fulfill a condition - Array.every, Array.includes</h3>
<p><code>Array.every</code> and <code>Array.some</code> come handy when we just need to check each object for a specific condition. </p>
<p>Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?</p>
<pre><code class="lang-js">cars.some(<span class="hljs-function"><span class="hljs-params">car</span> =&gt;</span> car.color === <span class="hljs-string">"red"</span> &amp;&amp; car.type === <span class="hljs-string">"cabrio"</span>);
<span class="hljs-comment">// output: true</span>

cars.every(<span class="hljs-function"><span class="hljs-params">car</span> =&gt;</span> car.capacity &gt;= <span class="hljs-number">4</span>);
<span class="hljs-comment">// output: false</span>
</code></pre>
<p>You may remember the function <code>Array.includes</code> which is similar to <code>Array.some</code>, but works only for primitive types.</p>
<h2 id="heading-summary">Summary</h2>
<p>In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.</p>
<p>If you have a use-case that requires more advanced functionality, take a look at <a target="_blank" href="https://www.freecodecamp.org/news/data-structures-101-arrays-a-visual-introduction-for-beginners-7f013bcc355a/">this detailed guide to arrays</a> or visit the <a target="_blank" href="https://www.w3schools.com/Jsref/jsref_obj_array.asp">W3 schools reference</a>.</p>
<p>Or <a target="_blank" href="https://twitter.com/ondrabus">get in touch with me</a> and I will prepare another article :-)</p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
