<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Alex Kharouk</title>
    <description>The latest articles on DEV Community by Alex Kharouk (@kharouk).</description>
    <link>https://dev.to/kharouk</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%2F85930%2F0868ee73-1ee3-424e-a3c3-63b35ec21d68.jpeg</url>
      <title>DEV Community: Alex Kharouk</title>
      <link>https://dev.to/kharouk</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kharouk"/>
    <language>en</language>
    <item>
      <title>Book Club: Eloquent JavaScript - Chapter 3</title>
      <dc:creator>Alex Kharouk</dc:creator>
      <pubDate>Tue, 10 Aug 2021 16:31:10 +0000</pubDate>
      <link>https://dev.to/kharouk/eloquent-js-chapter-3-the-world-of-functions-il6</link>
      <guid>https://dev.to/kharouk/eloquent-js-chapter-3-the-world-of-functions-il6</guid>
      <description>&lt;h2&gt;
  
  
  The World of Functions
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Quick update
&lt;/h3&gt;

&lt;p&gt;It's been almost a month since I published the first part of the Eloquent JavaScript Book Club series. I enjoyed the feedback I received from the Dev.to community and was happy to see folks wanting to join the book club and read along. However, as it has been almost a month, I'm sure many of you continued and finished the book without me. It's cool; I get it. Personally, a lot has happened in my life.&lt;/p&gt;

&lt;p&gt;I quit my current job and am very happy to have accepted an excellent offer at a great company. I received an unconditional offer for a Masters in Computer Science &amp;amp; Artificial Intelligence, where I'll be studying part-time for the next two years. I learned a heck load of data structures, algorithms, systems design, and everything in between.&lt;/p&gt;

&lt;p&gt;It's been a wild month, but I'm ready to sit back a bit. Drink a nice cold brew. Open up the dusty textbook and get into some &lt;em&gt;eloquent JavaScript&lt;/em&gt;. Before we start, I want to quickly mention that I also completed the &lt;a href="https://justjavascript.com/"&gt;Just JavaScript&lt;/a&gt; book/workshop/mini-course by Dan Abramov. I've already seen some parallels between eloquent JS and that course. I would wholeheartedly recommend getting into both. It helped solidify my mental model of how things like variables (and functions) work. There should be a blog post to analyse the two texts.&lt;/p&gt;

&lt;p&gt;Right, &lt;strong&gt;functions&lt;/strong&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;People think that computer science is the art of geniuses, but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Donald Knuth&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without functions, our code wouldn't function well. It will still do its job. Expressions and statements will continue to execute whilst our bindings (variables) will continue latching onto data. But without some order or a way of keeping related code together, it'd be complicated to manage.&lt;/p&gt;

&lt;p&gt;We can create functions with a function expression. It's similar to how we have defined variables.&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;addTwo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&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="k"&gt;return&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="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;num&lt;/code&gt; is a &lt;em&gt;parameter&lt;/em&gt;, whilst the curly braces encapsulate the &lt;em&gt;body&lt;/em&gt; of the function. The code above creates a constant called &lt;code&gt;addTwo&lt;/code&gt; and binds it to a function that takes in a number and adds two to it.&lt;/p&gt;

&lt;p&gt;Some functions have a return statement. Others return nothing at all. Yet just because it seems like it returns nothing in the code, in reality, all operations with no explicit return statement return &lt;code&gt;undefined.&lt;/code&gt; Another example is to open your browser's console, and type in &lt;code&gt;console.log('hello')&lt;/code&gt;. You'll see hello being printed, but you'll also get the type &lt;code&gt;undefined&lt;/code&gt; returned. That's because the &lt;code&gt;.log()&lt;/code&gt; is a function that doesn't return anything. It just runs a side effect, which is the printed message.&lt;/p&gt;

&lt;p&gt;Side note, the same thing happens when we execute an expression like &lt;code&gt;let x =&lt;br&gt;
  42;&lt;/code&gt; as variable declarations do not produce a value but returns something.&lt;/p&gt;

&lt;h3&gt;
  
  
  Understanding Scope
&lt;/h3&gt;

&lt;p&gt;A crucial advantage that a function has is being able to have it's own scope. It's a mechanism that allows a function to deal with its internal state and prevent other functions from manipulating state. It creates separation of scope, where you have the &lt;em&gt;global&lt;/em&gt; scope (outside the function), and the &lt;em&gt;inner&lt;/em&gt; scope. Global scope is like setting some variables at the top of your file.&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;time&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;9&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;closingTime&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Functions have the ability to read those variables, and even manipulate them (we will discuss why this is not necessarily good). However, we can't reach into functions and control the variables.&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;personalSchedule&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;doctorsAppointment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;doctorsAppointment&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// doctorsAppointment is not defined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These variables are known as local variables (or local bindings). They only exist for a limited amount of time, when the function is called. Then, once the the function has finished executing, they cease to exist. It's quite melancholic.&lt;/p&gt;

&lt;p&gt;A key thing to note is that variables declared with &lt;code&gt;let&lt;/code&gt; or &lt;code&gt;const&lt;/code&gt; are local to the &lt;strong&gt;block&lt;/strong&gt; they are called in, and therefore can not be called outside the block, unlike &lt;code&gt;var&lt;/code&gt;. A great example is a for loop:&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;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// execute code&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// undefined&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;var&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// execute code&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 5&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notice the difference in the highlights&lt;/p&gt;

&lt;p&gt;Another thing to note is that whilst we can't &lt;em&gt;look inside&lt;/em&gt; a function to get its variables, we can look outside the scope of the function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;x&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;const&lt;/span&gt; &lt;span class="nx"&gt;halve&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&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;divided&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;x&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;print&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 10&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;divided&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 5&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="nx"&gt;print&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;halve&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;print&lt;/code&gt; function inside halve can interact with both the &lt;code&gt;x&lt;/code&gt; variable in the global scope, as well as the &lt;code&gt;divided&lt;/code&gt; variable within the scope of the &lt;code&gt;halve&lt;/code&gt; function. This is also known as &lt;strong&gt;lexical scoping&lt;/strong&gt;, where each local scope can also see all the local scopes that contain it. On top of that, all scopes can see the global scope.&lt;/p&gt;

&lt;h3&gt;
  
  
  Declaring Functions
&lt;/h3&gt;

&lt;p&gt;We've seen functions declared as an expression. We can also assign them in a shorter way through what is known as &lt;strong&gt;function declarations&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;function&lt;/span&gt; &lt;span class="nx"&gt;booDeclare&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`BOO! Did I scare you &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;?`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// how we would write it before&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;boo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There is a difference between the two, and it's primarily due to something called &lt;em&gt;hoisting&lt;/em&gt; (we won't get into this right now). If you were to call &lt;code&gt;booDeclare&lt;/code&gt; before it was declared, you would see that it still works. However, we can't say the same for the other function. This is due to function declarations being &lt;em&gt;hoisted&lt;/em&gt; up to the top of the conceptual page, and thus is able to be used anywhere in the code.&lt;/p&gt;

&lt;p&gt;This kind of makes sense, as the second function is more like how we declare a variable, and that we are unable to know what the variable binds to before it is declared.&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I am walking through a haunted house&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;booDeclare&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alex&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// works&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;booDeclare&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`BOO! Did I scare you &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;?`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;boo&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Cannot access 'boo' before initialization&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;boo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`BOO! Did I scare you &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;?`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ghost&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Cannot access 'ghost' before initialization&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ghost&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;nice ghost&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;
  
  
  Arrow functions
&lt;/h3&gt;

&lt;p&gt;You might be familiar with arrow functions as well. They are newer syntax, and they provide us a way of writing small function expressions in a (my opinion) cleaner manner.&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;owedMoney&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="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;sum&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="c1"&gt;// can be written as&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;owedMoney&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;sum&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 is less verbose, as it now implicitly returns the value that sum is bound to, and there are no curly braces. There is another difference between the arrow function and a function expression, and that is regarding the keyword &lt;a href=""&gt;this&lt;/a&gt;. We will talk about it more once we get to Chapter 6 (can't wait).&lt;/p&gt;

&lt;h3&gt;
  
  
  Optional Arguments
&lt;/h3&gt;

&lt;p&gt;The beauty of JavaScript is that it's quite lenient in what you can do (compared to other languages).&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="nx"&gt;ages&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I have no args&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;ages&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="mi"&gt;52&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;59&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;32&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;53&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;99&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;29&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;48&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;75&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;49&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="c1"&gt;// I have no args&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No errors! What happens here is that JavaScript will ignore all these arguments if they're not being used. Simple. Even if you specified the arguments, and didn't provide any parameters, JavaScript will still not error out.&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="nx"&gt;ages&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;person2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;person3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;person2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;person3&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;ages&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;19&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 19 undefined undefined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;JavaScript assigns missing parameters to &lt;code&gt;undefined&lt;/code&gt; (similar to when you declare &lt;code&gt;let x;&lt;/code&gt;). It also dismisses any parameters provided if there's no explicit use for them. As you can tell, this is not so beautiful. The downside here is that you can accidentally pass the wrong number of arguments, or none at all, and you might not realise that you have a bug.&lt;/p&gt;

&lt;p&gt;One way to assign a value to an argument even when it's not passed is to use optional arguments.&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="nx"&gt;ages&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;23&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;person2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;99&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;person2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;ages&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="c1"&gt;// 22 99&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Again, this is not the ultimate solution as it will only assign the parameters in order. So if you don't pass anything in the second argument, &lt;code&gt;person2&lt;/code&gt; will always default to 99. That's why it's common to see code like this (albeit this is very contrived).&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="nx"&gt;fetchPosts&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;method&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;GET&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;method&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;h3&gt;
  
  
  Functions and Side Effects
&lt;/h3&gt;

&lt;p&gt;As we've seen, functions can be split into two types. Functions that execute other functions or side effects, and functions that have return values. At times, you will have functions that do both. Each have their own use cases, and their own advantages. Functions with return values will almost always be called more often, since we rely on the values returned to execute more code.&lt;/p&gt;

&lt;p&gt;There are &lt;code&gt;pure&lt;/code&gt; functions, that have the pleasure of always being reliable. The &lt;em&gt;purity&lt;/em&gt; comes from:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;relying on global variables whose values might change&lt;/li&gt;
&lt;li&gt;always returning/producing the same value&lt;/li&gt;
&lt;li&gt;can easily be replaced with a simple value:
&lt;/li&gt;
&lt;/ul&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;return5&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="mi"&gt;5&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;total&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;return5&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 10&lt;/span&gt;
&lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&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="c1"&gt;// 10&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;They are easily testable, making unit tests a breeze to write. They usually are quick to understand, as you don't need to scour other parts of the codebase to see what's being called. In essence, they're great. Yet, that ease comes with a bit of difficulty. Whilst you can write primarily pure functions, you'll realise quickly that some side effects are needed. So unless you're a total purist who despises side effects, I'd say it's fine to have a mixture of both. Like the author says:&lt;/p&gt;

&lt;p&gt;"There'd be no way to write a pure version of console.log, for example, and console.log is good to have."&lt;/p&gt;

&lt;h3&gt;
  
  
  Summary
&lt;/h3&gt;

&lt;p&gt;So, functions. A brilliant addition to our JavaScript tool-belt that allows us to manage multiple kinds of scope, separating code logic, not repeating ourselves, and understanding side effects. The chapter gave us a lot of information, and I think it's an important fundamental to really grasp. The author also brings up concepts like the Call Stack, and Recursion. I decided not to include that in this chapter as I felt it deserved a separate &lt;code&gt;snack-esque&lt;/code&gt; post. You can read more about it on my website, although the blog post is still "growing."&lt;/p&gt;

&lt;p&gt;Thanks for reading! The next chapter will be about some rather essential data structures, &lt;a href="https://eloquentjavascript.net/04_data.html"&gt;Objects and Arrays&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If you'd like to attempt the exercises for the chapter, you can find them &lt;a href="https://eloquentjavascript.net/03_functions.html#h_TcUD2vzyMe"&gt;at the bottom of the chapter&lt;/a&gt;. Let me know how you get on. I definitely recommend going through them, to help solidify your knowledge.&lt;/p&gt;

</description>
      <category>bookclub</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Book Club: Eloquent JavaScript - Chapter 2</title>
      <dc:creator>Alex Kharouk</dc:creator>
      <pubDate>Tue, 06 Jul 2021 07:31:12 +0000</pubDate>
      <link>https://dev.to/kharouk/book-club-eloquent-javascript-chapter-2-55gp</link>
      <guid>https://dev.to/kharouk/book-club-eloquent-javascript-chapter-2-55gp</guid>
      <description>&lt;p&gt;There is joy in reading about JavaScript. It's like catching up with an old friend who is sharing what they've been doing. Lots of cool new ideas; super popular. Yet fundamentally, they haven't changed. They're the same, weird, sometimes awkward friend. That first friend, for some of us. In the end, we're just happy they're doing well.&lt;/p&gt;

&lt;p&gt;That's the sensation I'm getting with reading Eloquent JavaScript. Last time, I began reading the book after a difficult interview. It opened my eyes that I know Javascript, but do I really &lt;em&gt;know&lt;/em&gt; JavaScript? I've received comments that I should read Kyle Simpson's &lt;a href="https://github.com/getify/You-Dont-Know-JS"&gt;YDKJS&lt;/a&gt; (You Don't Know JS) books. I &lt;em&gt;do&lt;/em&gt; own them. I suppose I didn't want to start with a series. I wanted a beginning-to-end kind of story. That said, I wouldn't be surprised if I decide to pick it up after Eloquent JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  On to Chapter 2, &lt;strong&gt;Program Structure&lt;/strong&gt;.
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;And my heart glows bright red under my filmy, translucent skin and they have to administer 10cc of JavaScript to get me to come back. (I respond well to toxins in the blood.) Man, that stuff will kick the peaches right out your gills!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;-_why, &lt;em&gt;Why's (Poignant) Guide to Ruby&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;First of all, what a great quote. I read Why's guide a long time ago. It was humorous and showed me how diverse programming language communities are. Okay, back to the &lt;a href="https://eloquentjavascript.net/02_program_structure.html"&gt;chapter two&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Expressions and Statements
&lt;/h3&gt;

&lt;p&gt;We begin with understanding what &lt;strong&gt;expressions&lt;/strong&gt; are and what are &lt;strong&gt;statements.&lt;/strong&gt; Anything that produces a value is an expression. Anything that is written literally is also a value. &lt;code&gt;22&lt;/code&gt; is an expression. &lt;code&gt;"hello world"&lt;/code&gt; is an expression. Within a line of code, there can be multiple expressions. With that said, the line of code itself would be a &lt;strong&gt;statement&lt;/strong&gt;. &lt;code&gt;1&lt;/code&gt; is an expression, &lt;code&gt;1;&lt;/code&gt; is a statement.&lt;/p&gt;

&lt;p&gt;Notice the difference?&lt;/p&gt;

&lt;p&gt;I like to look at expressions as nouns — statements as verbs or actions. The action can sometimes be implicit, however. In JavaScript, you don't always need to add the &lt;code&gt;;&lt;/code&gt; to denote the end of a statement, so sometimes, you can omit explicit statements for implicit ones.&lt;/p&gt;

&lt;p&gt;Statements can be simple, like &lt;code&gt;1;&lt;/code&gt;. But these statements aren't interesting; they are useless. Interesting statements affect something. Have an impact on its world. They could display something on the screen or update the state of a program. These statements can impact other statements, creating what is known as &lt;strong&gt;side effects.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Side effects might sound familiar to you if you use React Hooks. I've encountered that description due to learning about &lt;code&gt;useEffect&lt;/code&gt;. I always thought side effects were something that the React developers referenced. It's much more than that. A side effect is simply a statement containing an action or result that could impact other statements.&lt;/p&gt;

&lt;h3&gt;
  
  
  Bindings
&lt;/h3&gt;

&lt;p&gt;Marijn uses &lt;strong&gt;bindings&lt;/strong&gt; to describe a way to store data and keep an internal state. If that sounds familiar to you, it may be because you know what variables are. However, Marijn seems to insist and call them bindings. I suppose it has something to do with their definition of a variable.&lt;/p&gt;

&lt;p&gt;A &lt;strong&gt;variable&lt;/strong&gt; is labelled as "not consistent" or having a fixed pattern; it is liable to change. This is partly correct with JavaScript variables. Using keywords like &lt;code&gt;let&lt;/code&gt; or &lt;code&gt;var&lt;/code&gt; makes sense with this definition. Using the keyword &lt;code&gt;const&lt;/code&gt; does not fit this definition. Another way I was taught variables was by thinking about them as boxes. You are designating boxes for data you want to store and use later. If you need that data, you open up the box.&lt;/p&gt;

&lt;p&gt;The author asks you to think a bit differently. Think of variables, or &lt;em&gt;bindings&lt;/em&gt;, like tentacles rather than boxes. Think of them as pointers to values rather than containing values. Here's an example:&lt;br&gt;
&lt;code&gt;let ten = 10&lt;/code&gt;. &lt;code&gt;ten&lt;/code&gt; doesn't unpack and reveal the data &lt;code&gt;10&lt;/code&gt;. What it does is it returns you the number &lt;code&gt;10&lt;/code&gt; that it references.&lt;/p&gt;

&lt;p&gt;It's a curious way of thinking about variables, and maybe a bit too much time was spent thinking about whether they're more like boxes or tentacles. I believe the author to be correct. Variables are references to data in memory. If we look at the code, we see that they are equal when comparing the two bindings. Why? Because &lt;code&gt;10&lt;/code&gt; is saved in memory once, and both &lt;code&gt;ten&lt;/code&gt; and &lt;code&gt;anotherTen&lt;/code&gt; variables reference the number. Same with the string 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;ten&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;anotherTen&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ten&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;anotherTen&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// true; they are equal&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="s1"&gt;hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;anotherWord&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&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="nx"&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="nx"&gt;anotherWord&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;p&gt;Again, something as simple as variables creates a discussion! It's fascinating how, when I first studied Javascript, I essentially skimmed through why &lt;em&gt;things were the way they are.&lt;/em&gt; The rest of the chapter discusses loops and conditional execution (if-statements). If you are unsure about these topics, please make sure you read the chapter. Otherwise, I've noticed two things that I was not familiar with when using loops.&lt;/p&gt;

&lt;h4&gt;
  
  
  Do, while loop.
&lt;/h4&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;yourName&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;do&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;yourName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;what is your name?&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;while&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;yourName&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The difference here is that we always execute the block at least once. We always prompt the user for their name. &lt;/p&gt;

&lt;p&gt;If they don't enter an accepted value, we will be in a loop until we get the name. I usually don't use &lt;code&gt;do, while&lt;/code&gt; loops, but it's good to remember as a reference. Another thing about loops, specifically traditional &lt;code&gt;for&lt;/code&gt; loops, is that they must contain two semicolons. I write the usual syntax so frequently that I never contemplated why I needed the semicolons in the loops. Well, the statement before the first semicolon is an expression or variable declaration. After the first semicolon, we have the &lt;em&gt;condition&lt;/em&gt;, an expression that is evaluated before each loop iteration. Lastly we have the final expression, which will be evaluated at the end of each loop iteration.&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;//Notice empty space  v -- we don't set a condition so it can run forever if we let it&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;current&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;current&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;current&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="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;current&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;7&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="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;current&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;break&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;var&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;for&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;i&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// we need the break statement, and still need the two semicolons!&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So that's it for Chapter two of the book. What did you think of it? Do you think I focused too much on the theory rather than explaining other aspects, such as loops or if-conditions? Are you enjoying the book yourself? I thought this chapter was a bit of a slower pace compared to the first chapter. A minor spoiler, but I have also read the third chapter &lt;strong&gt;Functions&lt;/strong&gt;, and things pick up. By far my favourite chapter, so it's worth getting through chapter two.&lt;/p&gt;

&lt;p&gt;Big thanks for the comments from the dev.to community. If you'd like to see some additional resources recommended by the community, check out the thread for the &lt;a href="https://dev.to/kharouk/book-club-eloquent-javascript-chapter-one-5c0d"&gt;first chapter here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Until next time.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Originally posted on my personal blog website, which you could see at &lt;a href="https://kharo.uk"&gt;alex.kharo.uk&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Extra Exercises:
&lt;/h3&gt;

&lt;p&gt;Chapter 2 introduced some exercises, which included a FizzBuzz exercise. My first attempt was the traditional way:&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;// print fizzBuzz from 1..n&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;fizzBuzz&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&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;i&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="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;15&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;FizzBuzz&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;else&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;i&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Fizz&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;else&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;i&lt;/span&gt; &lt;span class="o"&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;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Buzz&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&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;However we were told to think about a cleverer solution, combining the printed text together:&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="nx"&gt;fizzBuzz&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&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;i&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="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="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="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nx"&gt;word&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Fizz&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&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;0&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="s1"&gt;Buzz&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="nx"&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="nx"&gt;i&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;



</description>
      <category>bookclub</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Book Club: Eloquent Javascript - Chapter 1</title>
      <dc:creator>Alex Kharouk</dc:creator>
      <pubDate>Sat, 03 Jul 2021 16:19:27 +0000</pubDate>
      <link>https://dev.to/kharouk/book-club-eloquent-javascript-chapter-one-5c0d</link>
      <guid>https://dev.to/kharouk/book-club-eloquent-javascript-chapter-one-5c0d</guid>
      <description>&lt;p&gt;I recently did a technical job interview that was for a frontend position. It was for a company that specialised in cybersecurity technologies, but they were looking for React developers to create better UI dashboards for clients.&lt;/p&gt;

&lt;p&gt;I expected the interview to ask some algorithm questions, maybe talk about some JavaScript data structures or optimisation. Instead, I was taken aback by the questions I got. &lt;em&gt;What is prototypal inheritance?&lt;/em&gt; &lt;em&gt;Can you explain, fundamentally, what are promises?&lt;/em&gt; &lt;em&gt;What are some differences between a function declaration and a function expression&lt;/em&gt;?&lt;/p&gt;

&lt;p&gt;My first thought right away was, how &lt;em&gt;simple&lt;/em&gt; must their codebase be?! I thought the company was looking for React devs! I now see that they were looking for competent Frontend Engineers, not people who can quickly spin up a Next app and boast about how they understand static generation. They wanted engineers who have mastered the fundamentals. These fundamentals can help solve any complex bug in the JS ecosystem. That's the beauty of being a master of the language.&lt;/p&gt;

&lt;p&gt;Every error message in any framework is just because something was grinding against the way JavaScript works. However, JavaScript is complex. So how does JavaScript work?&lt;/p&gt;

&lt;h2&gt;
  
  
  The Interview didn't go so well.
&lt;/h2&gt;

&lt;p&gt;I realised I have a good gist of what's going on with JavaScript, but I struggled to explain the basics simply because I never looked inside the JavaScript &lt;em&gt;engine&lt;/em&gt;. It was a &lt;strong&gt;fantastic&lt;/strong&gt; lesson; I didn't want to feel resentful or upset with how little I know. Instead, I am using the experience as a way to learn. I want to be able to answer these questions. I always enjoyed looking underneath the hood; now it's time to &lt;strong&gt;seriously&lt;/strong&gt; focus my direction towards the language that kick-started my career.&lt;/p&gt;

&lt;p&gt;I want to start a book club. For myself. Potentially for you, too, the reader. I searched online (and my dusty bookcase) for an up-to-date, renowned textbook around JavaScript. I decided to start with &lt;a href="https://eloquentjavascript.net/"&gt;Eloquent JavaScript&lt;/a&gt;, highly regarded as an excellent JavaScript text. Also, I have skimmed through it before, and the author, Marijn Haverbeke, has a great voice.&lt;/p&gt;

&lt;p&gt;I was a bit nervous to begin because it might be too basic at this point in my career. Starting with sections that explain what a &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"&gt;string&lt;/a&gt; is will quickly lose my interest. At this time of writing, however, I am pleasantly surprised with what I read so far.&lt;/p&gt;

&lt;p&gt;This post will focus on chapter one. The series will focus on my notes and observations. It will be around the content I didn't know about JavaScript. I strongly recommend you read the book yourself. It's free, available for most devices, and possibly covers everything you need to know to get started with the language and programming in general.&lt;/p&gt;

&lt;h2&gt;
  
  
  Chapter One
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Below the surface of the machine, the program moves. Without effort, it expands and contracts. In great harmony, electrons scatter and regroup. The forms on the monitor are but ripples on the water. The essence stays invisibly below.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Master Yuan-Ma, The Book of Programming&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Numbers and Memory
&lt;/h3&gt;

&lt;p&gt;Dealing with types in JavaScript costs memory. If you need to store values in a variable (or &lt;em&gt;bindings&lt;/em&gt; as the author calls them), the variables need to occupy space on your computer. In typical modern computers, we have more than 30 billion bits in volatile working memory (think RAM). Nonvolatile storage, like SSDs or hard disks, have much, much more.&lt;/p&gt;

&lt;p&gt;JavaScript's number type has a fixed number for bits. 64 bits to store a single number value. That's fascinating because, at first glance, it doesn't sound like a lot. When you begin understanding bits, you realise that what that means is that we have around &lt;code&gt;2^64&lt;/code&gt; (2 to the power of 64) potential numbers. That equates to approximately 18 quintillion options.&lt;/p&gt;

&lt;p&gt;That is a lot. Issues usually arise when dealing with massive numbers. Let's talk about all the grains of sand on our Earth. If we stored that value in a variable, we would still have around ten quintillion bits left to do whatever we want.&lt;/p&gt;

&lt;p&gt;Some caveats include negative numbers that use an extra bit to signify the &lt;code&gt;-&lt;/code&gt; sign and non-whole numbers like floats. If we consider all of that, we would still have 9 trillion combinations for whole numbers. Unfortunately, not enough to store all the grains of sand...&lt;/p&gt;

&lt;h3&gt;
  
  
  Operators and Types
&lt;/h3&gt;

&lt;p&gt;We have unary operators, rather than just binary operators. A binary operator would be something like &lt;code&gt;5 + 3&lt;/code&gt;, where the plus symbol takes two values. A unary operator takes one value; hence the name. &lt;code&gt;typeof&lt;/code&gt; is a unary operator that returns the value type.&lt;/p&gt;

&lt;p&gt;There's only one ternary operator called the conditional operator. You might have seen it before: &lt;code&gt;true ? 1 : 2&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;null&lt;/code&gt; and &lt;code&gt;undefined&lt;/code&gt; are peculiar types. The author says they are used interchangeably and are more or less the same thing. I can't entirely agree, as I see &lt;code&gt;undefined&lt;/code&gt; as values that could exist later, whilst null symbolises the value's absence. I'd instead stick to just using undefined if I can, but it's always best to secure your types wherever possible. The author also mentioned that:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The difference in meaning between undefined and null is an accident of JavaScript's design, and it doesn't matter most of the time.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Exploring that a little bit, I found this quote on a Stack Overflow &lt;a href="https://stackoverflow.com/questions/5076944/what-is-the-difference-between-null-and-undefined-in-javascript"&gt;post&lt;/a&gt; explaining a bit more about the accident.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Quote from the book Professional JS For Web Developers (Wrox): "You may wonder why the typeof operator returns 'object' for a value that is null. This was actually an error in the original JavaScript implementation that was then copied in ECMAScript. Today, it is rationalised that null is considered a placeholder for an object, even though, technically, it is a primitive value."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Captain Sensible (great name)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In JavaScript, we also have automatic type conversion:&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;8&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;// → 0 (null is converted to 0)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;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;// → 4 ('5' becomes 5)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;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;// → 51 (1 becomes '1')&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;five&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;// → NaN (can't use *, /, or - on strings)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&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;// → true (false becomes 0)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A neat tip is if you ever find yourself with &lt;code&gt;NaN&lt;/code&gt; errors, keep in mind that further arithmetic operations on &lt;code&gt;NaN&lt;/code&gt; keep producing &lt;code&gt;NaN&lt;/code&gt;, so look where you might be doing any accidental type conversions.&lt;/p&gt;

&lt;p&gt;It's also best to use the strict equal operator &lt;code&gt;===&lt;/code&gt; as that allows you to &lt;em&gt;precisely&lt;/em&gt; test for equal values and avoids automatic type conversion.&lt;/p&gt;

&lt;h2&gt;
  
  
  End of Chapter 1
&lt;/h2&gt;

&lt;p&gt;That's it! As I get into the groove of writing these chapter recaps, I'll hopefully also learn to connect my notes. Currently, it's a little bit all over the place. I do hope you might've learned at least one thing. If anything was confusing here, please let me know, and I can try to explain further. Otherwise, you can check out chapter one on the author's website &lt;a href="https://eloquentjavascript.net/01_values.html"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Have you read the chapter? The book? let me know your thoughts in the comments, and if you think it's a great book to really master the fundamentals in JavaScript.&lt;/p&gt;

&lt;p&gt;The next chapter focuses on &lt;strong&gt;Program Structure&lt;/strong&gt;. We just learned about the nails; let's master swinging the hammer.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Originally posted on my personal website, which can be found at &lt;a href="https://alex.kharo.uk"&gt;alex.kharo.uk&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>bookclub</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>When is your code 'good enough'?</title>
      <dc:creator>Alex Kharouk</dc:creator>
      <pubDate>Sun, 12 Aug 2018 07:42:53 +0000</pubDate>
      <link>https://dev.to/kharouk/when-is-your-code-good-enough-159o</link>
      <guid>https://dev.to/kharouk/when-is-your-code-good-enough-159o</guid>
      <description>&lt;p&gt;When do you decide your code is good enough? Is it after refactoring a dozen times or when you've check marked every task you had to do? &lt;/p&gt;

&lt;p&gt;Is it when there's not a single error or are you just happy that it doesn't crash your terminal when you run it?&lt;/p&gt;

&lt;p&gt;I ask because I've been reading Katrina Owen's and Sandi Metz's book titled &lt;a href="https://www.sandimetz.com/99bottles"&gt;99 Bottles of OOP&lt;/a&gt; and they talk about what they think is &lt;em&gt;good code&lt;/em&gt;. &lt;/p&gt;

&lt;p&gt;As a beginner, I fall into the &lt;em&gt;write the code; run it; pray&lt;/em&gt; category.&lt;/p&gt;

&lt;p&gt;So tell me Devs. When do you decide your code is good enough?&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>beginners</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Yesterday's Work Rewards Me Today</title>
      <dc:creator>Alex Kharouk</dc:creator>
      <pubDate>Thu, 09 Aug 2018 17:45:18 +0000</pubDate>
      <link>https://dev.to/kharouk/yesterdays-work-rewards-me-today-5f90</link>
      <guid>https://dev.to/kharouk/yesterdays-work-rewards-me-today-5f90</guid>
      <description>&lt;p&gt;I’ve been coding now for almost three months. Small change, little steps, I know. However this week marks the next step of my life as a software developer. I was accepted into a bootcamp in London. I’ve begun the pre-course work yesterday and am already making tidal waves of movement in my learning.&lt;/p&gt;

&lt;p&gt;There are many posts about life as a web developer, or one’s process of getting that first job. I’ll be submitting this into the category of “the developer’s journey via bootcamp.” I think these are important posts. Bootcamps are expensive. So is your time. But you might want to go to a bootcamp. Hopefully I can give you some context of the journey.&lt;/p&gt;

&lt;h3&gt;
  
  
  First Two Weeks
&lt;/h3&gt;

&lt;p&gt;I think a common trait that is shared amongst eager learners is ‘rapid passion.’ Passion that builds so fast that you just don’t know what to do with it. Maybe you write a song about it, or you build a project. You need some kind of outlet for all the passion. When I first started to code, I had the case of the rushin’ rapid passion. I created a &lt;a href="http://kharo.uk"&gt;simple website&lt;/a&gt; to display what I learned from a quick workshop at &lt;a href="//generalassemb.ly"&gt;General Assembly&lt;/a&gt;. Then I moved towards a blog created on &lt;a href="http://monthlymotive.com"&gt;WordPress&lt;/a&gt;, where I posted about this HTML tag or that CSS attribute. I felt like I was learning enough to talk about it. Which is fine, even if I read it back now and think of how little I knew back then; the irony will be outstanding when I read this post a year from now.&lt;/p&gt;

&lt;p&gt;Then as the first two weeks pass, there’s that &lt;strong&gt;dipping point&lt;/strong&gt;. Many don’t make it back. That’s when you realise there’s more to programming than just HTML. There’s JavaScript and other languages. Front-end; Back-end. Full-stack or node stacks with a sprinkle of dated MEAN stacks. Keywords start to emerge, as if bidding you to come with them. Learn that framework or this language. This framework gets the $$$. That language is older than the person who wrote it!&lt;/p&gt;

&lt;p&gt;All these words. They can overwhelm you. And it’s at this point the dipping occurs. The overwhelming world of software development comes at you, like paparazzi after a leaked affair.&lt;/p&gt;

&lt;p&gt;During my first two weeks I thought I could do it all. Bought many Udemy courses, believing in those 99.999999% discounts they always claim to offer. Signed up to all the online courses. Even considered to enrol into a remote bootcamp right then and there. Luckily I took a step back. Since I already purchased the &lt;a href="https://www.udemy.com/the-web-developer-bootcamp/"&gt;Web Developer&lt;/a&gt; Bootcamp for ten quid, I decided to only play with the thought of attending a real in-person bootcamp once I finish that course.&lt;/p&gt;

&lt;h3&gt;
  
  
  First Month Passed, Enter Month Two
&lt;/h3&gt;

&lt;p&gt;Next thing I know, I’m out of that dipping point and into month two. At this point I’m really happy with myself. Six months ago I used to be the kind of guy who’d thankfully join the dipping crowd. Not this time. I stuck through it.&lt;/p&gt;

&lt;p&gt;I’m even making great progress on the Web Developer Bootcamp. However I was going through the JavaScript material and it was tough. Terrifying. The instructor then introduced jQuery and I started feeling that overwhelming pressure of &lt;strong&gt;Imposter Syndrome&lt;/strong&gt;. The whole time I was thinking &lt;em&gt;damn, I have an english degree. Why am I even doing this?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Oh no. A second dipping point! This time I stepped back. Not to quit (although I contemplated the thought), but to try another language out. Now I doubt this is recommended by the pros, but it worked for me. I decided to try out Python. I even went to a workshop titled Python 101. Funnily enough it actually helped me grasp the things that confused me the most about JavaScript.&lt;/p&gt;

&lt;p&gt;I started to see what Object Oriented Programming actually meant. And why everything is an object. I began to understand context, as well as scope. The clicks clicked. Later on, this will allow me to understand the Ruby fundamentals faster.&lt;/p&gt;

&lt;p&gt;Now, whilst I have a better understanding, it’s not the perfect understanding. I don’t have enough experience with OOP, but at least I know the keywords to search for in Google whenever I have a question.&lt;/p&gt;

&lt;p&gt;So Python helped me get back into JavaScript, and allowed me to continue the journey. Both languages went on hold as I begun to learn Ruby for my bootcamp.&lt;/p&gt;

&lt;h3&gt;
  
  
  Month Three is Just Around the Corner from Today
&lt;/h3&gt;

&lt;p&gt;So I finished that course with a basic understanding of front-end and back-end. How APIs work and what are libraries and frameworks. Honestly, I’m really thankful for the course. It gave me a kind of TL;DR of what the Web Development World looks like. I didn’t absorb 100% of it, but it left me curious. Which leads me to why I’m writing this.&lt;/p&gt;

&lt;p&gt;I never really thought about my future until last week. There was a time where I was in a rough spot, before I decided to make some healthy life-changing choices. It was during this transition that I discovered to code. Once I began feeling well-adjusted, with this ‘coding’ thing in my toolbox, I realised: Wow. I love this. I want this to be the thing I do for the rest of my life.&lt;/p&gt;

&lt;p&gt;I finished the online course curious. I then finished a few other courses, still curious. Then I decided to take the step to join a bootcamp. Because I’m curious. Not only of code, and what languages can do, or what apps I’ll make, but I’m curious about the future. What I will see and do. Who I’ll become.&lt;/p&gt;

&lt;h3&gt;
  
  
  What do you think?
&lt;/h3&gt;

&lt;p&gt;Do you agree with all the dipping points and high passion rates? Let me know if you think I’m terribly wrong. Or let me know if you want to mix it up, by reading my blogpost about &lt;a href="https://medium.com/@codelist/mixin-it-up-ruby-style-9796a962ea92"&gt;Ruby Modules and Mixins&lt;/a&gt; on Medium.&lt;/p&gt;

&lt;p&gt;Thanks for reading! I'm still new to this, but I hope I will continue. &lt;/p&gt;

</description>
      <category>beginners</category>
      <category>ruby</category>
      <category>career</category>
      <category>learning</category>
    </item>
    <item>
      <title>Using Ruby for projects that are not Rails related.</title>
      <dc:creator>Alex Kharouk</dc:creator>
      <pubDate>Sat, 28 Jul 2018 11:53:07 +0000</pubDate>
      <link>https://dev.to/kharouk/using-ruby-for-projects-that-are-not-rails-related-5c7h</link>
      <guid>https://dev.to/kharouk/using-ruby-for-projects-that-are-not-rails-related-5c7h</guid>
      <description>&lt;p&gt;I'm currently learning Ruby in preparation for a boot camp I'm applying to. What can I create with Ruby that doesn't involve Rails?&lt;/p&gt;

&lt;p&gt;As a beginner, I'm also curious what people use Ruby for nowadays when they're not using it for Rails (or Sinatra). Would love to work on a project this weekend!&lt;/p&gt;

&lt;p&gt;Thanks and enjoy your day.&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>beginners</category>
      <category>ruby</category>
      <category>help</category>
    </item>
  </channel>
</rss>
