<?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>DEV Community: Matt Thacker</title>
    <description>The latest articles on DEV Community by Matt Thacker (@mthacker09).</description>
    <link>https://dev.to/mthacker09</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%2F172476%2Fd659c6a9-6403-4f7b-95c9-b08e3c385163.jpg</url>
      <title>DEV Community: Matt Thacker</title>
      <link>https://dev.to/mthacker09</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mthacker09"/>
    <language>en</language>
    <item>
      <title>Working With APIs in Microsoft's Power BI</title>
      <dc:creator>Matt Thacker</dc:creator>
      <pubDate>Thu, 09 Sep 2021 11:22:23 +0000</pubDate>
      <link>https://dev.to/mthacker09/working-with-apis-in-microsoft-s-power-bi-59pa</link>
      <guid>https://dev.to/mthacker09/working-with-apis-in-microsoft-s-power-bi-59pa</guid>
      <description>&lt;p&gt;Microsoft's Power BI is a powerful tool for data analysis and data visualization. For all of it's shortcomings, one of its most appealing features is its accessibility; from the individual to corporate enterprise integration.&lt;/p&gt;

&lt;p&gt;In the recent weeks, I've encountered a similar question accross forums and that is: &lt;em&gt;How do I work with an API in Power BI?&lt;/em&gt; Hence, the purpose of this post!&lt;/p&gt;

&lt;p&gt;There are a couple of ways to work with APIs in Power BI, but the method that I reach for most is Python's Request module. Below, we'll step through the process of installing the necessary Python packages, enabling Python in Power BI, and getting data from the US Federal Election Commission's API.&lt;/p&gt;

&lt;h2&gt;
  
  
  Installing the Necessary Python Packages
&lt;/h2&gt;

&lt;p&gt;For the purposes of this post, I'm assuming you already have Python installed on your computer. If not, you can download the latest version from &lt;a href="https://www.python.org/downloads/" rel="noopener noreferrer"&gt;Python's&lt;/a&gt; website.&lt;/p&gt;

&lt;p&gt;The two main Python packages you will need is Requests and Pandas. Both Requests and Pandas can be installed using pip install. You can install both libraries with the same pip install command by seperating the two with a space.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18ilbe7wsmg7f9g025mk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18ilbe7wsmg7f9g025mk.png" alt="pip" width="800" height="132"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next, you'll want to make sure your Power BI is pointed to the correct file path to run Python scripts. Open a new instance of Power BI and navigate to &lt;em&gt;File&lt;/em&gt; and &lt;em&gt;Options and settings&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/GH8V78R5fnuUjmlmn2/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/GH8V78R5fnuUjmlmn2/giphy.gif" width="480" height="352"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  Constructing the API Request
&lt;/h2&gt;

&lt;p&gt;The next step is to construct the API request. I normally start writing my API request in a code editor before running it as a script in Power BI. Again, we'll be using the US Federal Election Commission's API for this GET request. It is an open API but you will need to create an account to obtain and API key, which you can do at the &lt;a href="https://api.open.fec.gov/developers/" rel="noopener noreferrer"&gt;FEC&lt;/a&gt; website.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;pandas&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;pd&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We start by importing the necessary libraries to our Python file. If you're interested in learning more about the respective libraries, you can find the full documentation at &lt;a href="https://docs.python-requests.org/en/master/" rel="noopener noreferrer"&gt;Requests&lt;/a&gt; and &lt;a href="https://pandas.pydata.org/docs/index.html" rel="noopener noreferrer"&gt;Pandas&lt;/a&gt;. It's convention to import pandas with the alias of &lt;strong&gt;pd&lt;/strong&gt; to prevent having to write &lt;em&gt;pandas&lt;/em&gt; everytime we want to use it.&lt;/p&gt;

&lt;p&gt;Next, we'll assign our API key to a variable, &lt;code&gt;key&lt;/code&gt;. In most instances you can create an API request with just a couple lines of code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;key&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;some_key&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;

&lt;span class="n"&gt;url&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;https://api.open.fec.gov/v1/candidates/?api_key=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;key&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;&amp;amp;page=1&amp;amp;sort_hide_null=false&amp;amp;sort_null_only=false&amp;amp;sort_nulls_last=false&amp;amp;per_page=100&amp;amp;sort=name&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;

&lt;span class="n"&gt;r&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's it. That is all you need to make a GET request to an API. Most APIs are stored in the form of JSON files, that is why we need the &lt;code&gt;.json()&lt;/code&gt; method. Make sure to read the documentation for the API you're using. It will describe how the data will returned to you. &lt;/p&gt;

&lt;p&gt;For this API call, we're going to write it a bit different. The FEC API results are paginated; meaning the results are returned as a per page. We're going to utilize a &lt;code&gt;for&lt;/code&gt; loop to retreive the first 500 results (100 per page, which you can see is a parameter in the url string).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fksolunydoqebvsmio3rk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fksolunydoqebvsmio3rk.png" alt="python_code" width="800" height="339"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The code above creates a function called &lt;strong&gt;api_call&lt;/strong&gt; that accepts a parameter &lt;code&gt;num&lt;/code&gt; and performs the basic GET request from earlier, substituting the page number in the url string with the parameter that's passed into the api_call function. Below is what is returned when we make the GET request.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"api_version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"pagination"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"per_page"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"count"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;44523&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"pages"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2227&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"page"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"results"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"state"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"US"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"candidate_status"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"N"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"last_file_date"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"2021-05-05"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"federal_funds_flag"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"load_date"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"2021-07-27T06:29:31+00:00"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"party"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"PAF"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"cycles"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="mi"&gt;2022&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We want the &lt;code&gt;results&lt;/code&gt; key, so we will store that in a DataFrame object. This is where Pandas comes into play. Power BI works best with Pandas' DataFrames. Within the &lt;strong&gt;api_call&lt;/strong&gt; function, we store each request in a variable &lt;code&gt;df&lt;/code&gt; and return that variable.&lt;/p&gt;

&lt;p&gt;Next, we'll create a for loop to loop through the first 5 pages and append each result to an empty list called &lt;strong&gt;frames&lt;/strong&gt;. After the for loop has ran, we'll create a new variable to store the final DataFrame and use the &lt;code&gt;.concat()&lt;/code&gt; method and pass in the frames list. Using the &lt;code&gt;.concat()&lt;/code&gt; method without an &lt;code&gt;axis&lt;/code&gt; kwarg will append the DataFrames to one another.&lt;/p&gt;

&lt;p&gt;We'll run &lt;code&gt;df_final.info()&lt;/code&gt; to see the results:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fceghz7bk172iohrilase.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fceghz7bk172iohrilase.png" alt="DataFrame results" width="800" height="1061"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And...it worked! We can see we have 500 entries contained in this DataFrame.&lt;/p&gt;

&lt;p&gt;Our last step is to take that code and paste it into Power BI.&lt;/p&gt;

&lt;p&gt;In Power BI, click Get Data, and type Python as the data source. The Python script editor will open and you can paste your code into that editor and click okay.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjedc811zygr4qjk8ayxo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjedc811zygr4qjk8ayxo.png" alt="Power BI" width="800" height="487"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After the script has run, we'll get the Power Query Navigator to select which data we want to load. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp2obx08eaos9k1de877a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp2obx08eaos9k1de877a.png" alt="Power Query Navigator" width="800" height="487"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We'll Transform Data to open in the Power Query Editor and make any ETL adjustments needed.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm3ez661cnpr1zhta59b1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm3ez661cnpr1zhta59b1.png" alt="Power Query Editor" width="800" height="508"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And that is it. If you look at the source step in the Power Query editor, you'll see your Python script is stored. Which means each time you refresh the data, the script will run the API request again and produce the most up to date information.&lt;/p&gt;

&lt;h2&gt;
  
  
  Practice
&lt;/h2&gt;

&lt;p&gt;For a fun project to go your skills, use the &lt;code&gt;pagination&lt;/code&gt; key in the oringial result and extract the count of total pages in the request. Use that as the top end of your for loop to retreive &lt;strong&gt;&lt;em&gt;ALL&lt;/em&gt;&lt;/strong&gt; the data.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;I hope you've found this at least somewhat helpful. I love working with APIs, it's really want got me into coding in the first place.&lt;/p&gt;

&lt;p&gt;Also, I don't write a lot, but I woould love to start doing this more. I'd love feedback on content and writing style, tips and tricks, whatever.&lt;/p&gt;

&lt;p&gt;Happy coding!!&lt;/p&gt;

</description>
      <category>python</category>
      <category>codenewbie</category>
      <category>powerbi</category>
      <category>api</category>
    </item>
    <item>
      <title>List.Accumulate()</title>
      <dc:creator>Matt Thacker</dc:creator>
      <pubDate>Sun, 29 Nov 2020 08:24:57 +0000</pubDate>
      <link>https://dev.to/mthacker09/list-accumulate-25di</link>
      <guid>https://dev.to/mthacker09/list-accumulate-25di</guid>
      <description>&lt;h2&gt;
  
  
  Power Query's M Language's Equivalent to JavaScript's &lt;em&gt;Reduce&lt;/em&gt;
&lt;/h2&gt;

&lt;h3&gt;
  
  
  A Quick Intro...
&lt;/h3&gt;

&lt;p&gt;If you're not familiar with the Microsoft Power Platforms, Microsoft Power has two incredibly rich, robust, and dynamic languages that, when working in tandem, can create some of the most sophisticated data processing tools available to the average end-user. These languages are M (Power Query) and DAX (Power Pivot, Power BI, etc.)&lt;/p&gt;

&lt;p&gt;I wanted to start this first post with a really powerful function in M called the:&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;function&lt;/span&gt; &lt;span class="nf"&gt;List&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Accumulate&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The reason I wanted to showcase this M function first is because it behaves exactly like JavaScript's array.Reduce() method. It's been my experience that there are a lot of people whom have dedicated their time to master languages like M and DAX and are deemed 'not real coders.' It's my goal to get that one Excel guru who doesn't think he knows enough to learn to program to see it's really just about syntax.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;u&gt;List.Accumulate()&lt;/u&gt;
&lt;/h2&gt;

&lt;p&gt;I think the easiest way to understand List.Accumulate is to break it down from its technical definition, whish is;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Accumulates a summary value from the items in the list, using accumulator. An optional seed parameter, seed, may be set.&lt;/em&gt; -Microsoft Docs&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Or, even better, the Syntax description:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;List.Accumulate(list as list, seed as any, accumulator as function) as any
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fimwjcojbxkz5hzlr2iz6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fimwjcojbxkz5hzlr2iz6.png" alt="Default" width="800" height="145"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Yes, while each of these are true, &lt;strong&gt;what in the world does it say?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Here's the way it's easiest for me to remember it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;'list as list' - A list in M is the equivalent to an array in JavaScript and is created by wrapping a list of items within { }&lt;/li&gt;
&lt;li&gt;'seed as any' - This is your starting point (I'll explain this part later)&lt;/li&gt;
&lt;li&gt;'accumulator as function' - This is a function that takes two parameters and executes the code within the function&lt;/li&gt;
&lt;li&gt;And finally reduces that list down to one value&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Below, I've written out a very basic List.Accumulate function in Power Query;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fd9li99vw8yb2h2hgma32.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fd9li99vw8yb2h2hgma32.png" alt="updated" width="800" height="162"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The List = {10, 20, 30, 40, 50}&lt;br&gt;
Seed (or starter) = 0&lt;br&gt;
Accumulator Function = (state, current) &lt;em&gt;two parameters&lt;/em&gt; =&amp;gt; state + current (add the two parameters together)&lt;/p&gt;
&lt;h2&gt;
  
  
  &lt;u&gt;Array.Reduce()&lt;/u&gt;
&lt;/h2&gt;

&lt;p&gt;The Reduce method in JavaScript is a perfect way to step through each individual step of what's happening with List.Accumulate.&lt;/p&gt;

&lt;p&gt;In the snippet below, &lt;code&gt;a&lt;/code&gt; is a variable with an array assigned to it (same numbers as the previous example).&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;let&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;40&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next is a function called totalA that also takes two parameters, state and current. Only now, I've &lt;code&gt;console.logged&lt;/code&gt; both state and current so we can see what happens through each iteration of the function.&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;function&lt;/span&gt; &lt;span class="nf"&gt;totalA&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;current&lt;/span&gt;&lt;span class="p"&gt;)&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`State is equal to &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;state&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Current is equal to &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;current&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&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="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;current&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;p&gt;Lastly, a new variable &lt;code&gt;c&lt;/code&gt; to hold the reduce method. Here, reduce is taking two arguments: the callback function &lt;code&gt;totalA&lt;/code&gt; and a second, optional, argument of 0.&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;let&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;reduce&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;totalA&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fywgqmsb229zl1ysd9dp6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fywgqmsb229zl1ysd9dp6.png" alt="with zero" width="800" height="1066"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is why that optional second argument in the reduce method makes a difference: it changes the starting point of your function. With the 0, that 0 is passed as the first value into &lt;code&gt;state&lt;/code&gt; and &lt;code&gt;current&lt;/code&gt; is passed the first value of the array (10). Without the 0, the 10 is passed as the value of &lt;code&gt;state&lt;/code&gt; and 20 as the value of &lt;code&gt;current&lt;/code&gt;. (&lt;strong&gt;Worth noting, the starting value is not optional in List.Accumulate&lt;/strong&gt;)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fmx67kdlsd9lyrd1lzqrg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fmx67kdlsd9lyrd1lzqrg.png" alt="without zero" width="800" height="1051"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But remember, the callback function is returning the state + current through every itteration, just like with the List.Accumulate.&lt;/p&gt;

&lt;p&gt;I hope some of you found this helpful. Hope everyone is having a great weekend!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>dax</category>
      <category>data</category>
      <category>beginners</category>
    </item>
    <item>
      <title>JavaScript - Map &amp; Filter</title>
      <dc:creator>Matt Thacker</dc:creator>
      <pubDate>Tue, 23 Jul 2019 11:45:48 +0000</pubDate>
      <link>https://dev.to/mthacker09/javascript-map-filter-4g86</link>
      <guid>https://dev.to/mthacker09/javascript-map-filter-4g86</guid>
      <description>&lt;p&gt;I must start by saying I love the .map, .filter, and .reduce methods in Javascript. However, for quite sometime, and still now, I occasionally find myself flipping back to MDN or W3 to look something up. That’s why I decided my next post would be a walkthrough to make me better remember these amazing tools. &lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;&lt;em&gt;.Map() Method&lt;/em&gt;&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The JavaScript Map method iterates over every element in an array and returns a new array with the result. The &lt;code&gt;.map()&lt;/code&gt; and &lt;code&gt;.forEach()&lt;/code&gt; methods appear to have the same functionality; the key difference is &lt;code&gt;.map()&lt;/code&gt; ability to return a new a new array. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Syntax&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The textbook syntax for the &lt;code&gt;.map()&lt;/code&gt; method is &lt;code&gt;array.map(callbackFunction(currentValue, index, arr), thisValue)&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Let's take each element by itself:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;array&lt;/em&gt; - any JavaScript array, i.e. &lt;code&gt;let myArr = [1,2,3,4,5]&lt;/code&gt; &lt;/li&gt;
&lt;li&gt;
&lt;em&gt;map()&lt;/em&gt; - the method being called on &lt;em&gt;myArr&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;callbackFunction&lt;/em&gt; - a function, either name, anonymous, or arrow, that will iterate over each item in &lt;em&gt;myArr&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;index&lt;/em&gt; -  (&lt;strong&gt;OPTIONAL&lt;/strong&gt;) the index of the element in the array being processed &lt;/li&gt;
&lt;li&gt;
&lt;em&gt;arr&lt;/em&gt; -  (&lt;strong&gt;OPTIONAL&lt;/strong&gt;) the array the map method is being called on&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;thisValue&lt;/em&gt; -  (&lt;strong&gt;OPTIONAL&lt;/strong&gt;) value to use for &lt;code&gt;this&lt;/code&gt; when executing the callback (we'll get to &lt;code&gt;this&lt;/code&gt; at a later post)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As I said, the above syntax is "textbook." Below are three simple ways to utilize the &lt;code&gt;.map()&lt;/code&gt; method. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffjlm1s7g9ka9tncf5dkf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffjlm1s7g9ka9tncf5dkf.png" width="800" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;var b&lt;/code&gt; utilizes an anonymous function&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;var c&lt;/code&gt; utilizes a named function&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;var d&lt;/code&gt; utilizes an arrow function&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The &lt;code&gt;.map()&lt;/code&gt; method does not mutate the original array. In the code above, &lt;code&gt;a&lt;/code&gt; still evaluates to &lt;code&gt;[1,2,3,4,5]&lt;/code&gt;. If you are not using the new array or if you are not returning any values from the callback, &lt;code&gt;.forEach&lt;/code&gt; is probably the better option to use.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;&lt;em&gt;.Filter() Method&lt;/em&gt;&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;.filter()&lt;/code&gt; method, like &lt;code&gt;.map()&lt;/code&gt;, returns a new array from the criteria passed to each item of the original array. &lt;code&gt;Filter&lt;/code&gt; also uses a callback function. The best way for me to process how the callback function in &lt;code&gt;.filter()&lt;/code&gt; works is, the callback function is criteria that each item of the array is checked against. If the item evaluates to true, that item is "filtered" into the new array.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Syntax&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The syntax for the &lt;code&gt;.filter()&lt;/code&gt; method is the same as &lt;code&gt;.map()&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;array.filter(callbackFunction(currentValue, index, arr), thisValue)&lt;/code&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;array&lt;/em&gt; - any JavaScript array, i.e. &lt;code&gt;let myArr = [1,2,3,4,5]&lt;/code&gt; &lt;/li&gt;
&lt;li&gt;
&lt;em&gt;filter()&lt;/em&gt; - the method being called on &lt;em&gt;myArr&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;callbackFunction&lt;/em&gt; - a function, either name, anonymous, or arrow, that will iterate over each item in &lt;em&gt;myArr&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;index&lt;/em&gt; -  (&lt;strong&gt;OPTIONAL&lt;/strong&gt;) the index of the element in the array being processed &lt;/li&gt;
&lt;li&gt;
&lt;em&gt;arr&lt;/em&gt; -  (&lt;strong&gt;OPTIONAL&lt;/strong&gt;) the array the map method is being called on&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;thisValue&lt;/em&gt; -  (&lt;strong&gt;OPTIONAL&lt;/strong&gt;) value to use for &lt;code&gt;this&lt;/code&gt; when executing the callback (we'll get to &lt;code&gt;this&lt;/code&gt; at a later post)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Again, below are different examples utilizing the &lt;code&gt;.filter()&lt;/code&gt; method:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy7x0n3i01jrj6d2b5q2j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy7x0n3i01jrj6d2b5q2j.png" width="800" height="496"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One thing to note, as I said, &lt;code&gt;filter&lt;/code&gt; returns a new array EVEN IF no items in the original array meet the criteria. If no items pass, an empty array is returned.&lt;/p&gt;

&lt;p&gt;Below is an example in which &lt;code&gt;Filter&lt;/code&gt; could be used in a real-life example:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fniwcysr2ctcbalmbrfkw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fniwcysr2ctcbalmbrfkw.png" width="800" height="555"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here, an array of cities is listed (even though this is a short array, the concept can be extrapolated with larger Fetch requests). Next is a function that takes an array and searches​ criteria as arguments and returns a filtered array based on the &lt;code&gt;search&lt;/code&gt; parameter. In this example, the &lt;code&gt;cities&lt;/code&gt; array is being passed, and being asked to return all cities in that array that contain the letter "a".&lt;/p&gt;




&lt;p&gt;There is another method that is typically paired when talking about &lt;code&gt;map&lt;/code&gt; and &lt;code&gt;filter&lt;/code&gt; and that's &lt;code&gt;reduce&lt;/code&gt;. However, there's a lot to the &lt;code&gt;reduce&lt;/code&gt; method and I think it deserves its own post.&lt;/p&gt;

&lt;p&gt;With that, I hope someone finds this tutorial helpful, as I certainly did. I've only been posting a short time, but I've already found myself coming back to my post on destructuring to keep it fresh in my mind. &lt;/p&gt;

&lt;p&gt;As always, happy coding!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>codenewbie</category>
      <category>explainlikeimfive</category>
    </item>
    <item>
      <title>ES6 - *Destructuring the Good Parts!*</title>
      <dc:creator>Matt Thacker</dc:creator>
      <pubDate>Sat, 06 Jul 2019 05:01:30 +0000</pubDate>
      <link>https://dev.to/mthacker09/es6-destructuring-the-good-parts-37ci</link>
      <guid>https://dev.to/mthacker09/es6-destructuring-the-good-parts-37ci</guid>
      <description>&lt;p&gt;I've been learning JavaScript for a couple of months now. To break up tutorials and reading, I love trying my hand at coding challenges. I have decent success in completing the challenges, however, my code will usually be 3 to 4(x's) longer than the solution others come up with. And if we're being honest, I didn't have the &lt;strong&gt;slightest&lt;/strong&gt; clue as to what most of the code base for the solutions were doing.&lt;/p&gt;

&lt;p&gt;Recently, I started learning some of the additions to ES6 and I'm not sure how I've made it this far without knowing several of these. Some I really struggled to understand and I probably still don't FULLY grasp the technical aspect or the full capabilities but this is why I'm writing this. I last posted that I wanted to use my learning as a resource to help others that struggle in learning the same way that I do. &lt;/p&gt;

&lt;p&gt;I debated on what to start posting about, and I've finally decided to start a series of posts about, what I think are, the best parts of ES6. &lt;/p&gt;

&lt;h2&gt;
  
  
  Let's Get &lt;em&gt;Destructuring {Objects}&lt;/em&gt;!
&lt;/h2&gt;

&lt;p&gt;What is destructuring? It's essentially a fancy term for being able to pull out a value(s) from an array or properties from an object and save it to a variable. A lot of the coding challenges I've completed have some variation that required this task in order to fulfill its requirements. &lt;/p&gt;

&lt;p&gt;This is how I've always completed extracting values from arrays and objects before:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3a8outh1242h2rkm319w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3a8outh1242h2rkm319w.png" width="800" height="339"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If we &lt;code&gt;console.log(myName)&lt;/code&gt; we'll get the value "Matt" for the name property.&lt;/p&gt;

&lt;p&gt;Because I have nested objects, if I wanted to get the value for my favorite Premier League soccer team, I'd need to create a variable that held &lt;code&gt;myObj.likes.soccer.Premier&lt;/code&gt;. And I'd have to do that twice to get my two favorite soccer teams.&lt;/p&gt;

&lt;p&gt;With destructuring, we can cut down on the repetitiveness of the code.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfd0jqgdr2lkadjq4yrl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfd0jqgdr2lkadjq4yrl.png" width="800" height="484"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here, I'm essentially creating two variables &lt;code&gt;FIFA&lt;/code&gt; and &lt;code&gt;Premier&lt;/code&gt; that are the property names within the nested object. We can go a step further and assign the values to our own created variable names by assigning the variable name after the property name: &lt;code&gt;const {propertyName:newVar} = object&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiqye5i4fhiurkf4nt4xl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiqye5i4fhiurkf4nt4xl.png" width="800" height="340"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Destructuring is a much more effecient way of extracting values out of objects.&lt;/p&gt;

&lt;p&gt;Hope this helps someone, because I feel like I understand it more now that I've sat down and written this. Happy Coding!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>codenewbie</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
