<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Abdelrahman Dwedar</title>
    <description>The latest articles on Forem by Abdelrahman Dwedar (@abdelrahman_dwedar).</description>
    <link>https://forem.com/abdelrahman_dwedar</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%2F720736%2Feb1c7fc1-6df4-44cb-93e4-866e78d94e4b.jpg</url>
      <title>Forem: Abdelrahman Dwedar</title>
      <link>https://forem.com/abdelrahman_dwedar</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/abdelrahman_dwedar"/>
    <language>en</language>
    <item>
      <title>Bloom Filters Applied In Real-Life Application - Laravel Prototype</title>
      <dc:creator>Abdelrahman Dwedar</dc:creator>
      <pubDate>Thu, 20 Mar 2025 06:59:54 +0000</pubDate>
      <link>https://forem.com/abdelrahman_dwedar/bloom-filters-applied-in-real-life-application-laravel-prototype-20i9</link>
      <guid>https://forem.com/abdelrahman_dwedar/bloom-filters-applied-in-real-life-application-laravel-prototype-20i9</guid>
      <description>&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;When we have something &lt;strong&gt;frequent&lt;/strong&gt; and at the same time &lt;strong&gt;intensive&lt;/strong&gt; it's just one of the biggest challenges we might face. &lt;/p&gt;

&lt;p&gt;A good example of that is something like &lt;em&gt;uniqueness validation&lt;/em&gt;; we need to add a new email to the database but to do that we need to check for every single email that's already in the database.&lt;br&gt;
And that's the intensiveness of it. We perform a full table scan --or in the best case &lt;code&gt;index&lt;/code&gt;-- so we make sure that this table doesn't have a single instance of that email.&lt;/p&gt;

&lt;p&gt;Take a case where you have millions of users in your table of users, and you need to make sure that the email is unique for each user who logs in. The validation will indeed take so long, and the user will be bothered. &lt;br&gt;
Not to mention the amount of risk you put on the database doing that huge scan on a huge amount of data on a simple task as validation.&lt;/p&gt;

&lt;p&gt;Taking our example of around 10 million users, we'll need &lt;code&gt;~10-60 seconds&lt;/code&gt; without indexing.&lt;br&gt;
While maybe with indexing it might take a few seconds.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;These numbers are not solid, just for referencing how much it &lt;strong&gt;might&lt;/strong&gt; take.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Being in the industry for a while you'll know --from the get-go--, that having less query on the database is always better.&lt;br&gt;
That is why we started &lt;strong&gt;Caching Layer&lt;/strong&gt; like &lt;em&gt;Redis&lt;/em&gt; (which will also be used in this blog). And &lt;strong&gt;search engine tools&lt;/strong&gt; like &lt;em&gt;Elastic search&lt;/em&gt;. And relying on &lt;strong&gt;message brokers&lt;/strong&gt; like &lt;em&gt;RabbitMQ&lt;/em&gt; for keeping a queue.&lt;/p&gt;

&lt;p&gt;Using other tools to minimize the need to do queries is something we often do in software engineering generally, and this case is no different.&lt;br&gt;
The best solution for such a case is &lt;strong&gt;Bloom Filters&lt;/strong&gt;, which I'll explain in detail in the next section.&lt;/p&gt;


&lt;h2&gt;
  
  
  Solution: Bloom Filters
&lt;/h2&gt;

&lt;p&gt;Taking about &lt;a href="https://en.wikipedia.org/wiki/Bloom_filter" rel="noopener noreferrer"&gt;Bloom Filters&lt;/a&gt; we need to understand that it's not actually just a tool. It is really a &lt;em&gt;data structure&lt;/em&gt; that is great for such cases as the one we are talking about here.&lt;/p&gt;
&lt;h3&gt;
  
  
  General Principle
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Bloom Filter&lt;/strong&gt; consists of these two main components:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;bit array&lt;/li&gt;
&lt;li&gt;multiple hash functions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What we do is that when some new item is inserted we use each of the &lt;strong&gt;hash functions&lt;/strong&gt; on it, and they have to give us an index on the &lt;strong&gt;bit array&lt;/strong&gt; to set as &lt;code&gt;1&lt;/code&gt;. And when we apply all the &lt;strong&gt;hash functions&lt;/strong&gt; we fill the &lt;strong&gt;bit array&lt;/strong&gt; in certain places which will all be &lt;code&gt;1&lt;/code&gt; if we checked with the same &lt;strong&gt;hash functions&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;So When we get some new insert after that we use the &lt;strong&gt;hash functions&lt;/strong&gt; on them again and if all the indexes that the &lt;strong&gt;hash functions&lt;/strong&gt; were already filled with &lt;code&gt;1&lt;/code&gt; in the &lt;strong&gt;bit array&lt;/strong&gt; that means that this new item &lt;em&gt;"might be inserted before"&lt;/em&gt; (will elaborate this later).&lt;/p&gt;
&lt;h3&gt;
  
  
  Example
&lt;/h3&gt;

&lt;p&gt;Let's take our email case as an example of that.&lt;/p&gt;

&lt;p&gt;When we insert a new email (for example &lt;code&gt;"abdelrahman.dwedar.7350@gmail.com"&lt;/code&gt;) we start by running the &lt;strong&gt;hash functions&lt;/strong&gt; on it and let's just for simplicity imagine that the results were: &lt;code&gt;7&lt;/code&gt;, &lt;code&gt;1&lt;/code&gt;, &lt;code&gt;5&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;So our &lt;strong&gt;bit array&lt;/strong&gt; will now look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[0, 1, 0, 0, 0, 1, 0, 1, 0, 0]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notice that we have &lt;code&gt;1&lt;/code&gt; in the indexes resulting from the &lt;strong&gt;hash functions&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;If we now try to reinsert &lt;code&gt;"abdelrahman.dwedar.7350@gmail.com"&lt;/code&gt; again we'll have all of them as &lt;code&gt;1&lt;/code&gt; already so we suspect that it might have been inserted before.&lt;/p&gt;

&lt;h3&gt;
  
  
  False-positive nature of bloom filters
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Bloom filters&lt;/strong&gt; are a false-positive data structure, when the case is &lt;code&gt;false&lt;/code&gt; it is indeed a solid &lt;code&gt;false&lt;/code&gt;. Yet If it's &lt;code&gt;true&lt;/code&gt; it &lt;em&gt;might&lt;/em&gt; be action &lt;code&gt;false&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;How does that happen exactly?&lt;/p&gt;

&lt;p&gt;Let's have an example on the same &lt;strong&gt;bit array&lt;/strong&gt; with the indexes &lt;code&gt;7&lt;/code&gt;, &lt;code&gt;1&lt;/code&gt;, and &lt;code&gt;5&lt;/code&gt; being filled. You might be inserting &lt;code&gt;"new_email@gmail.com"&lt;/code&gt; yet your &lt;strong&gt;hash functions&lt;/strong&gt; resulted also &lt;code&gt;7&lt;/code&gt;, &lt;code&gt;1&lt;/code&gt;, &lt;code&gt;5&lt;/code&gt; which means it's filled in the &lt;strong&gt;bit array&lt;/strong&gt;, which means that it might be inserted, so you'll now need to do a full scan.&lt;/p&gt;

&lt;p&gt;Yet the good part is that we're sure in case they were not all filled that the new item was never inserted before.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why use it?
&lt;/h3&gt;

&lt;p&gt;As &lt;strong&gt;bloom filters&lt;/strong&gt; use a &lt;strong&gt;bit array&lt;/strong&gt; and very fast &lt;strong&gt;hashing functions&lt;/strong&gt; like &lt;em&gt;FNV&lt;/em&gt; or &lt;em&gt;Murmur&lt;/em&gt;, that results us a very fast check if it was inserted before with a &lt;strong&gt;false-positive&lt;/strong&gt; result.&lt;/p&gt;

&lt;p&gt;Using &lt;strong&gt;bloom filters&lt;/strong&gt; makes you make full scan much less, as whenever it gives you &lt;code&gt;false&lt;/code&gt; you're 100% assured that it was not added the the database before.&lt;/p&gt;

&lt;p&gt;I recommend you read more about &lt;strong&gt;bloom filters&lt;/strong&gt; to gain a better understanding of it, so I added a few valuable resources I used in the references.&lt;/p&gt;




&lt;h2&gt;
  
  
  Bloom Filters: Redis Implementation
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Redis Implementation
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Redis&lt;/strong&gt; is &lt;em&gt;key-value&lt;/em&gt; data store. Most used as a &lt;strong&gt;cache layer&lt;/strong&gt;, it stores the data &lt;em&gt;in-memory&lt;/em&gt; which makes it faster to reach any time. And its nature as a &lt;em&gt;key-value&lt;/em&gt; data store which is similar to &lt;strong&gt;hash maps&lt;/strong&gt; it has great both read &amp;amp; write speed.&lt;/p&gt;

&lt;p&gt;I'll be using &lt;strong&gt;&lt;a href=""&gt;Redis&lt;/a&gt;&lt;/strong&gt; for that. &lt;strong&gt;Redis&lt;/strong&gt; by default doesn't have implementation for &lt;strong&gt;bloom filters&lt;/strong&gt;, yet you can have it by adding the &lt;a href="https://redis.io/probabilistic/" rel="noopener noreferrer"&gt;Redis Probabilistic Data Structures Module&lt;/a&gt; to &lt;strong&gt;Redis&lt;/strong&gt;, or using the &lt;a href="https://hub.docker.com/r/redis/redis-stack" rel="noopener noreferrer"&gt;redis-stack docker image&lt;/a&gt;. (In my prototype I used the docker image).&lt;/p&gt;

&lt;p&gt;Using &lt;strong&gt;Redis&lt;/strong&gt; will take the overhead of making the &lt;strong&gt;bloom filter&lt;/strong&gt; from scratch in our application, and also helps with &lt;em&gt;auto-scaling&lt;/em&gt; (which is out of the scope of this article) for later.&lt;/p&gt;

&lt;h3&gt;
  
  
  Redis Commands
&lt;/h3&gt;

&lt;p&gt;If you ever used &lt;strong&gt;Redis&lt;/strong&gt; before you'll know that we use commands like &lt;code&gt;APPEND {key} {value}&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;We have some commands for &lt;strong&gt;Bloom filters&lt;/strong&gt; in &lt;strong&gt;Redis&lt;/strong&gt; as well, all of them start with &lt;code&gt;BF&lt;/code&gt;. &lt;br&gt;
I won't be mentioning every single one of them, but I'll tell you the most important ones.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;BF.RESERVE {key} {error_rate} {capacity} [EXPANSION expansion]&lt;/code&gt;: Creates an empty Bloom filter with a single sub-filter for the initial specified capacity and with an upper bound &lt;code&gt;error_rate&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;BF.ADD {key} {item}&lt;/code&gt;: Adds an item to a Bloom filter.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;BF.INSERT {key} ITEMS {item} [item...]&lt;/code&gt;: Creates a new Bloom filter if the key does not exist using the specified error rate, capacity, and expansion, then adds all specified items to the Bloom Filter. (accepts at least one item)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;BF.EXISTS {key} {item}&lt;/code&gt;: Determines whether a given item was added to a Bloom filter.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I think by just the naming you can understand how it works. We'll use &lt;code&gt;BF.RESERVE&lt;/code&gt; to create a new &lt;strong&gt;Bloom filter&lt;/strong&gt;, and then we use &lt;code&gt;BF.ADD&lt;/code&gt; or &lt;code&gt;BF.INSERT&lt;/code&gt; to add new items to it (and the &lt;strong&gt;hash function&lt;/strong&gt; will run internally). Whenever we want to make a check if an item exists in the &lt;strong&gt;Bloom filter&lt;/strong&gt; we use &lt;code&gt;BF.EXISTS&lt;/code&gt; (which also runs the &lt;strong&gt;hash functions&lt;/strong&gt; internally).&lt;/p&gt;

&lt;p&gt;Simply like that we now have a ready-to-go &lt;strong&gt;Bloom filter&lt;/strong&gt; for a high-scale application also powered by the &lt;em&gt;auto-scaling&lt;/em&gt; features of &lt;strong&gt;Redis&lt;/strong&gt;.&lt;/p&gt;


&lt;h2&gt;
  
  
  Laravel Custom Validation Rules
&lt;/h2&gt;
&lt;h3&gt;
  
  
  What are Laravel validation rules?
&lt;/h3&gt;

&lt;p&gt;To give a more real-life example we need an application, and in the application layer I'd use &lt;strong&gt;Laravel&lt;/strong&gt;, in &lt;strong&gt;Laravel&lt;/strong&gt; we can have &lt;a href="https://laravel.com/docs/11.x/validation#main-content" rel="noopener noreferrer"&gt;validation rules&lt;/a&gt;, like the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;?php&lt;/span&gt;

&lt;span class="nv"&gt;$validated&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$request&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;validate&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
    &lt;span class="s1"&gt;'title'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'required|unique:posts|max:255'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="s1"&gt;'body'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'required'&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;In this example, we have &lt;code&gt;title&lt;/code&gt; and &lt;code&gt;body&lt;/code&gt; as the fields of the request, and the validation rules applied are &lt;code&gt;required&lt;/code&gt;, &lt;code&gt;unique&lt;/code&gt;, and &lt;code&gt;max&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;To make it simple:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;required&lt;/code&gt;: as its name indicates; it makes a field required and if not added it gives you an error&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;unique&lt;/code&gt;: you have to add a unique field, and the name after &lt;code&gt;:&lt;/code&gt; is the name of the table it checks the uniqueness on&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;max&lt;/code&gt;: check for the max character length in our case&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The used rules are default ones that come from &lt;strong&gt;Laravel&lt;/strong&gt; itself. You can learn more about them in the &lt;a href="https://laravel.com/docs/11.x/validation#available-validation-rules" rel="noopener noreferrer"&gt;documentation&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Making a Custom Validation Rule
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Laravel&lt;/strong&gt; also gives you the flexibility to add custom rules as you wish.&lt;/p&gt;

&lt;p&gt;In our case, the &lt;code&gt;unique&lt;/code&gt; validation rule is not enough, as it goes directly to the database and makes a full table scan.&lt;/p&gt;

&lt;p&gt;We need something custom for that.&lt;br&gt;
By following the &lt;a href="https://laravel.com/docs/11.x/validation#custom-validation-rules" rel="noopener noreferrer"&gt;documentation for making custom validation rules&lt;/a&gt;, we can create a new rule by running this command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php artisan make:rule BloomUnique
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then we have a template for the new rule.&lt;br&gt;
After I made the changes by using &lt;strong&gt;Redis&lt;/strong&gt; with the &lt;code&gt;BF.EXISTS&lt;/code&gt; this is the final code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;?php&lt;/span&gt;

&lt;span class="kn"&gt;namespace&lt;/span&gt; &lt;span class="nn"&gt;App\Rules&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;Closure&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;Illuminate\Contracts\Validation\ValidationRule&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;Illuminate\Support\Facades\Redis&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;App\Models\User&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;BloomUnique&lt;/span&gt; &lt;span class="kd"&gt;implements&lt;/span&gt; &lt;span class="nc"&gt;ValidationRule&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;protected&lt;/span&gt; &lt;span class="nv"&gt;$filterName&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;__construct&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;string&lt;/span&gt; &lt;span class="nv"&gt;$filterName&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;filterName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$filterName&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="cd"&gt;/**
     * Run the validation rule.
     *
     * @param  \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString  $fail
     */&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;validate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;string&lt;/span&gt; &lt;span class="nv"&gt;$attribute&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;mixed&lt;/span&gt; &lt;span class="nv"&gt;$value&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;Closure&lt;/span&gt; &lt;span class="nv"&gt;$fail&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kt"&gt;void&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;Redis&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;executeRaw&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'BF.EXISTS'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;filterName&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;$value&lt;/span&gt;&lt;span class="p"&gt;]))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Check database only if Bloom filter indicates possible existence&lt;/span&gt;
            &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;User&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;where&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;filterName&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;$value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;exists&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="nv"&gt;$fail&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'The :attribute has already been taken.'&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;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I use the &lt;code&gt;Redis&lt;/code&gt; class to execute the &lt;code&gt;BF.EXISTS&lt;/code&gt; command on the &lt;code&gt;filterName&lt;/code&gt; added to the request. Yet we're not done, if it exists in the &lt;strong&gt;Bloom filter&lt;/strong&gt; that doesn't mean it's for sure there, we still need to make a table scan to check if it's actually in the database.&lt;/p&gt;

&lt;p&gt;Yet in case we didn't find it in the &lt;strong&gt;Bloom filter&lt;/strong&gt; at all, we are sure it was never inserted before.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;We use the &lt;code&gt;$fail&lt;/code&gt; function to indicate that it's not passing, and we add the error message as a parameter.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Prototype
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Explained
&lt;/h3&gt;

&lt;p&gt;I have made a prototype for this using &lt;strong&gt;Laravel&lt;/strong&gt; and &lt;strong&gt;Redis&lt;/strong&gt;. I also used &lt;strong&gt;Docker&lt;/strong&gt; to run them.&lt;/p&gt;

&lt;p&gt;I made the case where we just use the default &lt;code&gt;unique&lt;/code&gt; validation rule.&lt;br&gt;
Then I made the case where we used the custom rule &lt;code&gt;BloomUnique&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Each case is in a separate &lt;em&gt;Git branch&lt;/em&gt;, the case with normal &lt;code&gt;unique&lt;/code&gt; is in the branch named &lt;code&gt;without-bloom-filters&lt;/code&gt;, and the other case with the custom rule is in the branch named &lt;code&gt;with-bloom-filers&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;I also added seeders using &lt;strong&gt;Laravel&lt;/strong&gt; built-in seeder to add testing data.&lt;/p&gt;
&lt;h3&gt;
  
  
  How to run?
&lt;/h3&gt;
&lt;h4&gt;
  
  
  Clone the Repository
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/AbdelrahmanDwedar/bloom-filters-validation-laravel-prototype.git
&lt;span class="nb"&gt;cd &lt;/span&gt;laravel-bloom-validation
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h4&gt;
  
  
  Setup Sail (For using docker)
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;composer require laravel/sail &lt;span class="nt"&gt;--dev&lt;/span&gt;
php artisan sail:install
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h4&gt;
  
  
  Setup the environment
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cp&lt;/span&gt; .env.example .env
./vendor/bin/sail artisan key:generate
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Then add the configuration for the database&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=laravel
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Also, add the configuration for &lt;strong&gt;Redis&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Start the docker containers, and install dependencies
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./vendor/bin/sail up &lt;span class="nt"&gt;-d&lt;/span&gt;
./vendor/bin/sail composer &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Use the custom-made commands to prepare the setup
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./vendor/bin/sail artisan benchmark:prepare
./vendor/bin/sail artisan benchmark:perform
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These are two custom commands I made for this prototype, the first one &lt;code&gt;benchmark:prepare&lt;/code&gt; task is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;migrations with a fresh database&lt;/li&gt;
&lt;li&gt;run the seeder&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And for the &lt;code&gt;benchmark:perform&lt;/code&gt; task is to&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;run the benchmarks&lt;/li&gt;
&lt;li&gt;display them in a table in the terminal&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Bloom filters&lt;/strong&gt; is a great tool we might use to solve the issue of having to always make full-table scans in cases of checking if some field exists in the database.&lt;br&gt;
We can use it in real-life scenarios by leveraging &lt;strong&gt;Redis&lt;/strong&gt; implementation in it, which I personally admire.&lt;/p&gt;

&lt;p&gt;This prototype is just to show how it might be used in some real-life scenarios using the &lt;strong&gt;Laravel&lt;/strong&gt; application, we leveraged adding custom rules in &lt;strong&gt;Laravel&lt;/strong&gt; for better code readability and separation of concerns.&lt;/p&gt;

&lt;p&gt;I have added some resources you can learn more from in the references below if you need more information about it.&lt;/p&gt;




&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://en.wikipedia.org/wiki/Bloom_filter" rel="noopener noreferrer"&gt;Wikipedia: Bloom Filter (article)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://youtu.be/kfFacplFY4Y?si=nSXcgQ2l8KF0Evvm" rel="noopener noreferrer"&gt;What Are Bloom Filters? (video)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://youtu.be/gBygn3cVP80?si=Ik8JykRA313oAb2g" rel="noopener noreferrer"&gt;Bloom Filters Explained by Example (video)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://youtu.be/C27lZKhiKiA?si=bYVNR2Q8298C0AWF" rel="noopener noreferrer"&gt;Redis: Bloom Filters In Redis (video)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://youtu.be/Z9_wrhdbSC4?si=bNY2qK3wTfG2VFwY" rel="noopener noreferrer"&gt;Redis: How to Use Bloom Filters in Redis (video)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://redis.io/blog/bloom-filter" rel="noopener noreferrer"&gt;Redis: Bloom Filter Datatype for Redis (article)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://redis.io/docs/latest/commands/?group=bf" rel="noopener noreferrer"&gt;Redis: Redis Bloom Filters Commands (documentation)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://laravel.com/docs/11.x/validation#custom-validation-rules" rel="noopener noreferrer"&gt;Laravel: Custom Validation Rules (documentation)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://laravel.com/docs/11.x/redis" rel="noopener noreferrer"&gt;Laravel: Redis database (documentation)&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>bloomfilter</category>
      <category>systemdesign</category>
      <category>redis</category>
      <category>laravel</category>
    </item>
    <item>
      <title>The Actual Difference Between Lambda and Regular Functions (Using PHP)</title>
      <dc:creator>Abdelrahman Dwedar</dc:creator>
      <pubDate>Wed, 29 Jan 2025 15:19:37 +0000</pubDate>
      <link>https://forem.com/abdelrahman_dwedar/the-actual-difference-between-lambda-and-regular-functions-using-php-ko3</link>
      <guid>https://forem.com/abdelrahman_dwedar/the-actual-difference-between-lambda-and-regular-functions-using-php-ko3</guid>
      <description>&lt;h2&gt;
  
  
  The Problem Of Function Context
&lt;/h2&gt;

&lt;p&gt;When we pass a function as a parameter or something like that, and we want to use some variables from &lt;strong&gt;outside of the function we need to use the &lt;code&gt;use&lt;/code&gt; keyword&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This can be found in &lt;em&gt;Laravel&lt;/em&gt; or &lt;em&gt;Lumen&lt;/em&gt; in the group routing.&lt;/p&gt;

&lt;p&gt;Notice how using the use keyword is necessary here:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$router&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;group&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'prefix'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'admin'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;use&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$router&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$router&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'users'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// Matches the "/admin/users" URL&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;The code above is from the docs of &lt;em&gt;Lumen&lt;/em&gt;, if we would &lt;strong&gt;rewrite that code using the lambda functions (arrow functions)&lt;/strong&gt; here it will have all the other variables outside of the function available in it.&lt;/p&gt;




&lt;h2&gt;
  
  
  Rewrite With Lambda Functions
&lt;/h2&gt;

&lt;p&gt;Notice how we &lt;strong&gt;didn't need to have the &lt;code&gt;use&lt;/code&gt; keyword here&lt;/strong&gt; and it's much cleaner.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$router&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;group&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'prefix'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'admin'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="k"&gt;fn&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="nv"&gt;$router&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'users'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;fn&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;// Matches the "/admin/users" URL&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;That's one of the most important parts of &lt;strong&gt;lambda functions&lt;/strong&gt;, and it is what makes them able to create &lt;em&gt;closures (closures are beyond the scope of this article)&lt;/em&gt; and many other functional concepts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Some Other Cases
&lt;/h2&gt;

&lt;p&gt;In some other languages, there's no &lt;code&gt;use&lt;/code&gt; keyword and functions don't have any knowledge about the context around it.&lt;/p&gt;

&lt;p&gt;In that case, how would you have similar behavior?&lt;/p&gt;

&lt;p&gt;You'll need to pass them as parameters each time, and we don't want that indeed.&lt;/p&gt;

</description>
      <category>php</category>
      <category>functions</category>
      <category>comparing</category>
    </item>
    <item>
      <title>The Effect Of Communities On Us</title>
      <dc:creator>Abdelrahman Dwedar</dc:creator>
      <pubDate>Thu, 29 Jun 2023 18:57:45 +0000</pubDate>
      <link>https://forem.com/abdelrahman_dwedar/the-effect-of-communities-on-us-n9a</link>
      <guid>https://forem.com/abdelrahman_dwedar/the-effect-of-communities-on-us-n9a</guid>
      <description>&lt;p&gt;In this article, I'm going to talk about communities, their &lt;strong&gt;good&lt;/strong&gt;, &lt;strong&gt;bad&lt;/strong&gt;, and &lt;strong&gt;ugly&lt;/strong&gt;. Having a look at how communities have an effect on us, and if that effect is indeed good or not.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Disclaimer: I'm not trying to attach any particular community, simply trying to open some eyes to how communities have an effect on us, and how to avoid some of the bad effects and the signs to get away from some community for your own good.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let me first ask you &lt;strong&gt;to not take my word on any of the topics and check yourself on these things&lt;/strong&gt;, measure how much you get and not from any community and see if you need that community at that time.&lt;/p&gt;




&lt;h2&gt;
  
  
  How do communities work?
&lt;/h2&gt;

&lt;p&gt;This sounds like a weird question, you'll probably say something like that:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;It's a group of people that have similar interests so they gathered together.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And you're right, &lt;strong&gt;but there's more to it&lt;/strong&gt;, we as humans like to feel a &lt;em&gt;sense of belonging&lt;/em&gt;, our interest is someone else's as well, so that gives us some &lt;em&gt;sense of happiness&lt;/em&gt;, &lt;strong&gt;mostly caused by some feeling of acceptance&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Then the community will empower you for doing &lt;em&gt;things&lt;/em&gt;. That &lt;em&gt;thing&lt;/em&gt; can be sometimes beneficial but can be not, depending on a lot of factors we'll discuss later on.&lt;/p&gt;

&lt;p&gt;Also keeping in mind that &lt;strong&gt;we're actually affected by everything we consume, whatever we listen to, read, or discuss, will indeed have some effect on us and how we think about things&lt;/strong&gt;, so being in a community (mostly talking the same opinions and same ideologies) will indeed make you have a similar mindset and believe in the same things, &lt;strong&gt;whether it was right or wrong&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Whenever we consume something our brains store it and keep processing it&lt;/strong&gt; (please research that yourself, I'm not well informed about how that works exactly, so it'll be better to check for yourself).&lt;/p&gt;




&lt;h2&gt;
  
  
  The good in communities
&lt;/h2&gt;

&lt;p&gt;I'm going to mention some of the benefits of communities, but I assume that you already know most of them, so I don't need to go through it that deeply, so &lt;strong&gt;I'll add them and have more focus on the bad sides&lt;/strong&gt; since we all can see the benefits but the disadvantage aren't discussed often.&lt;/p&gt;




&lt;h3&gt;
  
  
  Empowerment
&lt;/h3&gt;

&lt;p&gt;Communities are great at making us feel better and cheering us to achieve more and more. Whenever you feel down while doing things the community will help you feel better and keep going and take good care of you.&lt;/p&gt;

&lt;p&gt;It's also beneficial on a financial side, they'll help you &lt;strong&gt;share your ideas and projects and get more eyes on it&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Generally, Empowerment culture is a norm in most communities which is great!&lt;/p&gt;




&lt;h3&gt;
  
  
  Help!!
&lt;/h3&gt;

&lt;p&gt;Say you're stuck on some problem, usually, the community can help you find the solution or even give you the solution.&lt;/p&gt;

&lt;p&gt;That can be more appealing in &lt;strong&gt;open-source,&lt;/strong&gt; while you're making some project people in the community might help you find bugs through issues, and help you make newer functionalities through pull requests. That's an amazing advantage you get from being in a community, you'll get that kind of help which helps you learn new things and understand problems.&lt;/p&gt;

&lt;p&gt;That could also appeal to the amount of libraries, frameworks, and modules, the bigger the community the more libraries and modules will be made and published to help you improve your work.&lt;/p&gt;




&lt;h3&gt;
  
  
  Resources
&lt;/h3&gt;

&lt;p&gt;The community can provide a lot of resources for us to learn from blogs, podcasts, books, tips, videos, courses, etc...&lt;/p&gt;

&lt;p&gt;This is a very important benefit of communities, they give you those resources and also share them as well.&lt;/p&gt;

&lt;p&gt;I don't have much more to say about resources between communities as it's already very appealing to anyone.&lt;/p&gt;




&lt;h2&gt;
  
  
  The bad in communities
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;In this section I'm going to focus a little more than the last, it's more important for me to show the bad in communities so you can think about it and evaluate it for yourself and maybe avoid the bad things.&lt;/strong&gt; Please have some sense of &lt;em&gt;sportsmanship&lt;/em&gt; while reading and think about these topics and compare them to reality.&lt;/p&gt;

&lt;p&gt;I'm going to also give some examples without saying the community that has that mindset, I'll mention some tools as well as examples.&lt;/p&gt;




&lt;h3&gt;
  
  
  Mind Jail
&lt;/h3&gt;

&lt;p&gt;When you're in a community, &lt;strong&gt;you aren't with everyone, you're just with the people in that community with the same thoughts&lt;/strong&gt;, that is what brought you together from the beginning. You'll be somehow jailed in the ideas and thoughts of that particular community.&lt;/p&gt;

&lt;p&gt;These ideas could be wrong, and they might have some ideologies within them. An example: &lt;em&gt;"Use a single programming language for everything"&lt;/em&gt;, is a popular one, thinking that everything is going to be much easier if you just used a single language, &lt;strong&gt;while that's not necessarily true&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This is going to give you a pause in your growth as you'll just keep up with a single thing, whether that's a framework, library, language, etc...&lt;/p&gt;

&lt;p&gt;Being so attached to some tool is the worst thing you could do to yourself in software development, &lt;strong&gt;our profession continuously changes, and it never stops changing, the tools will be continuously changing over time&lt;/strong&gt;, and you need to learn something to use not to be attached to it.&lt;/p&gt;

&lt;p&gt;This is limiting for your mind and thinking process, you'll have only one perspective of things - which is the perspective of the community - &lt;strong&gt;which is very unhelpful for you and how you think about things, &lt;em&gt;especially if the community is closed to any other ideas and not welcoming any new perspectives&lt;/em&gt;.&lt;/strong&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  TRENDS
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Are trends even helpful?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Could be. But not in most cases especially when you have a &lt;em&gt;closed perspective community&lt;/em&gt; (as mentioned in the last section).&lt;/p&gt;

&lt;p&gt;Trends are when something is popular among the people of some community, and that's common between communities, this framework is trending and that library is the &lt;em&gt;current thing&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Trends are just useless in &lt;em&gt;most cases&lt;/em&gt;, &lt;strong&gt;could be beneficial if it's just introducing something new so people can try it and that thing doesn't get hyped&lt;/strong&gt;, and can be very misleading for a lot of people - especially beginners - as it sounds like something that might be important to know in a lot of cases, while it's a waste of time (This is discussed more in the FOMO section).&lt;/p&gt;

&lt;p&gt;Sometimes that trend might be over some new tool, or new technology, or even over something that was there for years but now it's being hyped.&lt;/p&gt;

&lt;p&gt;If you remember in the year 2022 a very big part of the tech community was all about &lt;em&gt;Web3 and crypto&lt;/em&gt;, everybody was talking about it and starting some startups and publishing things about it and having talks about it. And in the current year (2023) it's all about &lt;em&gt;AI&lt;/em&gt; all of a sudden, with the same things, talks, people talking, startups, etc...&lt;/p&gt;

&lt;p&gt;As you might already notice as well &lt;strong&gt;it's just repeating itself over and over again&lt;/strong&gt;, that's just how trends work, if you were involved in that you probably have tried to do things about it, have some talks learn some things here and there (even though that wasn't your initial interest but just because people are talking about it). And all the sudden it changes and no one is interested in it anymore, &lt;strong&gt;you'll be frustrated, and might feel so bad about it that it's going to stop you instead of pushing you&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;I see trends as some kind of poison for our minds that we consume from the media&lt;/strong&gt;, it's frustrating to keep up with them and not that beneficial after all. You'll be much happier without trends around you all the time, it's important to not let that control your mind.&lt;/p&gt;

&lt;p&gt;Trends can be also about some technology or even solutions, some people in the back-end communities keep talking about some solutions (just giving an example: sharding) and &lt;strong&gt;technologies, which mostly have an unneeded cost and complexity and are often considered as over-engineering&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I try to stay away from trends, as they don't help me but rather the very bad impact they leave on me and my work.&lt;/p&gt;




&lt;h3&gt;
  
  
  FOMO
&lt;/h3&gt;

&lt;p&gt;FOMO (&lt;strong&gt;F&lt;/strong&gt;ear &lt;strong&gt;O&lt;/strong&gt;f &lt;strong&gt;M&lt;/strong&gt;issing &lt;strong&gt;O&lt;/strong&gt;ut), it's when there's something that a lot of people are talking about and might be involved in, &lt;strong&gt;to a level where you feel like you're missing out on something and that thing might be important and beneficial to you&lt;/strong&gt;. It's so attached to the trends section, and often trends are what causes FOMO.&lt;/p&gt;

&lt;p&gt;This appeals very well when we say to ourselves these words:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This technology &lt;strong&gt;might&lt;/strong&gt; be actually the future of software, I have to learn that to just keep up and not lose my job or be outdated, &lt;strong&gt;I have to use it and get into it.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Mostly these thoughts are wrong&lt;/strong&gt;, most tools rarely ever die, and even if they died &lt;strong&gt;as a developer you should be able to move to any other tool easily&lt;/strong&gt;. It's important to understand that our job is more about solving problems and making new features than changing stacks, or even goals.&lt;/p&gt;

&lt;p&gt;We end up moving from one tool to another for no reason &lt;strong&gt;but because we're afraid of missing out on something new and better than what we used to use&lt;/strong&gt;. You can mostly use &lt;strong&gt;&lt;em&gt;any&lt;/em&gt;&lt;/strong&gt; tool to achieve what you want, and &lt;strong&gt;the fear of missing out you have is just lying to you that you couldn't cope with the new tools faster without taking that much time&lt;/strong&gt;. Or that you wouldn't find a job with your stack or tools, as I said you should be as a developer able to change the tools pretty easily if you understand the fundamentals well (also worth mentioning that most tools will get you a job and rarely you wouldn't find any jobs at all for tools).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;In most cases, communities are the main source of these concerns, with the trends and the new tools that the community talks about all the time, it turns out to be very frustrating to cope with them.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Communities are not all evil and indeed are not all good&lt;/strong&gt;. We have to be careful what to pick from the communities and what to leave, and &lt;strong&gt;not get too attached to some thoughts that communities carry along&lt;/strong&gt;. You also need to choose who to follow and who to not, as we (as humans) process everything that enters our minds and can be influenced by what others say.&lt;/p&gt;

&lt;p&gt;Consider checking out different perspectives to see any topic from different angles which is very helpful, and try to use different tooling other than what the community says, check things that are liked, and some of what is hated, see yourself and never rely on any other person's thoughts to decide for you want to use, use what's needed not what's liked/loved by some community. &lt;strong&gt;Lead yourself, and never follow.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In summary; communities can help you in a lot of things like &lt;strong&gt;empowering you and pushing you towards working harder and smarter and giving you that cheering you might need sometimes&lt;/strong&gt;, &lt;strong&gt;helping you with problems you face and helping you find good resources or even publishing your work for a larger audience&lt;/strong&gt;. But also it has a lot of things we should be careful of falling into like &lt;strong&gt;filling your mind with their thoughts and only their thoughts and putting you in what I call a &lt;em&gt;"mind jail"&lt;/em&gt;,&lt;/strong&gt; or &lt;strong&gt;pulling you into trends which don't help you improve and sometimes (often) really harmful for your mental health&lt;/strong&gt; (I sometimes say that trends are the poison for our mental health), or &lt;strong&gt;even give you FOMO and make you learn things you don't need and waste a big part of your time or even ruin your learning if you're not very organized with what you should learn and what not&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A lot of these issues aren't just related to our profession (software development) but it's universal issues in most communities&lt;/strong&gt;. Feel Free to share your thoughts and experiences as well as to share knowledge.&lt;/p&gt;

&lt;h3&gt;
  
  
  Resources
&lt;/h3&gt;

&lt;p&gt;For further information about the community and its effects on humans generally, there are a few researches if you're interested (notice that not all of them actually focus on the programmer's side it's general for humankind, and it's mostly from a Psychological point of view).&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="http://www.wright-house.com/psychology/sense-of-community.html" rel="noopener noreferrer"&gt;Psychological Sense of Community&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://beedie.sfu.ca/sms/admin/_DocLibrary/_ic/82d7197664a0ffce171b0b585495808f.pdf" rel="noopener noreferrer"&gt;Social media? It's serious! Understanding the dark side of social media&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.researchgate.net/publication/240924866_Sense_of_Virtual_Community_A_Conceptual_Framework_and_Empirical_Validation" rel="noopener noreferrer"&gt;Sense of Virtual Community: A Conceptual Framework and Empirical Validation&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>community</category>
      <category>fomo</category>
      <category>trends</category>
      <category>opinion</category>
    </item>
    <item>
      <title>JavaScript Struggles - Part 7 | functions</title>
      <dc:creator>Abdelrahman Dwedar</dc:creator>
      <pubDate>Sat, 25 Feb 2023 16:46:13 +0000</pubDate>
      <link>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-7-functions-11m2</link>
      <guid>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-7-functions-11m2</guid>
      <description>&lt;p&gt;Function in JavaScript just like most other languages &lt;strong&gt;is here to write less code&lt;/strong&gt; and &lt;strong&gt;eliminate duplication&lt;/strong&gt;. When we use a function it has to do something that's repeated and we wanted to isolate that piece of code.&lt;/p&gt;

&lt;p&gt;In this article, I'll be explaining how functions work in JavaScript, and I'll explain as well the new &lt;em&gt;ES6&lt;/em&gt; arrow functions that everybody uses and tell you when is it great and when it makes nonsense to use.&lt;/p&gt;

&lt;p&gt;Let's start!!&lt;/p&gt;




&lt;h2&gt;
  
  
  Writing Functions In JavaScript
&lt;/h2&gt;

&lt;p&gt;In JavaScript, we use the keyword &lt;code&gt;function&lt;/code&gt; to make a new function (yes we write the whole word function).&lt;/p&gt;

&lt;p&gt;As I mentioned earlier in the past articles about variables we need some keywords (like &lt;code&gt;var&lt;/code&gt;, &lt;code&gt;let&lt;/code&gt; or &lt;code&gt;const&lt;/code&gt;) to define that this is a variable and its type which &lt;code&gt;var&lt;/code&gt; make it a global variable.&lt;br&gt;&lt;br&gt;
While in the function when we want to create an &lt;strong&gt;argument that we can use it within the function we DO NOT use any keyword&lt;/strong&gt;, we just add the name of the argument.&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;greetUser&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="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;`Hello there, &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="s2"&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;
  
  
  How Do Functions Work Behind The Scenes
&lt;/h2&gt;

&lt;p&gt;Since JavaScript is an interpreted language, it has to run things step by step.&lt;br&gt;&lt;br&gt;
It's also worth mentioning that JavaScript also uses a garbage collector just in time running, so the functions are read every time you use them anywhere else again and again.&lt;/p&gt;

&lt;p&gt;How does it work exactly? Let's say we have this piece of code:&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;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;firstName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Abdelrahman&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;lastName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Dwedar&lt;/span&gt;&lt;span class="dl"&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;17&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;printUserInfo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="o"&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;`This user name is &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;firstName&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;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;lastName&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;, and they are &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; years old.`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;printUserInfo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&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%2Fuploads%2Farticles%2Fk69akmuj9r0xuvv19p9b.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%2Fk69akmuj9r0xuvv19p9b.png" alt="Graph for how function process work" width="578" height="577"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you might understand from the graph &lt;strong&gt;functions have their own process&lt;/strong&gt;, something else you might have to understand is that &lt;strong&gt;they also have their own variable declaration process&lt;/strong&gt;. So every variable that's defined within the function will just get defined after calling that function even if it was a global variable (using the &lt;code&gt;var&lt;/code&gt; keyword).&lt;/p&gt;

&lt;p&gt;Notice that I didn't mention the declaration of the function itself in the main process, as functions aren't as variables, variables have to be declared before using them, &lt;strong&gt;while functions can be declared after calling them the interpreter will find the function declaration and run it&lt;/strong&gt; (Unlike what's happening is a language like C where a function has to be declared before it's called).&lt;/p&gt;

&lt;h2&gt;
  
  
  What Are Arrow Functions?
&lt;/h2&gt;

&lt;p&gt;We can think of arrow functions as a smaller version of functions. It's a function that uses a new syntax that was introduced by &lt;em&gt;ES6&lt;/em&gt;. It's mostly used for simple events that don't deserve their function, and it is worth mentioning that it's returning by default, so you don't need to return the value by the keyword &lt;code&gt;return&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Also, you can't use the &lt;code&gt;this&lt;/code&gt; keyword within any arrow function. Which can be bad in some cases (thinking of the &lt;em&gt;Vue2&lt;/em&gt; example that will be mentioned later in this article)&lt;/p&gt;

&lt;p&gt;Syntax:&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="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="o"&gt;=&amp;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;num1&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt; &lt;span class="c1"&gt;// You can use it like this&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="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;num1&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt; &lt;span class="c1"&gt;// you don't need to have the return&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="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;num1&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// if it's just one action there's no need for the brances&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;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;firstNumber&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&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;secondNumber&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;29&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;lessOrMoreThan50&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="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;num&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;lessOrMoreThan50&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;firstNumber&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;secondNumber&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;abs&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;firstNumber&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;secondNumber&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you see we used the arrow function as an argument of the &lt;code&gt;lessOrMoreThan50&lt;/code&gt; function (this is just an example to show the case of using the arrow function).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Its best use-case is getting some event done to be passed directly to something else like a function or even a loop.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can also store the arrow function in a variable like so:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;numbersList&lt;/span&gt; &lt;span class="o"&gt;=&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;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;22&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;31&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;23&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;oddNumbersInList&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;numbersList&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;oddNumbersList&lt;/span&gt; &lt;span class="o"&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="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;numbersList&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;oddNumbersList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;append&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="p"&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;oddNumbersList&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;oddNumbersInList&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;numbersList&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Difference Between Normal &amp;amp; Arrow Functions
&lt;/h2&gt;

&lt;p&gt;I'll start by saying that I prefer using normal functions in most cases, and I'll explain why I like it more, and I'll also add some of the main differences between the two methods.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Appear Of The Function
&lt;/h3&gt;

&lt;p&gt;For me and a lot of developers, we find ourselves seeing the normal function as a function, while just seeing the arrow function used as a function instead makes it sound weird, it's more obvious for the eye when seeing the &lt;code&gt;function&lt;/code&gt; the keyword that the following is a function that can be called somewhere else.&lt;/p&gt;

&lt;p&gt;So when I see a normal function I know it's going to be used somewhere else, unlike when I see a variable containing an arrow function, it sounds more like a variable by just seeing the &lt;code&gt;var&lt;/code&gt;, &lt;code&gt;let&lt;/code&gt;, and &lt;code&gt;const&lt;/code&gt; keywords.&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;buildArch1&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;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;buildArch2&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="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;Also seeing the last code example above, you can see that the arrow function is more to type compared to the normal function.&lt;br&gt;&lt;br&gt;
Also if you tried to type it yourself you'll find yourself getting your fingers away from the home raw more in the arrow function.&lt;/p&gt;
&lt;h3&gt;
  
  
  Where It Can Be Called
&lt;/h3&gt;

&lt;p&gt;The last section might be considered a personal preference. But this one is different, as it's part of the placing of your code.&lt;/p&gt;

&lt;p&gt;When we make an arrow function and store it in a variable &lt;strong&gt;it's treated as a variable&lt;/strong&gt; mainly.&lt;/p&gt;

&lt;p&gt;Putting the explanation of the function process and the knowledge you know generally about variables (they have to be declared before being called).&lt;/p&gt;

&lt;p&gt;You have to declare the arrow function before it's called! You can't have the callee function after the caller function (which is the considered practice for clean code).&lt;/p&gt;

&lt;p&gt;Let's have some code examples.&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="c1"&gt;// this code will work &lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;createNewProfile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&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;age&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&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;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nf"&gt;createId&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="c1"&gt;// This will work&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;createId&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;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// this will now work&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;createNewProfile&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&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;age&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;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&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;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nf"&gt;createId&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="c1"&gt;// This will give you an error&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;createId&lt;/span&gt; &lt;span class="o"&gt;=&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="o"&gt;=&amp;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;Notice that the one that didn't work is the one using the arrow function, the reason for that is that the &lt;strong&gt;arrow function is treated as a variable&lt;/strong&gt;, so it must be declared before it's used even in another function. Unlike normal functions which get declared when it's called like it was explained in the functions process section above.&lt;/p&gt;

&lt;h3&gt;
  
  
  Usage within an object
&lt;/h3&gt;

&lt;p&gt;One of the most used data patterns in &lt;em&gt;ES6&lt;/em&gt; is the &lt;strong&gt;object&lt;/strong&gt;, you can find that it was the main build block of the &lt;em&gt;Vue2&lt;/em&gt; and we were using it in different ways to get things done.&lt;/p&gt;

&lt;p&gt;example from the &lt;em&gt;Vue&lt;/em&gt; document:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
export default {
    methods: {
        increment() {
            this.count++;
        }
    }
}
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the document, they mentioned that &lt;strong&gt;you can't use the&lt;/strong&gt; &lt;code&gt;this&lt;/code&gt; keyword in any arrow function which made them recommend using the above syntax.&lt;/p&gt;

&lt;p&gt;There's also another unpopular way of doing the same thing:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
export default {
    methods: {
        increment: function() {
            this.count++;
        }
    }
}
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Just seeing this makes you prefer the first one, but &lt;strong&gt;both of them are the same&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;while the arrow functions will look like this (&lt;strong&gt;it will NOT work&lt;/strong&gt;):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
export default {
    methods: {
        increment: () =&amp;gt; {
            this.count++; // This will not work as the this keyword doesn't work in arrow functions
        }
    }
}
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;I talked a bit deeper this time, as &lt;strong&gt;functions aren't just some random thing, it's an important concept in programming&lt;/strong&gt; that has a lot to it, especially in languages like JavaScript.&lt;/p&gt;

&lt;p&gt;If you didn't understand any part (and that's fine) you can contact me through Twitter and I'll try to give you simpler examples or give you some ideas to try yourself.&lt;/p&gt;

&lt;p&gt;This article focused on the functions area in JavaScript, &lt;strong&gt;but a lot of these concepts apply to a lot of other languages&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;It's also important to note that I'm not telling anyone to just use normal functions, I like arrow functions and we need them, but only using them because other developers do is no good. &lt;strong&gt;Understand then decide if you need it or not&lt;/strong&gt;. I suggest using &lt;strong&gt;arrow functions where it's simple action or an action that doesn't need to be separated from the rest or it'll be incomplete if it was separated&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I hope you enjoyed the article and got something out of it, till the next time! ;)&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>JavaScript struggles - part 6 | truthy &amp; falsy values</title>
      <dc:creator>Abdelrahman Dwedar</dc:creator>
      <pubDate>Thu, 21 Jul 2022 19:10:00 +0000</pubDate>
      <link>https://forem.com/abdelrahman_dwedar/javascript-struggles-6-truthy-falsy-values-1hoc</link>
      <guid>https://forem.com/abdelrahman_dwedar/javascript-struggles-6-truthy-falsy-values-1hoc</guid>
      <description>&lt;p&gt;When we use most of programming languages or scripting languages we have some values that &lt;u&gt;isn't&lt;/u&gt; a boolean valaue but it works as so.&lt;br&gt;&lt;br&gt;
We mostly call it truthy &amp;amp; falsy values.&lt;/p&gt;
&lt;h2&gt;
  
  
  Content table
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Truthy values&lt;/li&gt;
&lt;li&gt;falsy&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Truthy Values &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Personally I like to think of truthy values as a variable that have an actual value in it.&lt;/p&gt;

&lt;p&gt;Sort of messy?&lt;br&gt;
Think of it like that: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A value that isn't empty is a valuable value, but when it's empty it's &lt;u&gt;not&lt;/u&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let's see some examples&lt;/p&gt;
&lt;h6&gt;
  
  
  We'll use the &lt;code&gt;!!&lt;/code&gt; keyword to turn the value into boolean value t check what is the output.
&lt;/h6&gt;
&lt;h3&gt;
  
  
  String
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&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="o"&gt;!!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&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="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hi there&lt;/span&gt;&lt;span class="dl"&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="o"&gt;!!&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  Number
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&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="o"&gt;!!&lt;/span&gt;&lt;span class="mi"&gt;18&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;88&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="o"&gt;!!&lt;/span&gt;&lt;span class="nx"&gt;num&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  Other
&lt;/h3&gt;

&lt;p&gt;Any object (&lt;code&gt;{}&lt;/code&gt;) or Array (&lt;code&gt;[]&lt;/code&gt;) are truthy values, &lt;u&gt;even if they were empty&lt;/u&gt;!!&lt;br&gt;
So be aware if you want to use an object or array for storing, you have to get the values inside of the array or object. &lt;/p&gt;


&lt;h2&gt;
  
  
  Falsy Values &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;A falsy value is the opposite of the truthy values.&lt;/p&gt;
&lt;h3&gt;
  
  
  String
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&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="o"&gt;!!&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;
  
  
  Number
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&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="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="c1"&gt;// false&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="o"&gt;!!&lt;/span&gt;&lt;span class="kc"&gt;NaN&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;h6&gt;
  
  
  To know more about NaN check out the &lt;a href="https://dev.to/abdelrahman_dwedar/javascript-struggles-part-2-numbers-4f2l"&gt;article about numbers&lt;/a&gt;
&lt;/h6&gt;
&lt;h3&gt;
  
  
  Other
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;null&lt;/code&gt; object is also falsy value.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;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="o"&gt;!!&lt;/span&gt;&lt;span class="kc"&gt;null&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;h2&gt;
  
  
  Use Cases
&lt;/h2&gt;

&lt;p&gt;There's of cause some amazing use cases of knowing this, you can stop a process if the value wasn't a number like so, as if you turned a text into number it turn into &lt;code&gt;NaN&lt;/code&gt; and it's a falsy value.&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="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;inputValue&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;// Actions&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;Thanks for reading I hope you gain new things out of this article 😄&lt;/h3&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>JavaScript Struggles - Part 5 | Data Types</title>
      <dc:creator>Abdelrahman Dwedar</dc:creator>
      <pubDate>Wed, 29 Jun 2022 10:11:51 +0000</pubDate>
      <link>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-5-data-types-12an</link>
      <guid>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-5-data-types-12an</guid>
      <description>&lt;p&gt;&lt;strong&gt;Hey there! 👋🏻&lt;/strong&gt;&lt;br&gt;
We're now going to explain the data types of JavaScript, I'm only going to talk this time about the data types itself, ⚠️ &lt;u&gt;I'm not going to explain the (truthy &amp;amp; false) subject now&lt;/u&gt; ⚠️.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This's just a basic view of the data types of JavaScript.&lt;/strong&gt;&lt;/p&gt;


&lt;h3&gt;
  
  
  Data types:-
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Undefined&lt;/li&gt;
&lt;li&gt;Null&lt;/li&gt;
&lt;li&gt;Number&lt;/li&gt;
&lt;li&gt;String&lt;/li&gt;
&lt;li&gt;NaN&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  Undefined &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Undefined&lt;/code&gt; is actually a &lt;strong&gt;data type&lt;/strong&gt; in JavaScript.&lt;br&gt;
Even though that is weird, but you'll get used to it.&lt;/p&gt;

&lt;p&gt;it's the &lt;strong&gt;&lt;u&gt;default&lt;/u&gt;&lt;/strong&gt; data type if you didn't assign anything in the variable.&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;var&lt;/span&gt; &lt;span class="nx"&gt;varName&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="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;varName&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// outputs: undefined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Null &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Null is a data type that have to be assigned.&lt;br&gt;
The best use of it is to find the &lt;code&gt;undefined&lt;/code&gt; variables.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Also important to know that null is an &lt;code&gt;object&lt;/code&gt; so whenever you want to check the data type of a variable that contains a &lt;code&gt;null&lt;/code&gt; it'll return "object".&lt;br&gt;
&lt;/p&gt;


&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;nullVariable&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;nothingHere&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;nullVariable&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;nothingHere&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// that will output true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But the confusing sometimes, but no worries I covered it already on a &lt;a href="https://dev.to/abdelrahman_dwedar/javascript-struggles-part-2-numbers-4f2l#null"&gt;previous post&lt;/a&gt;   &lt;/p&gt;




&lt;h2&gt;
  
  
  Number &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;The data type &lt;code&gt;number&lt;/code&gt; is so familiar for most developers, it have a number. :)&lt;/p&gt;

&lt;p&gt;Simple right?&lt;/p&gt;

&lt;p&gt;But sometimes JavaScript has to be JAVASCRIPT, and add some weird things around it.&lt;br&gt;
It's considered &lt;strong&gt;bad at math&lt;/strong&gt;, or to be more specific; it's actually &lt;u&gt;bad at float-point&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Which I'll cover in upcoming post, so stay tuned.&lt;/strong&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  String &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;String&lt;/code&gt; is actually so simple.&lt;/p&gt;

&lt;p&gt;It's just like the string of any other language but with some features.&lt;/p&gt;

&lt;p&gt;There's 3 ways of using string in JavaScript:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Single quote &lt;code&gt;'string'&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Double quote &lt;code&gt;"string"&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;And the backticks
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Single quote &lt;code&gt;'string'&lt;/code&gt; &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;The single quotes is used just as the normal string.&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;stringVar&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello world!&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;h3&gt;
  
  
  Double quote &lt;code&gt;"string"&lt;/code&gt; &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;This is the normal string itself!! &lt;br&gt;
I think it doesn't need an explanation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Backticks &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;What is even backticks?&lt;br&gt;
It's the string that uses ` instead of " or '&lt;/p&gt;

&lt;p&gt;It's actually the best practice in my opinion &lt;u&gt;for JavaScript&lt;/u&gt; at it provides the furmated string feature with it as you use it, also enables using multiple lines (it doesn't apply on web as you need to use &lt;code&gt;&amp;lt;br /&amp;gt;&lt;/code&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;furmattedString&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`the answer is &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;5&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="nx"&gt;furmattedString&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// the answer is 10&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;multilineString&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`Hello there!
I'm Abdelrahman!`&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;multilineString&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="cm"&gt;/*
Hello there!
I'm Abdelrahman!
*/&lt;/span&gt;

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

&lt;/div&gt;




&lt;h2&gt;
  
  
  NaN &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;I've already explained &lt;code&gt;NaN&lt;/code&gt; in &lt;a href="https://dev.to/abdelrahman_dwedar/javascript-struggles-part-2-numbers-4f2l#nan"&gt;previous post&lt;/a&gt; &lt;br&gt;
So let me be the lazy developer I am and not repeat that again 🥱&lt;/p&gt;




&lt;p&gt;&lt;b&gt;&lt;u&gt;That's all for now! I hope you gain anything new from this post. 😄&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>JavaScript Struggles - Part 4 | Comparing</title>
      <dc:creator>Abdelrahman Dwedar</dc:creator>
      <pubDate>Sun, 28 Nov 2021 07:39:32 +0000</pubDate>
      <link>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-4-comparing-1op4</link>
      <guid>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-4-comparing-1op4</guid>
      <description>&lt;h3&gt;&lt;b&gt;&lt;u&gt;Here we go again!&lt;/u&gt;&lt;/b&gt;&lt;/h3&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%2Fdnm9rmcom2iajrde3w8k.gif" 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%2Fdnm9rmcom2iajrde3w8k.gif" alt="Welcome back" width="480" height="216"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This one is very easy but we all have to know it, you may already heard about it somewhere else too.&lt;br&gt;
If you weren't familiar with JS's comparing way keep going. If you're then this post is not for you. 😊👏🏻 &lt;/p&gt;



&lt;p&gt;There's two ways of comparing variables in JavaScript:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Two&lt;/strong&gt; Equal Signs (==)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Three&lt;/strong&gt; Equal Signs (===)&lt;/li&gt;
&lt;/ul&gt;


&lt;h3&gt;
  
  
  &lt;strong&gt;Two&lt;/strong&gt; Equal Signs (==) &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;Most majority of programming languages uses &lt;code&gt;==&lt;/code&gt; as the one and only comparing operator, but in JavaScript we're special. 😏&lt;/p&gt;

&lt;p&gt;&lt;code&gt;==&lt;/code&gt; is only comparing the value of the variable, ignoring the data type of it; so if there's a number that is equal to a number &lt;u&gt;inside the string&lt;/u&gt; it'll always be true.&lt;/p&gt;

&lt;p&gt;E.g.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;0&lt;/span&gt;&lt;span class="dl"&gt;'&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="c1"&gt;// Outputs: true&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="mi"&gt;1&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="c1"&gt;// Outputs: true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;The data type of the variable will not be changed after the comparison&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;
  Some of Its Uses
  &lt;br&gt;
We can use it to check if the number is not &lt;code&gt;0&lt;/code&gt; or an empty string.&lt;br&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;num&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="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;word&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="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;num&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="c1"&gt;// Outputs: false&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;word&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="c1"&gt;// Outputs: false&lt;/span&gt;

&lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;word&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hey!&lt;/span&gt;&lt;span class="dl"&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="nx"&gt;num&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="c1"&gt;// Outputs: true&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;word&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="c1"&gt;// Outputs: true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Three&lt;/strong&gt; Equal Signs (===) &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;We use this as the normal comparing operator, that's only working with &lt;strong&gt;JavaScript&lt;/strong&gt;, &lt;strong&gt;TypeScript&lt;/strong&gt;, &lt;strong&gt;PHP&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;What &lt;code&gt;===&lt;/code&gt; actually does is that it compares the value &lt;u&gt;and the data type&lt;/u&gt;.&lt;/p&gt;

&lt;p&gt;E.g.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;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="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="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="c1"&gt;// Outputs: false&lt;/span&gt;

&lt;span class="cm"&gt;/* They must be of the same data type. */&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="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="o"&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="c1"&gt;// Outputs: true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;===&lt;/code&gt; is the most used one. Probably because it's the easy way of conparing and we all understand it even if JavaScript wasn't your first language.&lt;/p&gt;






&lt;h4&gt;Thanks for reading! 😌&lt;br&gt;&lt;br&gt;
I hope this may be helpful for someone.&lt;h4&gt;
&lt;br&gt;
&lt;/h4&gt;
&lt;br&gt;
&lt;/h4&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>JavaScript Struggles - Part 3 | String Auto Converting</title>
      <dc:creator>Abdelrahman Dwedar</dc:creator>
      <pubDate>Fri, 19 Nov 2021 16:00:28 +0000</pubDate>
      <link>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-3-string-auto-converting-4oje</link>
      <guid>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-3-string-auto-converting-4oje</guid>
      <description>&lt;p&gt;One of the weirdest things that JS do is converting string variable to numbers by itself.&lt;/p&gt;

&lt;h2&gt;When does it convert string to number?&lt;/h2&gt;

&lt;p&gt;We have 4 operators that can turn the string to number &lt;u&gt;when the string value is numbers&lt;/u&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Plus (+)&lt;/li&gt;
&lt;li&gt;Minus (-)&lt;/li&gt;
&lt;li&gt;Multiply (*)&lt;/li&gt;
&lt;li&gt;Divide (/)&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Plus (+) &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;In JavaScript the plus operator have &lt;u&gt;two&lt;/u&gt; cases.&lt;/p&gt;

&lt;p&gt;1- When you use the + with a &lt;code&gt;string&lt;/code&gt; that &lt;u&gt;only have numbers&lt;/u&gt; it'll be converted automatically to &lt;code&gt;number&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;1&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;2&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Outputs: 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2- When you use the + with a &lt;code&gt;string&lt;/code&gt; that &lt;u&gt;contains text&lt;/u&gt;, it'll not be converted to number; it'll be added to the text.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hey&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;There&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Outputs: HeyThere&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Minus (-) &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Whenever we use - in our code the string automatically get converted to number.&lt;/p&gt;

&lt;p&gt;E.g.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;5&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Outputs: 4&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;5&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;2&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Outputs: 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Multiply (*) &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Whenever we use * in our code the string automatically get converted to number.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;5&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Outputs: 15&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;5&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;2&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Outputs: 10&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Divide (/) &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Whenever we use / in our code the string automatically get converted to number.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;6&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&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;// Outputs: 3&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;9&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;3&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Outputs: 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;Thanks for reading! 😁&lt;/h1&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>JavaScript Struggles - Part 2 | Numbers</title>
      <dc:creator>Abdelrahman Dwedar</dc:creator>
      <pubDate>Sat, 30 Oct 2021 02:12:36 +0000</pubDate>
      <link>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-2-numbers-4f2l</link>
      <guid>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-2-numbers-4f2l</guid>
      <description>&lt;p&gt;I personally didn't understand how do JS act with number, but after I learnt about it.&lt;/p&gt;

&lt;p&gt;We have to understand what's the data types of JavaScript, and how to use them. Let me help you with it. 😄&lt;br&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%2Fwy91zs39r3bci52vehd0.gif" 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%2Fwy91zs39r3bci52vehd0.gif" alt="Let's gooo" width="270" height="480"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h5&gt;
  
  
  In JS we have three &lt;strong&gt;data types&lt;/strong&gt; for numbers: &lt;code&gt;Number&lt;/code&gt;, &lt;code&gt;null&lt;/code&gt;, &lt;code&gt;NaN&lt;/code&gt;.
&lt;/h5&gt;

&lt;p&gt;I'll explain each of them and give an example for each of them.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Number&lt;/code&gt;: The main Number data type.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;null&lt;/code&gt;: intentional absence of any object value.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;NaN&lt;/code&gt;: Not a Number.&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  Number &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;whether it's integer like: &lt;code&gt;1&lt;/code&gt;&lt;br&gt;
or float like: &lt;code&gt;1.3&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;It is number, if there was a decimal number it'll add it, if not it'll sow up as normal integer.&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;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="mi"&gt;5&lt;/span&gt;&lt;span class="o"&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;// Outputs: 2.5&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="mi"&gt;4&lt;/span&gt;&lt;span class="o"&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;/// Outputs: 2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;We usually use &lt;code&gt;Number()&lt;/code&gt; to turn the variable to number.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  NULL &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;Null basically is none. If you made undefended variable it'll equal &lt;code&gt;null&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;And &lt;strong&gt;it doesn't mean that it's an empty string or 0&lt;/strong&gt;.&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;nothing&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// This variable is undefined.&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="kc"&gt;null&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;nothing&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Outputs: true&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="kc"&gt;null&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="c1"&gt;// Outputs: false&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="kc"&gt;null&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="c1"&gt;// Outputs: false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h6&gt;
  
  
  That happens because &lt;code&gt;null&lt;/code&gt; only equals the undefined variable. &lt;code&gt;null&lt;/code&gt; and &lt;code&gt;undefined&lt;/code&gt; are equal but &lt;strong&gt;not identical&lt;/strong&gt;.
&lt;/h6&gt;

&lt;p&gt;
  Null usage
  &lt;blockquote&gt;
&lt;p&gt;We can use null data type as 0, since &lt;u&gt;it's an object&lt;/u&gt;.&lt;br&gt;
Let's try it:&lt;/p&gt;


&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;the_number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
&lt;span class="nx"&gt;the_number&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Add 1 to the null variable&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;the_number&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Outputs: 1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;


&lt;p&gt;So we can use &lt;code&gt;null&lt;/code&gt; it instead of 0.&lt;/p&gt;
&lt;h6&gt;
  
  
  We can add that &lt;code&gt;null&lt;/code&gt; is an object data type
&lt;/h6&gt;


&lt;/blockquote&gt;

&lt;/p&gt;






&lt;h3&gt;
  
  
  NaN &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;NaN&lt;/code&gt; stands for &lt;strong&gt;Not a Number&lt;/strong&gt;, and it appears if you you have a &lt;strong&gt;filled string&lt;/strong&gt; and converted it to number.&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;thing&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Something&lt;/span&gt;&lt;span class="dl"&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="nc"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;thing&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Outputs: NaN&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But if you compared &lt;code&gt;NaN&lt;/code&gt; with other &lt;code&gt;NaN&lt;/code&gt; it'll return &lt;br&gt;
&lt;strong&gt;false&lt;/strong&gt;.&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;thing&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Something&lt;/span&gt;&lt;span class="dl"&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="nc"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;thing&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// NaN&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="nc"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;thing&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="kc"&gt;NaN&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;p&gt;
  &lt;strong&gt;How to fix this?&lt;/strong&gt;
  &lt;blockquote&gt;
&lt;p&gt;Use the &lt;code&gt;isNaN()&lt;/code&gt; method instead.&lt;/p&gt;


&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;something&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Value&lt;/span&gt;&lt;span class="dl"&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="nf"&gt;isNaN&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;something&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;isNaN&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;something&lt;/span&gt;&lt;span class="p"&gt;)));&lt;/span&gt; &lt;span class="c1"&gt;// True &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/blockquote&gt;



&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>JavaScript Struggles - Part 1 | Defending Variables</title>
      <dc:creator>Abdelrahman Dwedar</dc:creator>
      <pubDate>Wed, 27 Oct 2021 11:25:29 +0000</pubDate>
      <link>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-1-defending-variables-1dhb</link>
      <guid>https://forem.com/abdelrahman_dwedar/javascript-struggles-part-1-defending-variables-1dhb</guid>
      <description>&lt;h2&gt;
  
  
  Defending variables in &lt;strong&gt;JS&lt;/strong&gt; have its own way.
&lt;/h2&gt;

&lt;p&gt;We have three ways to defend a variable &lt;code&gt;let&lt;/code&gt;, &lt;code&gt;var&lt;/code&gt;, &lt;code&gt;const&lt;/code&gt;.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;Var&lt;/th&gt;
&lt;th&gt;Let&lt;/th&gt;
&lt;th&gt;Const&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Changeable&lt;/td&gt;
&lt;td&gt;✔&lt;/td&gt;
&lt;td&gt;✔&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Block Scope&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;✔&lt;/td&gt;
&lt;td&gt;✔&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Global Scope&lt;/td&gt;
&lt;td&gt;✔&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Make Arrays&lt;/td&gt;
&lt;td&gt;✔&lt;/td&gt;
&lt;td&gt;✔&lt;/td&gt;
&lt;td&gt;✔&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;blockquote&gt;
&lt;p&gt;We mostly use &lt;code&gt;let&lt;/code&gt; because of the block scope which I'll explain in the below. 👇🏻&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Let &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;The keyword &lt;code&gt;let&lt;/code&gt; makes a variable only useable within the scope it made in, &lt;strong&gt;you can't use it outside that scope&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;E.g.&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;





&lt;h2&gt;
  
  
  Var &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;The keyword &lt;code&gt;var&lt;/code&gt; makes a global variable, &lt;strong&gt;you can use it everywhere in the code&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;E.g.&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;





&lt;h2&gt;
  
  
  Const &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;The keyword &lt;code&gt;const&lt;/code&gt; makes an unchangeable variable, &lt;strong&gt;you can't change its value&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;E.g.&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>What language do I start with? (personal opinion)</title>
      <dc:creator>Abdelrahman Dwedar</dc:creator>
      <pubDate>Sat, 16 Oct 2021 19:51:12 +0000</pubDate>
      <link>https://forem.com/abdelrahman_dwedar/what-language-do-i-start-with-personal-opinion-30g4</link>
      <guid>https://forem.com/abdelrahman_dwedar/what-language-do-i-start-with-personal-opinion-30g4</guid>
      <description>&lt;h1&gt;
  
  
  How can we choose our first languages? 🤔
&lt;/h1&gt;

&lt;p&gt;We have to take 5 main standards into account:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How easy it's&lt;/li&gt;
&lt;li&gt;The big of their communities&lt;/li&gt;
&lt;li&gt;The amount of free resources&lt;/li&gt;
&lt;li&gt;The easy you can run the code (Their IDEs are easy)&lt;/li&gt;
&lt;li&gt;The most in-demand&lt;/li&gt;
&lt;/ul&gt;



&lt;h2&gt;
  
  
  How easy it's &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;The starting language for you has to be easy or you might hate programming from the beginning, so you don't have to start with something like &lt;strong&gt;C++&lt;/strong&gt; or &lt;strong&gt;Java&lt;/strong&gt;, it's not about how "cool" that language is, it's about how much you understand it and comfortable with it.&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="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Easy&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Fast&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;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="nb"&gt;puts&lt;/span&gt; &lt;span class="s2"&gt;"and"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;?php&lt;/span&gt;
&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"smooth"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Start with easy programming languages like &lt;strong&gt;Python&lt;/strong&gt;, &lt;strong&gt;JavaScript&lt;/strong&gt;, &lt;strong&gt;Ruby&lt;/strong&gt;, &lt;strong&gt;PHP&lt;/strong&gt;.&lt;/p&gt;
&lt;h6&gt;
  
  
  The most important thing that you don't think that programming itself is easy, that may cause you to stop and get bored.
&lt;/h6&gt;



&lt;h2&gt;
  
  
  The big of their communities &lt;a&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Starting with a language that has a big community will make starting with it much easier. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You can start with something easy like PHP, Ruby, etc... but why do we start with Python &amp;amp; JS?&lt;/strong&gt;&lt;br&gt;because they have a really big community that can help you whenever you're stuck. and you need that help while starting. BUT you can start with others too.&lt;/p&gt;


&lt;div class="ltag__link"&gt;
  &lt;a href="/slashdatahq" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&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%2Fuser%2Fprofile_image%2F266264%2F75eb74bc-a420-4df9-b92e-744a4772f739.jpg" alt="slashdatahq"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/slashdatahq/programming-language-communities-an-update-2pk9" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Programming Language Communities - An update&lt;/h2&gt;
      &lt;h3&gt;SlashData Team ・ Nov 10 '20&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#programming&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#python&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#devrel&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;





&lt;h3&gt;
  
  
  The amount of free resources &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;When you start learning to program the resources is the most important thing to think about, some languages don't have easy-to-get resources.&lt;/p&gt;

&lt;p&gt;Some useful resources for beginners can be: &lt;a href="https://www.w3schools.com/" rel="noopener noreferrer"&gt;W3Schools&lt;/a&gt;, &lt;a href="http://sololearn.com/" rel="noopener noreferrer"&gt;SoloLearn&lt;/a&gt;, &lt;a href="https://stackoverflow.com/" rel="noopener noreferrer"&gt;StackOverFlow&lt;/a&gt;, &lt;a href="https://www.tutorialspoint.com/" rel="noopener noreferrer"&gt;TutorialsPoint&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Resources are very important &lt;strong&gt;especially if you're self-learning&lt;/strong&gt;.&lt;/p&gt;

&lt;h5&gt;
  
  
  So find a programming language that has &lt;strong&gt;a lot of recourses&lt;/strong&gt;
&lt;/h5&gt;

&lt;h6&gt;
  
  
  Pro-Tip: Reading the docs is very useful to understand any language, you'll find most of them in &lt;a href="https://devdocs.io/" rel="noopener noreferrer"&gt;devdocs.io&lt;/a&gt;.
&lt;/h6&gt;



&lt;h3&gt;
  
  
  The easy you can run the code (Their IDEs are easy) &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Running&lt;/strong&gt;, &lt;strong&gt;debugging&lt;/strong&gt; and &lt;strong&gt;testing&lt;/strong&gt; is so important for any programmer\developer and you have to learn it, but if it isn't easy that'll take so much time of you just trying to run it while you can use other languages like &lt;strong&gt;Python&lt;/strong&gt; or such and run it easily and that'll make you well progress in lesser time.&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%2F5tin5pv53v2sfz9jmzir.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%2F5tin5pv53v2sfz9jmzir.png" alt="Best IDEs" width="500" height="375"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can use &lt;a href="https://visualstudio.microsoft.com/" rel="noopener noreferrer"&gt;Visual Studio&lt;/a&gt; or &lt;a href="https://code.visualstudio.com/" rel="noopener noreferrer"&gt;Visual Studio Code&lt;/a&gt; since it can run lots of languages and they're easy to use.&lt;br&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  The most in-demand &lt;a&gt;&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;The best language to start with is the one that you can work with once you finish learning it, or at least you have more years of experience since you started earlier, which indeed will increase your chance of finding a job.&lt;br&gt;
So you have to choose a language you might start with after learning it, so you have to know what do most companies search for.&lt;/p&gt;

&lt;h5&gt;
  
  
  The Most In-Demand Programming Languages in 2021
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://bootcamp.berkeley.edu/blog/most-in-demand-programming-languages/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.ucberkeleybootcamp.com%2Fwp-content%2Fuploads%2Fsites%2F106%2F2020%2F12%2Fmost-demand-programming-languages-2021-1017x1024.jpg" alt="The Most In-Demand Programming Languages in 2021" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h6&gt;
  
  
  Click on the picture to check the resource
&lt;/h6&gt;

&lt;p&gt;This list is only for 2021, if you are reading this in like 2024, 2025, etc... the in-demand languages will be changed probably, so you have to &lt;a href="https://www.google.com/search?q=most-in-demand-programming-languages&amp;amp;rlz=1C1CHBD_arEG952EG952&amp;amp;oq=most-in-demand-programming-languages&amp;amp;aqs=chrome..69i57j69i60.666j0j7&amp;amp;sourceid=chrome&amp;amp;ie=UTF-8" rel="noopener noreferrer"&gt;Google&lt;/a&gt; it yourself 😄&lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Recommendations
&lt;/h2&gt;

&lt;p&gt;You're not required to follow all the standards of this post, there are more important ones, so you have to just measure them, don't take it for granted. Good luck. 👍🏻&lt;/p&gt;

&lt;h5&gt;
  
  
  Keep in mind:
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;Keep in mind that depending on the field you'll work in, you have to choose your first language since some languages are better in fields that others aren't; such as &lt;strong&gt;JS&lt;/strong&gt; or &lt;strong&gt;PHP&lt;/strong&gt; to &lt;u&gt;web development&lt;/u&gt;, &lt;strong&gt;C#&lt;/strong&gt; or &lt;strong&gt;C++&lt;/strong&gt; to &lt;u&gt;game development&lt;/u&gt;, &lt;strong&gt;Python&lt;/strong&gt; to &lt;u&gt;AI &amp;amp; Machine Learning&lt;/u&gt; etc...&lt;/li&gt;
&lt;li&gt;Do not be intolerant of the language you will start with or force others to start with it as well.&lt;/li&gt;
&lt;li&gt;Don't stop learning, and don't reject learning a new language for no reason.&lt;/li&gt;
&lt;li&gt;When you learn your first language; focus more on learning the basics of programming itself, not just learning the language.


&lt;h3&gt;Thank you for reading 😊&lt;/h3&gt;
I've love to hear what do you think about that topic in the discussion below. &lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>python</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
