<?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: Naftali Murgor</title>
    <description>The latest articles on DEV Community by Naftali Murgor (@naftalimurgor).</description>
    <link>https://dev.to/naftalimurgor</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%2F432779%2F0211b7e3-2aba-4e02-8464-a23b4e2dfe70.jpg</url>
      <title>DEV Community: Naftali Murgor</title>
      <link>https://dev.to/naftalimurgor</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/naftalimurgor"/>
    <language>en</language>
    <item>
      <title>Running a Full Bitgesell Node on Raspberry Pi (5/ 4 Model B)</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Sat, 08 Mar 2025 05:40:01 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/running-a-full-bitgesell-node-on-raspberry-pi-5-4-model-b-4536</link>
      <guid>https://dev.to/naftalimurgor/running-a-full-bitgesell-node-on-raspberry-pi-5-4-model-b-4536</guid>
      <description>&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%2Figa6iliu92hwm0azbw8a.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%2Figa6iliu92hwm0azbw8a.png" alt="Docker logo" width="500" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Running a full Bitgesell node on a Raspberry Pi is now easier than ever! With a pre-built Docker image, you can get up and running without the hassle of compiling Bitgesell Core from source. Whether you have a previous Raspberry Pi model or the latest one, follow this guide to set up your node quickly and efficiently.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Run a Bitgesell Node on Raspberry Pi?
&lt;/h2&gt;

&lt;p&gt;Raspberry Pi devices are energy-efficient and cost-effective, making them perfect for running a Bitgesell node. A node helps verify transactions, maintain decentralization, and support the Bitgesell network.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites (1/2):
&lt;/h2&gt;

&lt;p&gt;Before getting started with Bitgesell full node on your Raspberry Pi, ensure you have:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; A single-board computer like Raspberry Pi (any model supporting ARM architecture)&lt;/li&gt;
&lt;li&gt;At least &lt;strong&gt;10 GB&lt;/strong&gt; of storage space (grows over time as blockchain expands)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;500 MB RAM&lt;/strong&gt; + &lt;strong&gt;1 GB swap file&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;A stable internet connection for syncing and communication with other nodes&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Prerequisites (2/2)
&lt;/h2&gt;

&lt;h3&gt;
  
  
  3. Setting Up Your Raspberry Pi
&lt;/h3&gt;

&lt;p&gt;Before running the node, set up your Raspberry Pi by following this &lt;a href="https://www.tomshardware.com/how-to/set-up-raspberry-pi" rel="noopener noreferrer"&gt;setup guide&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Installing Docker on Raspberry Pi
&lt;/h3&gt;

&lt;p&gt;Docker simplifies the deployment process. Install Docker on your Raspberry Pi using this &lt;a href="https://www.simplilearn.com/tutorials/docker-tutorial/raspberry-pi-docker" rel="noopener noreferrer"&gt;quick guide&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Quick Start with Docker
&lt;/h3&gt;

&lt;p&gt;Once Docker is set up, follow these steps to run your Bitgesell node.&lt;/p&gt;

&lt;p&gt;Once the above are set, let's now set up a full Bitgesell Node on our Raspberry PI!&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Pull the Docker Image
&lt;/h3&gt;

&lt;p&gt;Run the following command on your Raspberry Pi to download the pre-built Bitgesell node image:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker pull naftalimurgor/bgld-arm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. Run the Bitgesell Node
&lt;/h3&gt;

&lt;p&gt;Start the node using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; docker run &lt;span class="nt"&gt;-dp&lt;/span&gt; 8454:8454 naftalimurgor/bgld-arm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command maps the necessary ports and runs the node in detached mode.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Quick One-Liner Setup (Ubuntu 20.04 LTS)
&lt;/h3&gt;

&lt;p&gt;If you are running Ubuntu 20.04 LTS on your Raspberry Pi, you can set up your node with a single command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl https://raw.githubusercontent.com/naftalimurgor/bgld-arm-docker/master/bootstrap-host.sh | sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This script enables JSON-RPC on localhost and adds an upstart init script for auto-starting the node.&lt;/p&gt;

&lt;h2&gt;
  
  
  Verifying Your Node
&lt;/h2&gt;

&lt;p&gt;Once your node is running, confirm its status with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker ps
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This should output details about the running container, including its status and mapped ports:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CONTAINER ID   IMAGE                COMMAND   CREATED         STATUS         PORTS                                                 NAMES
304e5a74a539   naftalimurgor/bgld-arm   "bgld-arm"    5 seconds ago   Up 3 seconds   0.0.0.0:8454-&amp;gt;8454/tcp, :::8454-&amp;gt;8454/tcp, 8455/tcp   naughty_greider
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Monitoring Node Logs
&lt;/h2&gt;

&lt;p&gt;Check real-time logs of your Bitgesell node with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker logs &lt;span class="nt"&gt;-f&lt;/span&gt; bgld-arm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Additional Setup
&lt;/h2&gt;

&lt;p&gt;For optional init scripts (Upstart and systemd), check the &lt;code&gt;init&lt;/code&gt; directory in the repository.&lt;/p&gt;

&lt;h2&gt;
  
  
  Documentation
&lt;/h2&gt;

&lt;p&gt;For more details and advanced configurations, visit the &lt;a href="https://github.com/naftalimurgor/bgld-arm/tree/main/docs" rel="noopener noreferrer"&gt;documentation folder&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;Setting up a Bitgesell node on a Raspberry Pi is now easier than ever with Docker. Whether you're using an older model or the latest Raspberry Pi, follow this guide to contribute to the decentralization of the Bitgesell network effortlessly!&lt;/p&gt;

</description>
      <category>blockchain</category>
      <category>programming</category>
      <category>devops</category>
      <category>aws</category>
    </item>
    <item>
      <title>Introduction JavaScript code guidelines</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Wed, 23 Mar 2022 07:51:57 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/introduction-javascript-code-guidelines-5a8i</link>
      <guid>https://dev.to/naftalimurgor/introduction-javascript-code-guidelines-5a8i</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In this tutorial, we shall learn about how I structure and how to structure and format JavaScript code for your projects.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Semi-colons
&lt;/h2&gt;

&lt;p&gt;The choice is to drop all semi-colons usage because it adds to so much typing for little benefit and makes the codebase look 'ugly' and cluttered. The second choice about semicolons is to stick to them if an existing project uses them to keep the consistency. &lt;/p&gt;

&lt;p&gt;JavaScript doesn't explicitly require semi-colons like say, in Java or C and C++. However, one may run into issues if one, for some reason does the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;addition&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&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;sum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="c1"&gt;// will return undefined due to automatic semicolon insertion&lt;/span&gt;
  &lt;span class="nx"&gt;sum&lt;/span&gt; &lt;span class="c1"&gt;// value will be ignored&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  2. Single and double quotes
&lt;/h2&gt;

&lt;p&gt;Single quotes for regular strings and Double quotes for &lt;code&gt;HTML&lt;/code&gt; and &lt;code&gt;JSX&lt;/code&gt;. Use &lt;code&gt;backticks&lt;/code&gt; when need to use interpolation in string templates. Template literals provide powerful ways of doing string interpolation, and usage is not limited to the trivial example above.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// this:&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;App running on PORT&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;PORT&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;// becomes:&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="s2"&gt;`App is running on PORT &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;PORT&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="c1"&gt;// or better still:&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;apiEndpoint&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`http://api.awsomeness.com/v1/api_key=&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;API_KEY&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/`&lt;/span&gt;
&lt;span class="c1"&gt;// instead of &lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;apiEndpoint&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http://api.awsomeness.com/v1/api_key=&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="nx"&gt;API_KEY&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  3. Indentation
&lt;/h2&gt;

&lt;p&gt;Spaces over tabs. with tab-size of two spaces improves readability.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Structure
&lt;/h2&gt;

&lt;p&gt;Every statement goes into its line and every related block is grouped together and separated by a blank line to improve readability and group logical blocks of code together.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Variable naming and naming conventions
&lt;/h2&gt;

&lt;p&gt;Use PascalCase (lowerPascalCase in this case) for variable and function names and starting class names with Capital letters. This convention follows the following style:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;lowerPascalCase - first letter in the variable name to be lower case and the preceding words to be in uppercase
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;carModels&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Nissan FB15&lt;/span&gt;&lt;span class="dl"&gt;'&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;userId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;400&lt;/span&gt;
&lt;span class="c1"&gt;// versus&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user_id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;500&lt;/span&gt; &lt;span class="c1"&gt;// meh&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The best approach is to use descriptive function names that clearly show the intent of the code at a glance.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;These are basic conventions I use regularly, however, most projects have popular guides with help of plugins such as &lt;a href="https://prettier.io/"&gt;Prettier&lt;/a&gt; formatter and &lt;a href="https://eslint.org/"&gt;Eslint&lt;/a&gt; linter to handle the formatting based on such guides. Formatter does the code formatting while linter catches imminent bugs. Setting up each of these is subject to a future article. &lt;/p&gt;

&lt;p&gt;Read more about the common conventions from the &lt;a href="https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/JavaScript"&gt;MDN&lt;/a&gt; docs.&lt;/p&gt;

&lt;p&gt;Some popular style guides:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="http://github.com/airbnb/javascript/"&gt;Airbnb&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="http://github.com/rwaldron/idiomatic.js/"&gt;Idiomatic.js&lt;/a&gt; &lt;/li&gt;
&lt;li&gt;
&lt;a href="https://google.github.io/styleguide/jsguide.html"&gt;Google JavaScript Style Guide&lt;/a&gt; &lt;/li&gt;
&lt;li&gt;&lt;a href="https://doc.codingdict.com/npm-ref/misc/coding-style.html"&gt;NPM "funny style"&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;While it might not be a must to use a style guide, maintaining consistency across the codebase is not only helpful but useful to the next developer who will be working on the codebase, say after 6 months or even 3 years later.&lt;/p&gt;




&lt;p&gt;Found this article helpful? You may follow me on Twitter &lt;a href="https://twitter.com/nkmurgor"&gt;@nkmurgor&lt;/a&gt; where I tweet about interesting topics on web development or follow more topics on web development at &lt;a href="https://https://naftalimurgor.com"&gt;naftalimurgor&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Truthy and Falsy values in JavaScript</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Tue, 22 Feb 2022 23:19:54 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/truthy-and-falsy-values-in-javascript-458p</link>
      <guid>https://dev.to/naftalimurgor/truthy-and-falsy-values-in-javascript-458p</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In this article, we shall learn about the concept of Truthy and Falsy values in JavaScript and why this concept is useful. Let's jump in!&lt;/p&gt;

&lt;h2&gt;
  
  
  What are truthy values?
&lt;/h2&gt;

&lt;p&gt;Truthy values are values that evaluate to &lt;code&gt;boolean&lt;/code&gt; in a conditional such as &lt;code&gt;if..else&lt;/code&gt; and &lt;code&gt;switch...case&lt;/code&gt;. In Computer Science, a Boolean is a logical data type that can only hold the value of &lt;code&gt;true&lt;/code&gt; or &lt;code&gt;false&lt;/code&gt;. Booleans are often used in conditionals like &lt;code&gt;if...else&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;boolean&lt;/span&gt; &lt;span class="nx"&gt;conditional&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// code to be executed if conditional is true&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// if boolean conditional resolves to false&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Truthy values are values that resolve to &lt;code&gt;true&lt;/code&gt; when used in conditionals.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Truthy values in JavaScript
&lt;/h3&gt;

&lt;p&gt;JavaScript treats the following values as Truthy:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;true&lt;/code&gt; - A boolean of value &lt;code&gt;true&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;{}&lt;/code&gt; value of an object with no &lt;code&gt;properties&lt;/code&gt;, declared using Object literal&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;[]&lt;/code&gt; an empty array&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;51&lt;/code&gt; any non-zero number, including negative and positive numbers&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;"0"&lt;/code&gt; any non-empty string&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;new Date()&lt;/code&gt; any value constructed from the &lt;code&gt;Date&lt;/code&gt; object
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&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="c1"&gt;// evaluates to true&lt;/span&gt;
&lt;span class="k"&gt;if&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="c1"&gt;// evaluates to true&lt;/span&gt;
&lt;span class="k"&gt;if&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="c1"&gt;// evaluates to true&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;51&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="c1"&gt;// evaluates to true, negative and positive numbers except zero&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;0&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{...}&lt;/span&gt;&lt;span class="c1"&gt;// any string value execept an empty string&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="p"&gt;{...}&lt;/span&gt; &lt;span class="c1"&gt;// value constructed from the Date Object&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Why are Truthy values important?
&lt;/h3&gt;

&lt;p&gt;Consider the following example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;updateKeys&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;keys&lt;/span&gt; &lt;span class="o"&gt;=&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="c1"&gt;// this will resolve to true always for both an empty keys argument and nonempty&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;keys&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;p&gt;An array with no elements will evaluate to true, hence the &lt;code&gt;if(toDoItems) {...}&lt;/code&gt; will always evaluate to &lt;code&gt;true&lt;/code&gt; and execute for both empty and none empty arrays.&lt;/p&gt;

&lt;h3&gt;
  
  
  What are falsy values
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;Falsy values are values that resolve to &lt;code&gt;false&lt;/code&gt; when used in conditionals.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Falsy values in JavaScript
&lt;/h3&gt;

&lt;p&gt;JavaScript treats the following values as Falsy:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;false&lt;/code&gt; - A boolean of value &lt;code&gt;false&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;"", ''&lt;/code&gt; value of an object with no &lt;code&gt;properties&lt;/code&gt;, declared using Object literal&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;null&lt;/code&gt;, a value of &lt;code&gt;null&lt;/code&gt;, no vale given&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;undefined&lt;/code&gt;, a value of a variable not assigned to a value&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;NaN&lt;/code&gt; a value representing &lt;code&gt;Not-A-Number&lt;/code&gt;, usually as a result of adding a value of type &lt;code&gt;number&lt;/code&gt; to the value of a non-number &lt;code&gt;8&lt;/code&gt; + &lt;code&gt;1&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;0&lt;/code&gt; a value of number zero
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;if&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="c1"&gt;// evaluates to true&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{...}&lt;/span&gt;&lt;span class="c1"&gt;// evaluates to true&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{...}&lt;/span&gt;&lt;span class="c1"&gt;// evaluates to true&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{...}&lt;/span&gt;&lt;span class="c1"&gt;// evaluates to true, negative and positive numbers except zero&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;NaN&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{...}&lt;/span&gt;&lt;span class="c1"&gt;// any string value execept an empty string&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Considering falsy values, it's more beautiful for instance to do this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;  &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userName&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;p&gt;And not this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;username&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&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;span class="c1"&gt;// or worse still&lt;/span&gt;
 &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;txString&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="kc"&gt;undefined&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;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;JavaScript has a set of truthy values and falsy values that are important to know:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Evaluating  an empty array, will always evaluate to &lt;code&gt;true&lt;/code&gt; in a conditional&lt;/li&gt;
&lt;li&gt;Evaluating an object with no properties will always evaluate to &lt;code&gt;true&lt;/code&gt; in a conditional&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;That's all for this week!, I've been setting up a new domain for my blog &lt;a href="//naftalimurgor.com"&gt;naftalimurgor.com&lt;/a&gt;.. You may follow my Twitter handle &lt;a href="https://dev.to@nkmurgor"&gt;https://twitter.com&lt;/a&gt;. Any questions queries shoot me an email, at &lt;a href="mailto:nmurgor10@gmail.com"&gt;nmurgor10@gmail.com&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Introduction to JavaScript Strings</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Tue, 15 Feb 2022 21:00:53 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/introduction-to-javascript-strings-fmb</link>
      <guid>https://dev.to/naftalimurgor/introduction-to-javascript-strings-fmb</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;JavaScript Strings provide a way of representing and handling characters. &lt;/p&gt;

&lt;h2&gt;
  
  
  JavaScript Strings
&lt;/h2&gt;

&lt;p&gt;A JavaScript string is a set of character(s) written inside quotes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// with single quote&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;emptyString&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt; &lt;span class="c1"&gt;// an empty string&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Elon Musk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="c1"&gt;// with double quotes&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;project&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;SpaceX&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Declaring a String in JavaScript does not restrict usage of single &lt;code&gt;''&lt;/code&gt; and double quotes &lt;code&gt;""&lt;/code&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  Acess character
&lt;/h2&gt;

&lt;p&gt;String objects provide a useful method for accessing a character in a string&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;catName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Anita&lt;/span&gt;&lt;span class="dl"&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;catName&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;charAt&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="c1"&gt;// prints 'A', character at a position 0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Strings behave like Array-like objects, so above can be:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;catName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Anita&lt;/span&gt;&lt;span class="dl"&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;catName&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="c1"&gt;// prints 'A'&lt;/span&gt;
&lt;span class="c1"&gt;// looping throug each character&lt;/span&gt;
&lt;span class="k"&gt;for&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;i&lt;/span&gt; &lt;span class="o"&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;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;catName&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;++&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;catName&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="c1"&gt;// A, n, i, t, a&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Get length of  a JavaScript String
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;THREAD_NAME&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Moonspiracy&lt;/span&gt;&lt;span class="dl"&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;THREAD_NAME&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// prints number of characters// 11&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;JavaScript Strings provide a way of presenting strings using double or single quotes. Both syntaxes are valid and usage is based on project style guide and preferences.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>ES6: Default parameters explained</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Tue, 08 Feb 2022 16:28:14 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/es6-default-parameters-explained-5eob</link>
      <guid>https://dev.to/naftalimurgor/es6-default-parameters-explained-5eob</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;ES2015(ES6) introduced default parameters. Let's jump right in and learn about default parameters.&lt;/p&gt;

&lt;h2&gt;
  
  
  Default parameters
&lt;/h2&gt;

&lt;p&gt;What would happen if we called a function with all or some parameters missing? It turns out JavaScript assigns &lt;code&gt;undefined&lt;/code&gt; to the missing arguments.&lt;/p&gt;

&lt;p&gt;Let's see example in code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;num2&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;num1&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;num2&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;sum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// one argument is missing // gets called as 2 + undefined&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;sum&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// prints NaN&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Default parameters allow us to define a default parameter value and will be used when no argument is provided for the paramter during  funcion call:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;main&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;port&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;3000&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="c1"&gt;// possible code ommitted here&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="c1"&gt;//port will default to value of 3000&lt;/span&gt;
&lt;span class="nx"&gt;main&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// call main with 5000&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Another dummy example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// add default parameters at the end of parameter list&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;restoreWallet&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;privateKey&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;dumpToJson&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="kc"&gt;true&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="c1"&gt;// posible code omitted&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;myWallet&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;restoreWallet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;0xFEEDBEEFFEEDBEEF&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// dumpToJson supplied as false&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myWalletTwo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;restoreWallet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;0x05417&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// dumpToJson defaults to true if not supplied&lt;/span&gt;


&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fetchItems&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;storeName&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;keys&lt;/span&gt; &lt;span class="o"&gt;=&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="c1"&gt;// possible code omitted here&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;itemStore&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;fetchItems&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Electronics&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// keys defaults to an empty array object&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;Default parameters allow us to provide a default value for the argument when not supplied during the function call.&lt;/p&gt;

&lt;p&gt;Default parameters are added at the end of the paremeter list.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>ES6: Rest parameters</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Tue, 08 Feb 2022 16:24:27 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/es6-rest-parameters-19ei</link>
      <guid>https://dev.to/naftalimurgor/es6-rest-parameters-19ei</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In this article, we shall learn about rest parameters.&lt;/p&gt;

&lt;h2&gt;
  
  
  Rest Parameters
&lt;/h2&gt;

&lt;p&gt;Rest parameters allow several arguments to be supplied to a function.  &lt;code&gt;console.log(...args)&lt;/code&gt; follows this pattern. We can supply as many arguments to &lt;code&gt;console.log()&lt;/code&gt; because &lt;code&gt;console.log()&lt;/code&gt; takes rest parameters.&lt;/p&gt;

&lt;p&gt;Example in code snippet showing the rest parameters:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// syntax for rest parameters:&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;addSeveralNumbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;args&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;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
  &lt;span class="nx"&gt;args&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;num&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;index&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="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;num&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;result&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;addToTen&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;addSeveralNumbers&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&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;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;9&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="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;addTo&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// prints 55&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Rest parameters allow us to supply a non-fixed number of arguments to a function. &lt;/li&gt;
&lt;li&gt;Syntax for rest parameters:&lt;code&gt;function multiply(...args) { // function body}&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Calling a function that takes rest parameters is done as one would do with a normal function like &lt;code&gt;multiply(1,2,3,4)&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;The arguments supplied are accessed as an array of values inside of the function body like in the example&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I've rarely used &lt;code&gt;function rest parameters&lt;/code&gt; but it's good to learn and know they exist&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>javascript</category>
      <category>begginers</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How to fix Error 404 on Netlify for SPAs built with Reactjs</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Mon, 31 Jan 2022 20:25:47 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/how-to-fix-error-404-on-netlify-for-spas-built-with-reactjs-3fb6</link>
      <guid>https://dev.to/naftalimurgor/how-to-fix-error-404-on-netlify-for-spas-built-with-reactjs-3fb6</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Hosting a React application on the Netlify platform often runs into an "Error 404". This is because an app built with Reactjs is a SPA (Single Page Application). Routing is done on the application and no HTTP calls are made to fetch pages server-side.&lt;/p&gt;

&lt;p&gt;To fix this error, &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;go to the &lt;code&gt;public&lt;/code&gt; folder of your application&lt;/li&gt;
&lt;li&gt;create a file name &lt;code&gt;_redirects&lt;/code&gt;( no file extension)&lt;/li&gt;
&lt;li&gt;add the following content to the &lt;code&gt;_redirects&lt;/code&gt; file:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="cm"&gt;/*    /index.html   200
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Rebuild the application and the error is fixed.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This tells Netlify to route all redirects to the &lt;code&gt;index.html&lt;/code&gt; which is the root entry of your application. In Firebase hosting, this is usually handled inside a config file inside the project root.&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>netlify</category>
      <category>webdev</category>
    </item>
    <item>
      <title>ES6: Object destructing</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Mon, 31 Jan 2022 20:19:50 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/es6-object-destructing-3nn0</link>
      <guid>https://dev.to/naftalimurgor/es6-object-destructing-3nn0</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In this blog article, we shall learn about Object destructing in JavaScript. Object destructuring syntax was introduced in ES6 to make accessing Object properties much easier and cleaner&lt;/p&gt;

&lt;h2&gt;
  
  
  Object destructing
&lt;/h2&gt;

&lt;p&gt;In pre-ES6, normally you'd read object properties and store the values associated to these properties in a variable like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// some code omitted&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dummy_id_001`,
  username: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="nx"&gt;foo_bar&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;
  avatar: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="na"&gt;https&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="c1"&gt;//gravatar/xrkpxys/k1szh.png',&lt;/span&gt;
  &lt;span class="na"&gt;accent&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#fff&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// reading a few properties off this object literal: pre-es6&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;username&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;accent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;accent&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In ES6, the above becomes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// some code omitted&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dummy_id_001`,
  username: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="nx"&gt;foo_bar&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;
  avatar: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="na"&gt;https&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="c1"&gt;//gravatar/xrkpxys/k1szh.png',&lt;/span&gt;
  &lt;span class="na"&gt;accent&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#fff&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// reading a few properties off this object literal: pre-es6&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;username&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;accent&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;
&lt;span class="c1"&gt;// now use username, accent as normal variables&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is useful especially if you need to read more than one property from the same object.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;Object destructuring syntax provides a cleaner way of accessing more than one property off an object literal.&lt;/p&gt;

&lt;p&gt;Use object destructuring when accessing more than one property of an object and pre-ES6 syntax(using the "dot" operator) when accessing only one object.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// possible code ommitted&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;username&lt;/span&gt; &lt;span class="c1"&gt;// OK for single property&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;accent&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;avatar&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="c1"&gt;// use object destructing&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Found this article helpful? You may follow my twitter handle &lt;a href="https://twitter.com/nkmurgor"&gt;@nkmurgor&lt;/a&gt; where I tweet about interesting topics on web development.&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>begginers</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Freelancing, the stage of feeling stuck</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Tue, 25 Jan 2022 20:36:28 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/freelancing-the-stage-of-feeling-stuck-13pa</link>
      <guid>https://dev.to/naftalimurgor/freelancing-the-stage-of-feeling-stuck-13pa</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In this article, I will share my experience freelancing lately and share insights.&lt;/p&gt;

&lt;p&gt;Let’s jump right in!&lt;/p&gt;

&lt;h2&gt;
  
  
  What freelancing is
&lt;/h2&gt;

&lt;p&gt;Freelancing is selling services at a fee to people who need those services. Say you are a plumber in a big city or town, you could market yourself as a plumber who is available on call to fix leaking faucets, etc.&lt;/p&gt;

&lt;p&gt;The same goes for copywriting, Software development, Graphic design, UI/UX design. &lt;/p&gt;

&lt;p&gt;The hardest work in freelancing is combining:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Interpersonal skills&lt;/li&gt;
&lt;li&gt;Business skills&lt;/li&gt;
&lt;li&gt;Technical skills (expertise)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Interpersonal skills involve communicating with clients being empathic with their needs and finding a better way to solve these needs.&lt;/p&gt;

&lt;p&gt;Business skills on the other hand involve running a business- Market, paying bills, saving some money, and keeping the business running. &lt;/p&gt;

&lt;p&gt;Technical skills are the skills you offer and apply to your problems brought forward by clients. This is essentially your craft.&lt;/p&gt;

&lt;p&gt;As a freelancer, you have to juggle the three aspects and balance both which can be a bit overwhelming.&lt;/p&gt;

&lt;h2&gt;
  
  
  How success stories paint Freelancing
&lt;/h2&gt;

&lt;p&gt;Perhaps I'm still getting into freelancing, but freelancing is painted as a very successful niche. In my experience, freelancing can go from:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Everything working out well, clients, income, emails all over, to&lt;/li&gt;
&lt;li&gt;1 client with a very COMPLEX project that takes months&lt;/li&gt;
&lt;li&gt;Weeks, to months of no clients.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;As you know: Business - Customers = No income. &lt;/p&gt;

&lt;p&gt;Perhaps this resonates well with this statement:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Everything’s going great for months and then everything gets turned on its head: weeks of no clients. DEMONIC projects. Stress. Feeling stuck — all the things you feared.&lt;br&gt;
I kept these problems to myself as I felt embarrassed each time I found myself on a barren run. But talking with other freelancers — and pouring my freelance guts here on Medium — I realized I wasn’t alone. &lt;a href="https://williamlythcopywriter.medium.com/how-to-fix-the-1-freelancing-problem-that-stops-you-from-moving-forward-ab0654fc193e"&gt;You can read more here&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Freelancing is filled with challenges, is fun, and sometimes riddled with doubt and a lot of "what-if"s and sometimes regrets and doubts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Freelancing on Online Platforms
&lt;/h2&gt;

&lt;p&gt;Over the years, Most freelance communities have become saturated with an overwhelming steady stream of new users to the point Upwork had to pause new Graphic design and WordPress developer registrations for these categories.&lt;/p&gt;

&lt;p&gt;Competition has become stiff and with new accounts, nobody knows what's going on there. Most categories have become overly saturated and low-paying. Making $5.00 websites might seem a way to get started but at times you end up doing more work for little income.&lt;/p&gt;

&lt;p&gt;Offering services on these platforms might be great but you might end up short selling your skills and time. Well-paying clients exist on these platforms but are quite rare.&lt;/p&gt;

&lt;p&gt;I recently made $250.00 doing 10 hours of work on one of the common freelancing platforms. Good clients are hard to come by and this can be devastating. I live in a low-income economy and $400 a month is a decent income where I live.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;Freelancing is a challenge and it's a lot of work than working a full-time job. Having clients on a retainer can be a great way to earn a steady income as compared to one-off projects. One-off projects can be great if it's a decent size project and pay well like $5000 or even more.&lt;/p&gt;

&lt;p&gt;What's your experience freelancing? How do you make recurrent income? Feel free to leave a comment down below.&lt;/p&gt;

&lt;p&gt;Thanks for stopping by! Until next week, adios!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Introduction to E2015 Set Objects</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Tue, 25 Jan 2022 20:30:51 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/introduction-to-e2015-set-objects-534a</link>
      <guid>https://dev.to/naftalimurgor/introduction-to-e2015-set-objects-534a</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Set objects are constructed using &lt;code&gt;new Set()&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Set object
&lt;/h2&gt;

&lt;p&gt;A set is a “set of " unique values. Say you have a simple game and need to track the position of mouse clicks. You’d store every position in a set object. Duplicate values are discarded when an attempt to add the set object is made.&lt;/p&gt;

&lt;p&gt;Sample code showing a simple &lt;code&gt;Set&lt;/code&gt; object usage:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&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;gameScreen&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;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;game-screen&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nx"&gt;gameScreen&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="nx"&gt;updateAction&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;cursorPositions&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;updateAction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&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;position&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;x&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;clientX&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;y&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;clientY&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="nx"&gt;cursorPositions&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;position&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// any duplicate values are discarded, which is ideal in this case&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="c1"&gt;// use unique cursorPositions below&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;while&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;main&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;Duplicate values are discarded when added to a set. This is useful for capturing and storing unique values where duplicate values are not needed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;letters&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nx"&gt;letters&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;letters&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;B&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;letters&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// duplicate entry is ignored&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;letters&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Set {2} {'A', 'B'} &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;The set object provides a way of storing data where duplicate values are not required.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Note: Most languages including JavaScript offer a lot of language features but it’s not a good approach to try learning all these language features at a go. However, knowing they exist is enough as it helps one know where to look when the need arises.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>node</category>
      <category>html</category>
    </item>
    <item>
      <title>Introduction to ES6 Map objects</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Tue, 25 Jan 2022 20:26:39 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/introduction-to-es6-map-objects-17fi</link>
      <guid>https://dev.to/naftalimurgor/introduction-to-es6-map-objects-17fi</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In this blog article, we shall learn about map objects introduced in ES2015. Maps are key-value pairs, where the key can be of any type.&lt;/p&gt;

&lt;p&gt;It's a typical practice in JavaScript to use Object literals as maps, most likely because Object literal predated Maps.&lt;/p&gt;

&lt;h2&gt;
  
  
  Map objects
&lt;/h2&gt;

&lt;p&gt;Map objects can be created using  &lt;code&gt;new Map()&lt;/code&gt; syntax.&lt;/p&gt;

&lt;p&gt;Sample code showing how to create a map object and add some values using &lt;code&gt;Map.set()&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;studentDetails&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Map&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nx"&gt;studentDetails&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;age&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;studentDetails&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;class&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2018&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;studentDetails&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Naftali Murgor&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In object literal, the following would have been equivalent of the above:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;studentDetails&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// made up&lt;/span&gt;
  &lt;span class="na"&gt;class&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2018&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Naftali Murgor&lt;/span&gt;&lt;span class="dl"&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;p&gt;Map offers useful helper methods compared to using object literal. &lt;/p&gt;

&lt;p&gt;Some of the methods and properties include:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;map&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Map&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="c1"&gt;// helper methods and properties&lt;/span&gt;
&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;clear&lt;/span&gt;
&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&lt;/span&gt;
&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;entries&lt;/span&gt;
&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forEach&lt;/span&gt;
&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;
&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;has&lt;/span&gt;
&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;keys&lt;/span&gt;
&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;set&lt;/span&gt;
&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt;
&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;values&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let's explore some of the helper methods and properties.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. &lt;code&gt;Map.clear()&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;Map.clear()&lt;/code&gt; deletes the map values entries leaving an empty map.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;studentDetails&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;clear&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;studentDetails&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Map(0) {} // all key-values cleared!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. &lt;code&gt;Map.delete()&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;Map.delete('key')&lt;/code&gt; deletes the value in the a map based on the key passed to as an argument. Returns &lt;code&gt;boolean&lt;/code&gt; of &lt;code&gt;true&lt;/code&gt; on succesful deletion or &lt;code&gt;false&lt;/code&gt; on failure.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;studentDetails&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;age&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// remove age entry&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;studentDetails&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="c1"&gt;// Map(2) { 'class' =&amp;gt; 2018, 'name' =&amp;gt; 'Naftali Murgor' }&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. &lt;code&gt;Map.has('key')&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Checks if a key exists in a map. Returns boolean. &lt;code&gt;true&lt;/code&gt; if key is existent and &lt;code&gt;false&lt;/code&gt; otherwise.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&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;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;has&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;class&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="c1"&gt;// true&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;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;has&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;height&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="c1"&gt;// false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  4. &lt;code&gt;Map.size&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;Map.size&lt;/code&gt; is a getter that returns the number of entries in the map object.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&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;studentDetails&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// 4&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5. &lt;code&gt;Map.keys&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;Map.keys&lt;/code&gt; is a getter that returns a &lt;code&gt;Map iterator&lt;/code&gt; that contains all the keys of the map object.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&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;studenDetails&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="c1"&gt;// Map iterator { 2018, 'Naftali Murgor' } &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  6. &lt;code&gt;Map.set()&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;Map.set('key', 'value')&lt;/code&gt; method takes a &lt;code&gt;key&lt;/code&gt; and &lt;code&gt;value&lt;/code&gt; as arguments and adds new entry to the map object.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;studentDetails&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;weight&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;59&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  7. &lt;code&gt;map.get()&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;Map.get('key')&lt;/code&gt; returns the value associated with the key passed as an argument.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&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;studentDetails&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;age&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="c1"&gt;// 25&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Map objects are key-value pairs, where a key is associated with a value. Maps are called a &lt;code&gt;dictionary&lt;/code&gt;, a &lt;code&gt;HashMap&lt;/code&gt; in other languages.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;We create a map object by using new Map(). We then add key-value pairs using &lt;code&gt;Map. set(‘key’, ‘value’)&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Object literals are a common style of using maps. In JavaScript, we use Object literal as a map, how hilarious is that. However, Object literals provide methods that aren’t useful. The takeaway is that the JSON interface and JSON encoding/decoding are interoperable with object literals.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Read more about 👉 &lt;a href="https://dev.to/es6-set-objects/"&gt;Set Objects&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>node</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>ES6: JavaScript for...of statement</title>
      <dc:creator>Naftali Murgor</dc:creator>
      <pubDate>Tue, 18 Jan 2022 19:24:39 +0000</pubDate>
      <link>https://dev.to/naftalimurgor/es6-javascript-forof-statement-2caa</link>
      <guid>https://dev.to/naftalimurgor/es6-javascript-forof-statement-2caa</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;This tutorial will learn about &lt;code&gt;for-of&lt;/code&gt; introduced in  &lt;code&gt;ES6&lt;/code&gt; version of JavaScript.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;for...of&lt;/code&gt; statement is used for iterating over arrays, maps or sets.&lt;/p&gt;

&lt;h2&gt;
  
  
  Looping over an array
&lt;/h2&gt;

&lt;p&gt;Example in code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Orange&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Lemon&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

&lt;span class="c1"&gt;// looping through&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fruit&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// do something with fruit&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Looping over a string
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;for...of&lt;/code&gt; can also be used to loop over contents of a string.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;words&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Happy new year!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;char&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;words&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;char&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// H a p p y n e w y e a r !&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Looping over a Set
&lt;/h2&gt;

&lt;p&gt;A set is a collection of unique values.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;letters&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;a&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;b&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;c&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;

&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;letter&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;letters&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;letters&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// a, b, c&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Looping over a map
&lt;/h2&gt;

&lt;p&gt;A map is key-value pair, where key can be of any type. In JavaScript it's common to use object literals as maps&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;details&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Map&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Michael Myers&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;age&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;45&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="c1"&gt;// made up&lt;/span&gt;
&lt;span class="p"&gt;])&lt;/span&gt;

&lt;span class="c1"&gt;// or a cleaner way:&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;details&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Map&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nx"&gt;details&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Michael Myers&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;detail&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;details&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;detail&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;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;for...of&lt;/code&gt; introduces a cleaner way of looping over arrays, sets, strings and maps.&lt;/p&gt;




&lt;p&gt;Read more about 👉 &lt;a href="https://dev.toe"&gt;Map objects&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>node</category>
    </item>
  </channel>
</rss>
