<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: samgotowka</title>
    <description>The latest articles on Forem by samgotowka (@samgotowka).</description>
    <link>https://forem.com/samgotowka</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F923705%2F41ca7527-9fc1-44e7-be55-664afc7c04fe.png</url>
      <title>Forem: samgotowka</title>
      <link>https://forem.com/samgotowka</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/samgotowka"/>
    <language>en</language>
    <item>
      <title>Phase 1 project at Flatiron</title>
      <dc:creator>samgotowka</dc:creator>
      <pubDate>Thu, 20 Oct 2022 19:37:22 +0000</pubDate>
      <link>https://forem.com/samgotowka/phase-1-project-at-flatiron-27go</link>
      <guid>https://forem.com/samgotowka/phase-1-project-at-flatiron-27go</guid>
      <description>&lt;p&gt;Before starting at flatiron I had absolutely no background or knowledge in coding/ programing at all. I knew it was going to be challenging but still possible to learn. Most of the content I was learning was very straight forward and simple in concept, but then came array iteration. Now after spending so much time trying to understand the concept on some of them its pretty simple. the part that was so difficult for me was what to put in after the array iterator. Hopefully this post can help someone else as I struggled to understand it and which to use &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;forEach:&lt;/strong&gt;&lt;br&gt;
a very simple example of using forEach that I personally used in my project is&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;storedBreeds&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;breed&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;option&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createElement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;option&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;breed&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;image&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="nx"&gt;option&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;
    &lt;span class="nx"&gt;option&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;breed&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
 &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;breed_selector&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;option&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
 &lt;span class="nx"&gt;showBreedImage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
for anyone that has not seen my project the forEach example in this is a method that iterates over every element in the array and finds every element(breed.image) that satisfies the condition and does whatever else you want it to do(create an option in the select menu and put the breed name as the option name)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;forEach in general iterates over the first element and then passes the callback function. After that is done it then loops through every element in order until reaches the last element in the array.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;filter:&lt;/strong&gt;&lt;br&gt;
By far the hardest form of array iteration for me to learn was the filter method. Yes you can use for loops to do this but using the filter method in javascript is much simpler. The concept its self is simple, it filters things out of the array, but actually filtering it was the hard part for me. &lt;/p&gt;

&lt;p&gt;A very simple example of this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;53&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;23&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;77&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;42&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;numbersGreaterThanFifty&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;numbersGreaterThanFifty&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Similar to the forEach method, filter also loops through every element in the array to filter out each element that satisfies the condition set. In this example, the array numbers is filled with a bunch of random numbers, then a new variable is created(numbersGreaterThanFifty) which is set equal to the numbers array uses the filter method to only put numbers greater than fifty in the new array returning 53,77,100.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;map:&lt;/strong&gt;&lt;br&gt;
For me personally the map method was the easiest to understand because it takes all the elements in the array and returns them under the conditions of the callback function&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const nums = [1,2,3,4]
const numDouble = nums.map((element)=&amp;gt; element * 2);

console.log(numDouble)

///////console//////
[2,4,6,8]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;like all the other array iteration methods, in this instance an anonymous function is passed through and goes to the first element and multiplies it by two then loops through every element until it reaches the end of the array. I know this isn't very technical but explaining it as simply as possible helped me better understand how to write array iteration methods and actually make it work. &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>flatiron</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>End of Phase 1 at Flatiron</title>
      <dc:creator>samgotowka</dc:creator>
      <pubDate>Fri, 09 Sep 2022 20:23:46 +0000</pubDate>
      <link>https://forem.com/samgotowka/end-of-phase-1-at-flatiron-4alb</link>
      <guid>https://forem.com/samgotowka/end-of-phase-1-at-flatiron-4alb</guid>
      <description>&lt;p&gt;When I Started learning the basics of JavaScript I thought it was going to be pretty straight forward and not require too much practicing but wow I was wrong. The hardest thing for me to learn by far was array iterations. For example I thought the .filter() method was as simple as someConst.filter(isPrime) and whatever else you wanted filtered, but no its like:&lt;br&gt;
const array= [1,2,3,4,5,6,]&lt;br&gt;
function isPrime(num) {&lt;br&gt;
   for (let i = 2;num &amp;gt; i; i++) {&lt;br&gt;
      if(num % i === 0){&lt;br&gt;
          return false;&lt;br&gt;
      }&lt;br&gt;
   }&lt;br&gt;
}&lt;br&gt;
console.log(array.filter(isPrime)); // [1,3,5]&lt;br&gt;
when I first saw this I was so lost and didn't really understand what was going on but now after really going back and re-reading the documents from my class and looking things up all over the internet I now know that it is basically creating a new variable then seeing if there is a remainder if there isn't, it does not get logged. &lt;/p&gt;

&lt;p&gt;well I guess that's all for my first blog about how I was completely wrong about how much work is needed to truly understand what you are coding and how to make it work the way its intended.&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
