<?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: guennithegun</title>
    <description>The latest articles on DEV Community by guennithegun (@guennithegun).</description>
    <link>https://dev.to/guennithegun</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%2F281933%2F04a4c5c1-c759-4ca7-a3f2-8edb0373b279.jpg</url>
      <title>DEV Community: guennithegun</title>
      <link>https://dev.to/guennithegun</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/guennithegun"/>
    <language>en</language>
    <item>
      <title>Move your sql database files to a separate hard drive</title>
      <dc:creator>guennithegun</dc:creator>
      <pubDate>Fri, 04 Dec 2020 09:16:59 +0000</pubDate>
      <link>https://dev.to/guennithegun/move-your-sql-database-files-to-a-separate-hard-drive-228f</link>
      <guid>https://dev.to/guennithegun/move-your-sql-database-files-to-a-separate-hard-drive-228f</guid>
      <description>&lt;p&gt;My company provides me with a development server for my work. Here runs my local version of our application with my git branches for development. This server also runs an MSSQL Server which provides me with a copy of our production database. After some time the free disk space on this server hard drive became smaller and smaller, so I wanted to clean it up.&lt;/p&gt;

&lt;p&gt;But I realized that there was not much I could clean up. I noticed the large size of the database files, &amp;gt; 30GB. So I asked our IT infrastructure team to add more disk space to my development server.&lt;/p&gt;

&lt;p&gt;As a result, they kept the size, but provided me an additional hard drive, and asked me to move the DB files to the additional hard drive.&lt;/p&gt;

&lt;p&gt;So I did some research on how to move only the database files to a different hard drive. Here is what I found out and worked for me well.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. where are the relevant database files?
&lt;/h2&gt;

&lt;p&gt;First, we need to find out where the relevant database files are stored so that we can copy them to the new hard drive. I found out that you need to move two files, a .mdf and .ldf file.&lt;/p&gt;

&lt;p&gt;The .mdf file contains the schema and data. The .ldf file contains the logs. &lt;a href="https://stackoverflow.com/a/1175899"&gt;This&lt;/a&gt; StackOverflow post gives you a brief overview of these file types.&lt;/p&gt;

&lt;p&gt;So now we know which files to copy, we can get the path by using the following SQL query.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;select&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;YOUR_DATABASE_NAME&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="n"&gt;sys&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;database_files&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will give you the following output (I blurred sensitive information):&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ps4q-e-l--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5aa9jf5bsy8wt819pdyi.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ps4q-e-l--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5aa9jf5bsy8wt819pdyi.PNG" alt="resultSelectPaths"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. copy the files to the new hard disk
&lt;/h2&gt;

&lt;p&gt;Now, that we know the path we have to take the database offline to copy the files. Otherwise, you will get an error message while copying, because the files are in use of the database.&lt;/p&gt;

&lt;p&gt;I use the SQL Server Management Studio. Here you have to do a right-click on your database, go to tasks, and then click "Take offline". After that you will see something like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s----8zSXL6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/uytapw8ncwb9cmmor4zm.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s----8zSXL6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/uytapw8ncwb9cmmor4zm.PNG" alt="takeOfflineScreenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You have to select the checkbox in the middle. After the database is offline you can copy the two files into your target path on the new hard drive.&lt;/p&gt;

&lt;p&gt;Then bring the database online again.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. pointing to the files in the new path
&lt;/h2&gt;

&lt;p&gt;To point the mssql server to the new file path you have to run two queries, one for each file. For the .mdf file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;ALTER&lt;/span&gt; &lt;span class="k"&gt;DATABASE&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;YOUR_DATABASE_NAME&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="k"&gt;MODIFY&lt;/span&gt; &lt;span class="n"&gt;FILE&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;NAME&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'YOUR_NAME_Data'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;FILENAME&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'E:&lt;/span&gt;&lt;span class="se"&gt;\S&lt;/span&gt;&lt;span class="s1"&gt;QL_DATABASES&lt;/span&gt;&lt;span class="se"&gt;\Y&lt;/span&gt;&lt;span class="s1"&gt;OUR_FILENAME.mdf'&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;GO&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And for the .ldf file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;ALTER&lt;/span&gt; &lt;span class="k"&gt;DATABASE&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;YOUR_DATABASE_NAME&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="k"&gt;MODIFY&lt;/span&gt; &lt;span class="n"&gt;FILE&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;NAME&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'YOUR_NAME_Log'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;FILENAME&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'E:&lt;/span&gt;&lt;span class="se"&gt;\S&lt;/span&gt;&lt;span class="s1"&gt;QL_DATABASES&lt;/span&gt;&lt;span class="se"&gt;\Y&lt;/span&gt;&lt;span class="s1"&gt;OUR_FILENAME.ldf'&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;GO&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The FILENAME is self-explanatory. The correct NAME value can be found when you do a right-click on the database, then properties. There you can go to Files and will see your individual NAME values in the Logical Name column.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_V3tXhxO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/35rcv5wg0of3dsorh4z7.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_V3tXhxO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/35rcv5wg0of3dsorh4z7.PNG" alt="logicalFileName"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After you run the ALTER query you will get something like this (for the .ldf file as an example):&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dIoawihW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/bishzn57gjfihtz8ku93.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dIoawihW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/bishzn57gjfihtz8ku93.PNG" alt="messageAfterAlterSQL"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Very good!&lt;/p&gt;

&lt;p&gt;Now we can run the SELECT query from above again and you should get the new paths.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mEg6ekxm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/4328llu7n01mi3c8z3lk.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mEg6ekxm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/4328llu7n01mi3c8z3lk.PNG" alt="controlSelectSQLAfterAlter"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4. restart the SQL server
&lt;/h2&gt;

&lt;p&gt;In my case, I had to do a restart of the SQL server. After that, you also see the new file paths in the properties of the database.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--i6V4eNAk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/uieuhayxg41yd41s3lif.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--i6V4eNAk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/uieuhayxg41yd41s3lif.PNG" alt="databaseProperties"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  5. free disk space
&lt;/h2&gt;

&lt;p&gt;Now you can delete the .mdf and .ldf files in the origin directory. This is a double-check of your work at the same time because you can not delete these files if they are still in use.&lt;/p&gt;

&lt;p&gt;Well done. Your database files are moved to the new hard drive and you are looking forward to new free disk space.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Conclusion
&lt;/h2&gt;

&lt;p&gt;I never had to do something like that before. I had fun researching a solution and making it all work in the end. Maybe there are better approaches to this and other best practices. If so please comment and/or reach out. I am happy with any kind of feedback.&lt;/p&gt;

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

</description>
      <category>sql</category>
      <category>database</category>
    </item>
    <item>
      <title>Be strict: 'use strict';!</title>
      <dc:creator>guennithegun</dc:creator>
      <pubDate>Tue, 31 Dec 2019 05:54:32 +0000</pubDate>
      <link>https://dev.to/guennithegun/be-strict-use-strict-271l</link>
      <guid>https://dev.to/guennithegun/be-strict-use-strict-271l</guid>
      <description>&lt;p&gt;The strict mode of JavaScript was introduced with ECMAScript 5. With the strict mode you can opt in to a restricted variant of JavaScript to write better JS programs.&lt;/p&gt;

&lt;p&gt;Using strict mode results in several changes to normal JS:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;it eliminates some silent errors by changing them to throw errors&lt;/li&gt;
&lt;li&gt;code in strict mode can sometimes be made to run faster than identical code written in &lt;a href="https://developer.mozilla.org/de/docs/Glossary/Sloppy_mode"&gt;sloppy mode&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;prohibits some syntax likely to be defined in future versions of ECMAScript&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How to opt in strict mode (opt out sloppy mode)?
&lt;/h2&gt;

&lt;p&gt;You can opt in strict mode per program (means per file!) like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// only whitespace or comments allowed before strict mode&lt;/span&gt;
&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// run some code in strict mode&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;The strict mode snippet must appear on top of the file and only whitespace and comments are allowed in front of it.&lt;/p&gt;

&lt;p&gt;You can turn on the strict mode in per-function scope, too.&lt;br&gt;
&lt;/p&gt;

&lt;div class="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;whoIsJohnGalt&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// only whitespace or comments allowed before strict mode&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// run some code in strict mode&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Note that the function-level strict mode is disallowed if the program (file) has strict mode turned on on top. So you have to choose between one or the other.&lt;/p&gt;

&lt;p&gt;The only reason to use the per-function scope is when you want to convert an existing sloppy mode file and need to make the changes little by little over time. Otherwise use strict mode for the whole program.&lt;/p&gt;

&lt;p&gt;A third way to enter strict mode is using JS modules introduced by ECMAScript 2015. JS modules are automatically in strict mode, with no statement needed to initiate it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="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;whoIsJohnGalt&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

  &lt;span class="c1"&gt;// I am strict by default because I am a module&lt;/span&gt;

&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;whoIsJohnGalt&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Why use strict mode?
&lt;/h2&gt;

&lt;p&gt;You should not think of strict mode as a restriction to write JS code. The purpose is more being a guide to the best way to do things so that the JS engine has the best chance of optimizing and efficiently running the code.&lt;/p&gt;

&lt;p&gt;As most JS programs are written in developer teams, strict mode helps collaboration on code and avoids mistakes that slip by in sloppy mode. For example strict mode makes it impossible to accidentally create global variables.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&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;globalVariable&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Who is John Galt?&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;globalVarible&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;I am John Galt.&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// this will throw a ReferenceError because of the typo&lt;/span&gt;
&lt;span class="c1"&gt;// without 'use strict'; this would create a new variable globalVarible&lt;/span&gt;

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



&lt;p&gt;So strict mode is like a linter reminding you how JS should be written  to have the highest quality and best chance at performance.&lt;/p&gt;

&lt;h2&gt;
  
  
  Examples
&lt;/h2&gt;

&lt;p&gt;Let's look on some examples on what strict mode does not allow (list is not complete).&lt;/p&gt;

&lt;p&gt;Using a variable or object without declaring it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// variable&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="c1"&gt;// object&lt;/span&gt;
&lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;value&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// both would cause an error&lt;/span&gt;

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



&lt;p&gt;Duplicating a parameter name is not allowed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;p1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;p1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{};&lt;/span&gt;   

&lt;span class="c1"&gt;// will cause an error&lt;/span&gt;

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



&lt;p&gt;Octal numeric literals and escape characters are not allowed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&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;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;010&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;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="se"&gt;\&lt;/span&gt;&lt;span class="s1"&gt;010&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// both would cause an error&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Deleting an undeletable property is not allowed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;delete&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;prototype&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// will cause an error&lt;/span&gt;

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



&lt;p&gt;Deleting a variable (or object) is not allowed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&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;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;delete&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// will cause an error&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Writing to a read-only property is not allowed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use strict&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;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{};&lt;/span&gt;

&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defineProperty&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;x&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="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;writable&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;3.14&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;            

&lt;span class="c1"&gt;// will cause an error&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;There are some more cases that strict mode does not allow. For more examples and more details visit the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode"&gt;MDN web docs&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Strict mode as default?
&lt;/h2&gt;

&lt;p&gt;If strict mode is strongly recommended why is it not set to default for JS is a question that could come up. The answer is the backwards compatibility of JS. That means that code which once was accepted as valid JS, there will not be a future change to the language that causes that code to become invalid JS.&lt;/p&gt;

&lt;p&gt;Think again of the examples shown above. If a JS engine update started assuming code was strict mode even if it's not marked as such and for example you used variables without declaring them, this may cause that the code would break as a result of strict mode controls.&lt;/p&gt;

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

&lt;p&gt;Along with tooling like linters, strict mode is an other important piece for writing clean and and more "secure" JS. You should definitely use strict node in your code. If your code is not written in strict mode you should think about a transition into strict mode. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode"&gt;This&lt;/a&gt; article gives you some guidance on this topic.&lt;/p&gt;

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

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>codequality</category>
    </item>
    <item>
      <title>IIFE... Excuse me, what?</title>
      <dc:creator>guennithegun</dc:creator>
      <pubDate>Sat, 07 Dec 2019 21:47:03 +0000</pubDate>
      <link>https://dev.to/guennithegun/iife-excuse-me-what-3ngi</link>
      <guid>https://dev.to/guennithegun/iife-excuse-me-what-3ngi</guid>
      <description>&lt;p&gt;Since the first time I read about IIFE, I could not forget this abbreviation. Iffy... &lt;/p&gt;

&lt;p&gt;IIFE stands for immediately invoked function expression. It is a JavaScript function that runs as soon as it is defined. It is a design pattern which is also known as a self executing anonymous function.&lt;/p&gt;

&lt;p&gt;The syntax looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="c1"&gt;// IIFE&lt;/span&gt;
  &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="c1"&gt;// do something here&lt;/span&gt;
  &lt;span class="p"&gt;})();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;So what do we have here? Let's go into details. The IIFE contains two major parts. &lt;/p&gt;

&lt;h2&gt;
  
  
  anonymous function
&lt;/h2&gt;

&lt;p&gt;The first part is the anonymous function with lexical scope:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="c1"&gt;// I am anonymous&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="c1"&gt;// do something here&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Hold on a minute what is lexical scope? Check this article for some details on that topic: &lt;a href="https://dev.to/fleepgeek/i-would-try-to-explain-lexical-scope-in-plain-english-wish-me-luck-4j06"&gt;I would try to explain lexical scope in plain English. Wish me luck&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;An anonymous function is a function that was declared without any named identifier to refer to it. It is usually not accessible after its initial creation.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="c1"&gt;// normal function definition&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;hello&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="s1"&gt;A is A&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;hello&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// output 'A is A'&lt;/span&gt;

  &lt;span class="c1"&gt;// anonymous function definition&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="c1"&gt;// do something&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;A common use for anonymous functions is for example as argument to another function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="c1"&gt;// example&lt;/span&gt;
  &lt;span class="nx"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&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;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;I am John Galt.&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="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;In the IIFE the anonymous function is enclosed within the &lt;code&gt;grouping operator ()&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  direct interpretation of the function
&lt;/h2&gt;

&lt;p&gt;The second part creates the immediately invoked function expression &lt;code&gt;()&lt;/code&gt; through which the JavaScript engine will directly interpret the function. The difference to the normal function definition is that with IIFE, declaration and execution are performed at the same time. With the normal function definition you first declare the function and then call it, placing the parentheses after it to indicate that you want to execute it.&lt;/p&gt;

&lt;h2&gt;
  
  
  why use IIFE?
&lt;/h2&gt;

&lt;p&gt;Ok, so now we know a bit more about the syntax. But what is the benefit of IIFE?&lt;/p&gt;

&lt;p&gt;It is about scope. In JavaScript variables declared &lt;em&gt;outside&lt;/em&gt; of a function are global variables. Functions declared &lt;em&gt;inside&lt;/em&gt; of a function are called local variables.&lt;/p&gt;

&lt;p&gt;A global variable can be accessed from anywhere in your code. This comes with some downsides like&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;you can (accidentally) access the global state, which leads to impure functions&lt;/li&gt;
&lt;li&gt;you can overwrite other global variables&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Imagine you have two JavaScript files and each contains &lt;code&gt;var johnGalt = {};&lt;/code&gt; The variable &lt;code&gt;johnGalt&lt;/code&gt; would be global and therefore shared in all code and executed no matter in which file it was written.&lt;/p&gt;

&lt;p&gt;To prevent this the IIFE pattern exists. When you wrap all your global variables into IIFE you take them their globalness. You can treat them as local variables within the IIFE as they are wrapped into a function. The variables within the expression can not be accessed from outside.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="p"&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;var&lt;/span&gt; &lt;span class="nx"&gt;johnGalt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Who is&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;})();&lt;/span&gt;

  &lt;span class="c1"&gt;// variable can not be accessed&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;johnGalt&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Uncaught ReferenceError: johnGalt is not defined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;When you need access to the global variables inside the IIFE you can do something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="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;galtsGulch&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&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;var&lt;/span&gt; &lt;span class="nx"&gt;johnGalt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Who is&lt;/span&gt;&lt;span class="dl"&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;johnGalt&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;galtsGulch&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// output 'Who is'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;If you assign the IIFE to a variable it does not store the function definition but its return value. So everything which is returned by the IIFE function is accessible from outside. This allows you to control what should be globally accessible and what should not.&lt;/p&gt;

&lt;p&gt;You can also do some cool stuff and manipulate your global variables inside IIFE. You can do that like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="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;galtsGulch&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&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;var&lt;/span&gt; &lt;span class="nx"&gt;residents&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt; &lt;span class="c1"&gt;// empty array&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="c1"&gt;// add a resident&lt;/span&gt;
      &lt;span class="na"&gt;add&lt;/span&gt;&lt;span class="p"&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;resident&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;residents&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;resident&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;},&lt;/span&gt;
      &lt;span class="c1"&gt;// get all residents&lt;/span&gt;
      &lt;span class="na"&gt;getAll&lt;/span&gt;&lt;span class="p"&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="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;residents&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="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;galtsGulch&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getAll&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// []&lt;/span&gt;
  &lt;span class="nx"&gt;galtsGulch&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;John Galt&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;galtsGulch&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getAll&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// [ Object { name: 'John Galt' } ]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Here the IIFE returns an object with the two keys &lt;code&gt;add&lt;/code&gt; and &lt;code&gt;getAll&lt;/code&gt;. So whenever you access &lt;code&gt;galtsGulch&lt;/code&gt; it represents an object with these two keys. The two keys hold functions that allow you to interact with the &lt;code&gt;residents&lt;/code&gt; variable from outside. &lt;code&gt;add&lt;/code&gt; adds a resident to the array and &lt;code&gt;getAll&lt;/code&gt; gets the complete 'residents' variable.&lt;/p&gt;

&lt;p&gt;COOL!&lt;/p&gt;

&lt;h2&gt;
  
  
  conclusion
&lt;/h2&gt;

&lt;p&gt;With the IIFE pattern it is nearly impossible to accidentally modify or access the shared state. That’s why this pattern is so useful, why it’s commonly used in many applications, and why you should use it, too!&lt;/p&gt;

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