<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Sam</title>
    <description>The latest articles on Forem by Sam (@codepapi).</description>
    <link>https://forem.com/codepapi</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%2F391930%2F0da9f586-3c10-4276-9c94-4b8438be3ff5.png</url>
      <title>Forem: Sam</title>
      <link>https://forem.com/codepapi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/codepapi"/>
    <language>en</language>
    <item>
      <title>Naming conventions and style guides in programming</title>
      <dc:creator>Sam</dc:creator>
      <pubDate>Thu, 01 Jun 2023 14:35:46 +0000</pubDate>
      <link>https://forem.com/codepapi/naming-conventions-and-style-guides-in-programming-59a9</link>
      <guid>https://forem.com/codepapi/naming-conventions-and-style-guides-in-programming-59a9</guid>
      <description>&lt;p&gt;In this article, you will learn cases used for naming conventions while writing codes and also get references to some style guides that will enhance your naming convention depending on the language you work with.&lt;/p&gt;

&lt;p&gt;It is important to know about the different naming conventions or cases used in coding for different reasons such as for best practices and proper codes maintainability, readability, codes consistency, tooling and automation, collaboration and more.&lt;/p&gt;

&lt;p&gt;Different cases are used while writing codes to specify the naming convention for variables, functions, classes, files, folders and other code objects. &lt;/p&gt;

&lt;p&gt;Depending on the programming language and accepted practices in the community, different case styles may be used. Following are some typical case types and examples in which they are employed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[
"camelCase", 
"PascalCase", 
"snake_case",
"kebab-case",
"SCREAMING_SNAKE_CASE"
] 

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;1. Camel Case (also known as lower camel case):&lt;/strong&gt; By applying this naming case, there are no spaces or underscores between the words in this style, which capitalises the initial letter of every word except the first word. It is frequently used in naming variables, functions, and methods in programming languages such as JavaScript, Java, Python, C# etc. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Example:&lt;/em&gt;&lt;br&gt;
Here are some examples of code snippets written in &lt;em&gt;&lt;strong&gt;camelCase&lt;/strong&gt;&lt;/em&gt; :&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Variable declaration (Java):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight java"&gt;&lt;code&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;numberOfStudents&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="nc"&gt;String&lt;/span&gt; &lt;span class="n"&gt;userName&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;averageScore&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Method definition (Python) :&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;calculateTotalAmount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;paymentList&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;totalAmount&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;payment&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;paymentList&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="n"&gt;totalAmount&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="n"&gt;payment&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;totalAmount&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Function call (JavaScript):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;formattedName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;formatUserName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userName&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Without only considering methods and variable names, these examples show how to utilise camelCase, where each word within an identifier begins with an uppercase letter except for the first. To increase readability and maintain a consistent coding style.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Pascal Case, often called upper camel case:&lt;/strong&gt; This is a variant of camel case in which the initial letter of each word is capitalised. In programming languages like C#, C++, and Python, it is frequently used for naming classes and types. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Examples&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Here are some examples of code snippets written in &lt;em&gt;&lt;strong&gt;PascalCase&lt;/strong&gt;&lt;/em&gt;:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Class definition (C#):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;BankAccount&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt; &lt;span class="n"&gt;accountNumber&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="kt"&gt;decimal&lt;/span&gt; &lt;span class="n"&gt;currentBalance&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt; &lt;span class="n"&gt;AccountNumber&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;get&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;accountNumber&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="k"&gt;set&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;accountNumber&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="kt"&gt;decimal&lt;/span&gt; &lt;span class="n"&gt;CurrentBalance&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;get&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;currentBalance&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="k"&gt;set&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;currentBalance&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Method definition (Java):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight java"&gt;&lt;code&gt;&lt;span class="kd"&gt;public&lt;/span&gt; &lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;CalculateTotalAmount&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;List&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;decimal&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;paymentList&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
&lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;decimal&lt;/span&gt; &lt;span class="n"&gt;totalAmount&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;foreach&lt;/span&gt; &lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="n"&gt;decimal&lt;/span&gt; &lt;span class="n"&gt;payment&lt;/span&gt; &lt;span class="n"&gt;in&lt;/span&gt; &lt;span class="n"&gt;paymentList&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;totalAmount&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="n"&gt;payment&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
    &lt;span class="o"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;totalAmount&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Interface definition (TypeScript):&lt;/em&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="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;IEmployee&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;empCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;empName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;getSalary&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;number&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;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
    &lt;span class="nf"&gt;getManagerName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;string&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;&lt;em&gt;Enum declaration:&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;enum&lt;/span&gt; &lt;span class="n"&gt;DaysOfWeek&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;Monday&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;Tuesday&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;Wednesday&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;Thursday&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;Friday&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;Saturday&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;Sunday&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These examples demonstrates name classes, methods, interfaces and enums, using PascalCase. Every word, even the first one, has its first letter capitalised when using PascalCase. It is frequently used to maintain a consistent naming convention and enhance code readability in languages like C#, Java,TypeScript, JavaScript, C++ etc.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Snake Case:&lt;/strong&gt; This style often uses lowercase letters and underscores (_) between words. It is frequently used for naming variables and functions in languages like Python and Ruby and also for naming files and folders in frameworks like Reactjs. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Examples&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Here are some examples of code snippets written in snake_case:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Variable declaration (Python):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;number_of_students&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;
&lt;span class="n"&gt;user_name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;johnsmith&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;span class="n"&gt;average_score&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;85.5&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Function definition (Ruby):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;calculate_total_amount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;payment_list&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;total_amount&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
    &lt;span class="n"&gt;payment_list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;each&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt;&lt;span class="n"&gt;payment&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt;
        &lt;span class="n"&gt;total_amount&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="n"&gt;payment&lt;/span&gt;
    &lt;span class="k"&gt;end&lt;/span&gt;
    &lt;span class="n"&gt;total_amount&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Database column names (SQL):&lt;/em&gt;&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;CREATE&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;users&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;id&lt;/span&gt; &lt;span class="nb"&gt;INT&lt;/span&gt; &lt;span class="k"&gt;PRIMARY&lt;/span&gt; &lt;span class="k"&gt;KEY&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;first_name&lt;/span&gt; &lt;span class="nb"&gt;VARCHAR&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="n"&gt;last_name&lt;/span&gt; &lt;span class="nb"&gt;VARCHAR&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="n"&gt;email_address&lt;/span&gt; &lt;span class="nb"&gt;VARCHAR&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;255&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="n"&gt;date_of_birth&lt;/span&gt; &lt;span class="nb"&gt;DATE&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These examples name variables, functions, constants, database columns, and configuration files using snake_case. snake_case separates words with underscores (_) and lowercase letters. It is frequently used to maintain a consistent naming convention and enhance code readability in languages like Python, Ruby, and SQL.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Kebab Case (also spelled dash case, spinal case):&lt;/strong&gt; Between words in this style, hyphens (-) and lowercase letters are used. It is frequently used in HTML attributes, file names, and URLs. However, naming variables or functions using it is not as common in programming.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Examples&lt;/em&gt;&lt;br&gt;
Here are some examples of code snippets written in kebab-case:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;HTML classes (HTML):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"container-fluid"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;CSS class (CSS):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.header-title&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#333&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;&lt;em&gt;Package name (Java):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight java"&gt;&lt;code&gt;&lt;span class="n"&gt;com&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;example&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;my&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;project&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Command-line arguments (Shell script):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./script.sh &lt;span class="nt"&gt;--verbose-mode&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These examples employ the kebab-case naming convention for command-line parameters, URLs, CSS classes, HTML elements, and CSS classes. Lowercase letters and hyphens (-) are used in kebab case to divide words. It is frequently used in languages like HTML, CSS, JavaScript, and others that permit the use of hyphens as word separators. For many usage scenarios, kebab-case enhances readability and guarantees consistency in naming standards.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Screaming Snake Case:&lt;/strong&gt; This font uses uppercase letters and underscores (_) between words. It is also referred to as upper case snake case or screaming case. Usually, it is employed to name constants or global variables.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Examples&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Here are some examples of code snippets written in SCREAMING_SNAKE_CASE:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Constant declaration (Python):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;MAX_ATTEMPTS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;
&lt;span class="n"&gt;PI_VALUE&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;3.14159&lt;/span&gt;
&lt;span class="n"&gt;ERROR_MESSAGE&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;An error occurred.&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Constant declaration (JavaScript):&lt;/em&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;const&lt;/span&gt; &lt;span class="nx"&gt;MAX_ATTEMPTS&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;PI_VALUE&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;3.14159&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;ERROR_MESSAGE&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;An error occurred.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Global variables (C):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="cp"&gt;#define BUFFER_SIZE 1024
&lt;/span&gt;&lt;span class="k"&gt;const&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;MAX_ITEMS&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Configuration variables (Shell script):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;DATABASE_HOST&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"localhost"&lt;/span&gt;
&lt;span class="nv"&gt;DATABASE_PORT&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;5432
&lt;span class="nv"&gt;USERNAME&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"admin"&lt;/span&gt;
&lt;span class="nv"&gt;PASSWORD&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"password123"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Preprocessor directives (C++):&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;&lt;span class="cp"&gt;#define LOG_ENABLED
#define VERSION "1.0.0"
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For naming constants, enum values, global variables, configuration variables, and preprocessor directives in these examples, SCREAMING_SNAKE_CASE is employed. Uppercase letters and underscores (_) are used in SCREAMING_SNAKE_CASE to divide words. It is frequently used to represent constants and global values that shouldn't be changed in languages like Python, C++, and shell scripts. SCREAMING_SNAKE_CASE is frequently used to increase code readability and maintain consistency and highlights that certain values are intended to be treated as immutable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;STYLE GUIDES FOR SOME LANGUAGE TO AID BETTER NAMING CONVENTIONS AND BEST PRACTICES&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;These style guides often define coding conventions, formatting standards, and best practices for writing clean and maintainable code. Here are a few examples:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;HTML:&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
i. Google HTML/CSS Style Guide - &lt;a href="https://google.github.io/styleguide/htmlcssguide.html" rel="noopener noreferrer"&gt;https://google.github.io/styleguide/htmlcssguide.html&lt;/a&gt;&lt;br&gt;
ii. Mozilla Developer Network (MDN) HTML Style Guide - &lt;a href="https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/HTML" rel="noopener noreferrer"&gt;https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/HTML&lt;/a&gt;&lt;br&gt;
iii. Web Code Guidelines: HTML - &lt;a href="https://webcodeguidelines.com/HTML/" rel="noopener noreferrer"&gt;https://webcodeguidelines.com/HTML/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;CSS:&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
i. Airbnb CSS / Sass Style Guide - &lt;a href="https://github.com/airbnb/css" rel="noopener noreferrer"&gt;https://github.com/airbnb/css&lt;/a&gt;&lt;br&gt;
ii. Google HTML/CSS Style Guide - &lt;a href="https://google.github.io/styleguide/htmlcssguide.html" rel="noopener noreferrer"&gt;https://google.github.io/styleguide/htmlcssguide.html&lt;/a&gt;&lt;br&gt;
iii. Mozilla Developer Network (MDN) CSS Style Guide - &lt;a href="https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/CSS" rel="noopener noreferrer"&gt;https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/CSS&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Python:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;i. PEP 8: Style Guide for Python Code - &lt;a href="https://www.python.org/dev/peps/pep-0008/" rel="noopener noreferrer"&gt;https://www.python.org/dev/peps/pep-0008/&lt;/a&gt;&lt;br&gt;
ii. Google Python Style Guide -&lt;a href="https://google.github.io/styleguide/pyguide.html" rel="noopener noreferrer"&gt;https://google.github.io/styleguide/pyguide.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;JavaScript:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;i. Airbnb JavaScript Style Guide - &lt;a href="https://github.com/airbnb/javascript" rel="noopener noreferrer"&gt;https://github.com/airbnb/javascript&lt;/a&gt;&lt;br&gt;
ii. Google JavaScript Style Guide - &lt;a href="https://google.github.io/styleguide/jsguide.html" rel="noopener noreferrer"&gt;https://google.github.io/styleguide/jsguide.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Java:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;i. Oracle Code Conventions for the Java Programming Language - &lt;a href="https://www.oracle.com/java/technologies/javase/codeconventions-introduction.html" rel="noopener noreferrer"&gt;https://www.oracle.com/java/technologies/javase/codeconventions-introduction.html&lt;/a&gt;&lt;br&gt;
ii. Google Java Style Guide - &lt;a href="https://google.github.io/styleguide/javaguide.html" rel="noopener noreferrer"&gt;https://google.github.io/styleguide/javaguide.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;C++:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;i. Google C++ Style Guide - &lt;a href="https://google.github.io/styleguide/cppguide.html" rel="noopener noreferrer"&gt;https://google.github.io/styleguide/cppguide.html&lt;/a&gt;&lt;br&gt;
ii. LLVM Coding Standards - &lt;a href="https://llvm.org/docs/CodingStandards.html" rel="noopener noreferrer"&gt;https://llvm.org/docs/CodingStandards.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;C#:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;i. Microsoft C# Coding Conventions - &lt;a href="https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/inside-a-program/coding-conventions" rel="noopener noreferrer"&gt;https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/inside-a-program/coding-conventions&lt;/a&gt;&lt;br&gt;
ii. C# Coding Standards and Naming Conventions - &lt;a href="https://www.dofactory.com/reference/csharp-coding-standards" rel="noopener noreferrer"&gt;https://www.dofactory.com/reference/csharp-coding-standards&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Ruby:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;i. Ruby Style Guide - &lt;a href="https://rubystyle.guide/" rel="noopener noreferrer"&gt;https://rubystyle.guide/&lt;/a&gt;&lt;br&gt;
ii. GitHub Ruby Style Guide - &lt;a href="https://github.com/github/rubocop-github/blob/master/STYLEGUIDE.md" rel="noopener noreferrer"&gt;https://github.com/github/rubocop-github/blob/master/STYLEGUIDE.md&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;PHP:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;i. PHP-FIG PSR-12: Extended Coding Style Guide - &lt;a href="https://www.php-fig.org/psr/psr-12/" rel="noopener noreferrer"&gt;https://www.php-fig.org/psr/psr-12/&lt;/a&gt;&lt;br&gt;
ii. Laravel Coding Style Guide - &lt;a href="https://laravel.com/docs/8.x/contributions#coding-style-guide" rel="noopener noreferrer"&gt;https://laravel.com/docs/8.x/contributions#coding-style-guide&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Swift:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;i. The Swift Programming Language - API Design Guidelines - &lt;a href="https://swift.org/documentation/api-design-guidelines/" rel="noopener noreferrer"&gt;https://swift.org/documentation/api-design-guidelines/&lt;/a&gt;&lt;br&gt;
ii. Raywenderlich.com Swift Style Guide - &lt;a href="https://github.com/raywenderlich/swift-style-guide" rel="noopener noreferrer"&gt;https://github.com/raywenderlich/swift-style-guide&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These style guides provide recommendations on structuring and formatting code, as well as best practices for naming conventions, indentation, comments, and more.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Conclusion&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
The specific naming standards can vary based on the programming language and coding style used by a given development team; it's crucial to remember that these are merely conventions and suggestions.&lt;br&gt;
Also note that coding style guides can be subjective and vary depending on the organisation, team, or individual preferences. It's always a good idea to follow the conventions used in your specific project or consult any guidelines provided by the language creators or major organisations in the respective communities.&lt;/p&gt;

&lt;p&gt;If you like this, they is a chance you might want to read my other articles. &lt;br&gt;
Thanks for reading and happy clean coding 😃 !!!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Best Practices for all developers</title>
      <dc:creator>Sam</dc:creator>
      <pubDate>Thu, 11 May 2023 11:24:31 +0000</pubDate>
      <link>https://forem.com/codepapi/best-practices-for-all-developers-1ak0</link>
      <guid>https://forem.com/codepapi/best-practices-for-all-developers-1ak0</guid>
      <description>&lt;p&gt;&lt;strong&gt;Best practices&lt;/strong&gt; in programming are recommended guidelines and techniques that help developers write high-quality, maintainable, and efficient code. They serve as a collective wisdom of the programming community and cover various aspects of programming, providing guidance on code organisation, naming conventions, error handling, security, testing, and more. By following best practices, developers can produce better software, reduce the likelihood of bugs, and enhance collaboration and code maintainability.&lt;/p&gt;

&lt;p&gt;Here are some best practices for writing clean code that you can follow as a developer :&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Use descriptive names for variables, functions, and classes to make the code more readable and understandable:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Using descriptive names for variables, functions, and classes is an essential practice in software development. It greatly improves the readability and understandability of code, making it easier for both the original developer and others who may need to read or maintain the code in the future.&lt;/p&gt;

&lt;p&gt;When choosing names for variables, it's crucial to select names that accurately convey the purpose or meaning of the data they represent. For example, instead of using generic names like "a," "x," or "temp," opt for more descriptive names like "customerName," "totalSales," or "numberOfItems." This helps to provide clear context and makes it easier for others to understand the intention behind the variable.&lt;/p&gt;

&lt;p&gt;Similarly, when naming functions, it's important to choose names that accurately describe their purpose or behaviour. A function name should be a verb or a verb phrase that clearly conveys what the function does. For instance, instead of naming a function "calculate," consider using a name like "calculateTotalPrice" or "generateReport." This allows other developers to easily grasp the function's purpose and helps avoid confusion.&lt;/p&gt;

&lt;p&gt;When it comes to classes, they should typically be named using nouns or noun phrases that represent the objects or concepts they model. Classes should have names that describe what they are, rather than what they do. For example, if you have a class that represents a car, naming it "Car" would be appropriate. It's worth noting that class names are often written in title case (e.g., "Car" instead of "car") to distinguish them from variables and functions.&lt;/p&gt;

&lt;p&gt;In addition to choosing descriptive names, it's also important to maintain consistency throughout the codebase. By following consistent naming conventions, such as using camel case (e.g., "customerName") or underscores (e.g., "total_sales") for variables and functions, you create a uniform style that enhances readability.&lt;/p&gt;

&lt;p&gt;Overall, using descriptive names for variables, functions, and classes significantly improves the understandability of code. It helps developers quickly grasp the purpose and functionality of different elements, promotes maintainability, and facilitates collaboration among team members.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Keep functions and classes small and focused on a single task. This helps in easier maintenance, testing and reuse:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Keeping functions and classes small and focused on a single task is a fundamental principle in software development. This practice, often referred to as the Single Responsibility Principle (SRP), contributes to code maintainability, testability, and reusability.&lt;/p&gt;

&lt;p&gt;When functions or methods are small and focused, they become more readable and easier to understand. Developers can quickly comprehend the purpose and behaviour of a function when it is concise and addresses a single concern. This promotes code comprehension, reduces cognitive load, and enables efficient maintenance. If a function or method starts to become too long or complex, it's a signal that it may be responsible for multiple tasks and should be refactored into smaller, more focused functions.&lt;/p&gt;

&lt;p&gt;Small and focused functions also facilitate testing. When a function has a single responsibility, it becomes simpler to write targeted unit tests that cover its specific behaviour. Isolating the functionality within a small function allows for better test coverage and easier identification of potential issues or bugs. Additionally, if a function needs to be modified or fixed, having smaller units of code reduces the likelihood of introducing unintended side effects, making debugging and troubleshooting more manageable.&lt;/p&gt;

&lt;p&gt;The same principles apply to classes. A well-designed class should have a clear and specific purpose, representing a single concept or entity within the system. By adhering to this principle, classes become more modular and reusable. They can be easily composed and combined with other classes to create complex systems. Smaller classes with focused responsibilities are also less prone to bloating with unnecessary functionality and dependencies, leading to cleaner and more maintainable codebases.&lt;/p&gt;

&lt;p&gt;Furthermore, adhering to the principle of small and focused functions and classes promotes code reuse. When code is modular and focused, it can be easily extracted and reused in different parts of the system or in other projects. Developers can identify and extract common functionalities into reusable components, libraries, or modules. This reduces code duplication, enforces consistency, and accelerates development by leveraging existing tested and proven solutions.&lt;/p&gt;

&lt;p&gt;In summary, keeping functions and classes small and focused on a single task enhances code maintainability, testability, and reusability. It improves code readability, simplifies testing efforts, reduces bugs and side effects, and enables the creation of modular and reusable components. By embracing the Single Responsibility Principle, developers can create more maintainable and flexible codebases that are easier to understand, extend, and collaborate on.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Use comments to explain complex logic, assumptions, and the intent of the code:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Using comments in code is a good practice to enhance its clarity and maintainability. Comments should be used to explain complex logic, assumptions, and the intent of the code. They provide additional context for readers, including other developers or future maintainers, to understand the code's purpose and functionality.&lt;/p&gt;

&lt;p&gt;When writing comments, it's important to be concise and focus on relevant information. Comments should highlight any intricate or non-obvious sections of the code, describe the reasoning behind specific decisions or algorithms, and clarify any assumptions made during the implementation.&lt;/p&gt;

&lt;p&gt;By using comments effectively, you can improve code comprehension, facilitate collaboration among team members, and make it easier to debug and maintain the codebase in the future. Remember to keep comments up to date as the code evolves, ensuring that they accurately reflect the current state of the code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Write self-documenting code, using code constructs and design patterns that convey intent and functionality without the need for comments:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Writing self-documenting code is an important practice that aims to make the code itself expressive and understandable without relying heavily on comments. By using clear code constructs, consistent naming conventions, and design patterns, developers can create code that conveys its intent and functionality effectively.&lt;/p&gt;

&lt;p&gt;One way to achieve self-documenting code is by using meaningful and descriptive names for variables, functions, and classes. Well-chosen names can provide immediate context and understanding of their purpose, eliminating the need for excessive comments. By using names that accurately reflect the role and behaviour of each element, developers can create code that is self-explanatory and reduces ambiguity.&lt;/p&gt;

&lt;p&gt;In addition to naming, using consistent code structures and idiomatic patterns also contributes to self-documenting code. Following established conventions and best practices for a particular programming language or framework helps developers quickly grasp the code's structure and flow. When code follows a predictable pattern, it becomes easier to understand and maintain, without relying heavily on comments.&lt;/p&gt;

&lt;p&gt;Furthermore, adopting design patterns and architectural principles can enhance the clarity and readability of code. Design patterns, such as the Singleton, Observer, or Strategy patterns, encapsulate common problem-solving approaches in a recognisable and reusable manner. When used appropriately, design patterns can communicate the intent and functionality of code segments, making it easier for other developers familiar with the patterns to understand and work with the codebase.&lt;/p&gt;

&lt;p&gt;Writing code that is self-documenting doesn't mean avoiding comments altogether, as there may still be cases where additional explanations or context are necessary. However, the goal is to minimise the reliance on comments for understanding the code's behaviour. Comments should primarily be used for providing insights into complex or non-obvious parts of the code, rather than explaining every line or duplicating information that is already apparent from the code itself.&lt;/p&gt;

&lt;p&gt;By prioritising self-documenting code practices, developers can create codebases that are more maintainable, readable, and less error-prone. Self-documenting code reduces the cognitive load required to understand and work with the code, promotes consistency, and improves collaboration among team members. It also allows developers to focus on the actual code logic rather than spending excessive time deciphering unclear or poorly documented code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Use consistent indentation and formatting to make the code easy to read and navigate:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Consistent indentation and formatting are essential aspects of writing readable code. They contribute to the overall structure and visual clarity of the code, making it easier for developers to read, understand, and navigate through the codebase.&lt;/p&gt;

&lt;p&gt;Indentation is the practice of aligning code blocks within each other to represent their hierarchical relationships. It helps in visually indicating the scope and nesting of code, such as loops, conditionals, or function definitions. By consistently applying indentation, developers can quickly identify the logical structure of the code and understand how different blocks of code relate to each other.&lt;/p&gt;

&lt;p&gt;A common convention for indentation is to use a consistent number of spaces or tabs for each level of indentation. Popular standards, such as the 2-space, 4-space, or tab-based indentation, help maintain a consistent visual structure throughout the codebase. Consistency in indentation style is crucial to avoid confusion and ensure that developers can easily follow the code's flow.&lt;/p&gt;

&lt;p&gt;Formatting encompasses a broader range of practices, including line breaks, spacing, and alignment of code elements. Consistent formatting rules make the code more readable and help establish a standard style across the codebase. For example, consistent placement of braces ({}) for code blocks, aligning assignments or function parameters, and using consistent line lengths all contribute to the readability and navigability of the code.&lt;/p&gt;

&lt;p&gt;Following a specific code style guide, such as the popular PEP 8 for Python or the Google Java Style Guide, can provide guidelines on consistent indentation and formatting practices. These style guides help maintain a unified codebase and ensure that all developers working on the project follow the same conventions. Automated code formatters, such as Black for Python or Prettier for JavaScript, can also be used to enforce consistent formatting automatically.&lt;/p&gt;

&lt;p&gt;Consistent indentation and formatting not only improve code readability but also have practical benefits. They make it easier to spot syntax errors, detect missing or mismatched parentheses or braces, and quickly identify code sections that might need modification or review. They also facilitate collaboration by enabling multiple developers to work on the codebase seamlessly and understand each other's contributions.&lt;/p&gt;

&lt;p&gt;In summary, consistent indentation and formatting play a crucial role in making code easy to read and navigate. By following established conventions and using automated tools, developers can ensure a unified code style, improve code readability, and enhance collaboration. Consistent code formatting helps reduce cognitive load, promotes code maintenance, and contributes to the overall readability and understandability of the codebase.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. Avoid duplication of code by extracting common functionality into reusable functions or classes:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Avoiding duplication of code is a fundamental principle in software development that promotes code maintainability, readability, and efficiency. Duplicated code not only increases the risk of introducing errors but also makes the codebase more difficult to understand and maintain. By extracting common functionality into reusable functions or classes, developers can eliminate duplication and create a more modular and maintainable codebase.&lt;/p&gt;

&lt;p&gt;One approach to eliminating duplication is to identify recurring patterns or logic across different sections of code. If similar or identical code blocks exist in multiple places, it's a strong indication that the functionality can be extracted into a reusable function or method. By encapsulating this common functionality in a single place, developers can ensure consistency, reduce the risk of introducing bugs, and simplify future modifications or updates.&lt;/p&gt;

&lt;p&gt;Reusable functions or methods provide several benefits. They promote code reusability, as the same piece of code can be invoked from multiple places, avoiding the need to rewrite the same logic multiple times. This reduces redundancy and improves code efficiency. Moreover, when a bug is discovered or a change is required, updating a single function or method is much simpler and less error-prone than modifying multiple duplicated sections of code.&lt;/p&gt;

&lt;p&gt;In addition to functions, classes can also be used to encapsulate common functionality into reusable components. Classes allow for more complex behavior and state management, making them suitable for organizing related functions and data. By designing classes that encapsulate specific functionalities or concepts, developers can create reusable components that can be easily instantiated and used throughout the codebase.&lt;/p&gt;

&lt;p&gt;When extracting common functionality, it's important to design the extracted code to be flexible and adaptable to different contexts. This is achieved by defining clear input parameters and return values that cater to a range of use cases. By providing appropriate abstractions and interfaces, the extracted code can be easily integrated into various parts of the system without introducing unnecessary dependencies or tight coupling.&lt;/p&gt;

&lt;p&gt;Furthermore, code duplication can also be minimized by utilizing libraries or frameworks that provide reusable components or modules. These external resources offer pre-built functionalities for common tasks, allowing developers to leverage existing solutions rather than reinventing the wheel. By utilizing well-tested and widely-used libraries, developers can reduce development time, enhance code quality, and benefit from community support and updates.&lt;/p&gt;

&lt;p&gt;In summary, avoiding duplication of code is crucial for creating maintainable, readable, and efficient codebases. By extracting common functionality into reusable functions, methods, or classes, developers can eliminate redundancy, promote code reusability, and simplify maintenance and updates. Encapsulating common logic in reusable components improves code organisation, reduces the risk of errors, and enables developers to build upon existing solutions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;7. Follow the SOLID principles of object-oriented design to write code that is easy to modify and maintain:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Following the SOLID principles of object-oriented design is a valuable guideline for writing code that is modular, flexible, and maintainable. These principles, which include Single Responsibility Principle (SRP), Open/Closed Principle (OCP), Liskov Substitution Principle (LSP), Interface Segregation Principle (ISP), and Dependency Inversion Principle (DIP), provide a foundation for designing object-oriented systems that are easier to modify, extend, and test.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Single Responsibility Principle (SRP)&lt;/strong&gt; states that a class should have a single responsibility or reason to change. By adhering to this principle, each class focuses on a specific task or functionality, making it easier to understand, modify, and test. A class with a single responsibility is less likely to have multiple reasons to change, reducing the impact of modifications and making the codebase more maintainable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Open/Closed Principle (OCP)&lt;/strong&gt; emphasises that classes should be open for extension but closed for modification. This means that code should be designed in a way that new functionality can be added by extending existing classes or implementing new ones, rather than modifying the existing code. By adhering to the OCP, code becomes more resilient to changes and less prone to introducing bugs in existing functionality.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Liskov Substitution Principle (LSP)&lt;/strong&gt; emphasises that objects of a superclass should be replaceable with objects of its subclasses without affecting the correctness of the program. In other words, subclasses should be able to be used interchangeably with their superclass without breaking the code's behaviour. By following the LSP, code becomes more modular, allowing for better code reuse and easier maintenance.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Interface Segregation Principle (ISP)&lt;/strong&gt; suggests that clients should not be forced to depend on interfaces they do not use. Instead of having monolithic interfaces, the ISP promotes the creation of smaller and more focused interfaces tailored to specific clients' needs. This principle helps avoid bloated interfaces and minimises the impact of changes, allowing for more flexible and maintainable code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Dependency Inversion Principle (DIP)&lt;/strong&gt; states that high-level modules/classes should not depend on low-level modules/classes directly, but both should depend on abstractions. This principle encourages loose coupling and promotes the use of abstractions (interfaces or abstract classes) to decouple components and facilitate easier modifications or substitutions. By following the DIP, code becomes more flexible, extensible, and testable.&lt;/p&gt;

&lt;p&gt;By applying the SOLID principles, developers can design code that is more modular, flexible, and maintainable. The principles promote separation of concerns, encapsulation, loose coupling, and code reuse. By adhering to these principles, developers can create systems that are easier to modify, extend, and test, reducing the likelihood of introducing bugs or breaking existing functionality during code changes. Additionally, the SOLID principles facilitate collaboration and improve code readability by promoting clear separation of responsibilities and well-defined interfaces.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;8. Write unit tests to ensure that the code is working as expected, and to catch any regressions that may be introduced during future development:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Writing unit tests is an essential practice in software development that promotes code quality, reliability, and maintainability. Unit tests are small, focused tests that verify the correctness of individual units of code, such as functions, methods, or classes.&lt;/p&gt;

&lt;p&gt;Unit tests provide several benefits. First and foremost, they serve as a safety net, ensuring that the code behaves as expected and preventing regressions. By writing tests that cover different scenarios and edge cases, developers can identify and fix issues early in the development process, reducing the chances of introducing bugs or breaking existing functionality in the future.&lt;/p&gt;

&lt;p&gt;Unit tests also act as documentation for the code. By reading the tests, developers can understand the expected behavior of the code without having to go through its implementation details. Tests describe the usage and behavior of functions or classes, making it easier for developers to understand how to interact with the code and what output to expect.&lt;/p&gt;

&lt;p&gt;Additionally, writing unit tests encourages the creation of modular and loosely coupled code. In order to write effective tests, it's necessary to isolate the unit under test from its dependencies. This often involves using techniques such as mocking or stubbing to simulate external dependencies. By decoupling the unit from its dependencies, code becomes more modular, easier to test, and less prone to unintended side effects.&lt;/p&gt;

&lt;p&gt;Unit tests also facilitate code refactoring and evolution. When refactoring code, having a suite of tests gives developers confidence that the behavior of the code remains intact. Tests act as a safety net, ensuring that modifications or optimizations do not introduce regressions. This allows developers to make changes with greater agility and minimizes the fear of breaking existing functionality.&lt;/p&gt;

&lt;p&gt;In addition, unit tests promote good development practices such as separation of concerns and adherence to SOLID principles. By designing code that is testable, developers are encouraged to write modular, loosely coupled, and single-responsibility code. This results in code that is more maintainable and easier to understand.&lt;/p&gt;

&lt;p&gt;There are various testing frameworks and tools available for writing unit tests in different programming languages. These frameworks provide assertions, mocking capabilities, and test runners that automate the execution of tests and provide clear feedback on their success or failure. Examples of popular unit testing frameworks include Jest for Javascript, JUnit for Java, pytest for Python, and NUnit for .NET.&lt;/p&gt;

&lt;p&gt;In summary, writing unit tests is crucial for ensuring the quality and reliability of code. Tests act as a safety net, catching regressions and verifying the correctness of code. They also serve as documentation and promote good development practices. By investing in writing comprehensive unit tests, developers can have greater confidence in the codebase, facilitate code refactoring, and create maintainable and reliable software.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;9. Use version control to keep track of changes to the codebase and to collaborate with other developers:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Using version control is a fundamental practice in software development that offers numerous benefits, including better collaboration, code traceability, and the ability to revert changes if needed. Version control systems (VCS) provide a structured and organized way to manage codebase changes over time, making it easier for developers to work together effectively and track the evolution of the code.&lt;/p&gt;

&lt;p&gt;Version control allows developers to keep track of every change made to the codebase. It provides a history of modifications, allowing developers to review, compare, and understand how the code has evolved over time. With version control, it's possible to see who made a specific change, why it was made, and when it was made. This level of visibility helps in troubleshooting issues, understanding the context of code changes, and providing a reliable audit trail.&lt;/p&gt;

&lt;p&gt;Collaboration is greatly facilitated by version control systems. Multiple developers can work on the same codebase concurrently without conflicts, as the VCS manages merging changes and resolving conflicts automatically. Developers can work on their own branches, make isolated changes, and merge them back into the main codebase when they are ready. This allows for parallel development and enables teams to work efficiently without stepping on each other's toes.&lt;/p&gt;

&lt;p&gt;Version control systems also offer the ability to revert changes when needed. If a mistake is made or a feature needs to be rolled back, it is much easier to undo specific commits or changesets with version control. This ability to roll back provides a safety net, allowing developers to experiment, make changes, and explore different directions while having the confidence that they can revert back to a stable state if necessary.&lt;/p&gt;

&lt;p&gt;Moreover, version control systems provide features such as branching and tagging, which offer flexibility and control over the codebase. Branches allow developers to create separate streams of development, enabling the isolation of feature development, bug fixes, or experiments. Tags, on the other hand, provide meaningful labels for specific points in the codebase's history, such as releases or milestones, making it easier to navigate and reference specific versions of the code.&lt;/p&gt;

&lt;p&gt;Using a version control system also contributes to code quality and stability. With version control, it is possible to enforce best practices, code review processes, and continuous integration/continuous delivery (CI/CD) pipelines. These practices help ensure that code changes are thoroughly reviewed, tested, and validated before being merged into the main codebase, reducing the risk of introducing bugs or regressions.&lt;/p&gt;

&lt;p&gt;There are several popular version control systems available, such as Git, Subversion (SVN), and Mercurial. Git, in particular, has gained significant popularity due to its distributed nature, speed, and rich feature set. It is widely used in both open-source and commercial software development.&lt;/p&gt;

&lt;p&gt;In summary, using version control is essential for effective collaboration, code management, and maintaining a reliable and traceable codebase. Version control systems provide a history of changes, enable collaboration among developers, facilitate code review processes, and offer the ability to revert changes if needed. By adopting version control practices, developers can work more efficiently, track the evolution of the codebase, and ensure code quality and stability.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;10. Continuously refactor the code to keep it clean and maintainable, even as requirements and business needs change:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Continuously refactoring code is a critical practice in software development that ensures code remains clean, maintainable, and adaptable to changing requirements and business needs. Refactoring involves making improvements to the existing codebase without altering its external behavior, with the goal of enhancing code quality, readability, and maintainability.&lt;/p&gt;

&lt;p&gt;As requirements evolve and new features are added, code can become complex, hard to understand, and difficult to modify. By regularly refactoring, developers can proactively address these issues, making the codebase more robust and easier to work with.&lt;/p&gt;

&lt;p&gt;Refactoring improves code quality by eliminating code smells and anti-patterns. Code smells are indications of poor design or implementation choices that can lead to maintainability issues. Examples of code smells include duplicated code, long methods or classes, overly complex logic, or excessive dependencies. Refactoring helps to identify and resolve these issues, resulting in cleaner, more concise code.&lt;/p&gt;

&lt;p&gt;Maintainability is greatly enhanced through refactoring. By breaking down large, monolithic functions or classes into smaller, focused units, code becomes easier to understand and modify. Refactoring also improves the readability of the code, making it easier for developers to comprehend its purpose and behavior. Clean and maintainable code reduces the time required for bug fixing, feature implementation, and code reviews.&lt;/p&gt;

&lt;p&gt;Refactoring also plays a crucial role in ensuring that code remains adaptable to changing requirements. As business needs evolve, it is common for new features to be added, existing features to be modified, or obsolete functionality to be removed. Refactoring allows developers to make these changes with confidence, as they can rely on a well-structured and modular codebase that is easy to modify. By refactoring regularly, the codebase becomes more flexible and responsive to changing demands, reducing the risk of technical debt and minimizing the effort required for future enhancements.&lt;/p&gt;

&lt;p&gt;It is important to note that refactoring should be done incrementally and with the support of automated tests. Having a comprehensive suite of unit tests or automated tests provides a safety net, ensuring that code modifications do not introduce regressions. Refactoring should be carried out in small, focused steps, each validated by running the automated tests to ensure the correct behavior of the code is maintained.&lt;/p&gt;

&lt;p&gt;Refactoring is not a one-time activity but rather an ongoing process throughout the development lifecycle. It should be integrated into the daily workflow of developers to continuously improve the codebase. By allocating time for refactoring during development sprints or iterations, teams can proactively address technical debt, improve code quality, and maintain a clean and sustainable codebase.&lt;/p&gt;

&lt;p&gt;In summary, continuous refactoring is essential for maintaining code quality, readability, and adaptability. It eliminates code smells, improves maintainability, and enhances the codebase's ability to accommodate changing requirements. By making refactoring an integral part of the development process and leveraging automated tests, developers can ensure a clean and maintainable codebase that can evolve and adapt to meet the needs of the business.&lt;/p&gt;

&lt;p&gt;By following these best practices, developers can write clean, maintainable, and efficient code that is easy to read, understand, and modify. If you like this, they is a chance you might want to read my other posts. &lt;br&gt;
Thanks for reading and happy clean coding 😃 !!!&lt;/p&gt;

</description>
      <category>codequality</category>
      <category>programming</category>
      <category>cleancode</category>
    </item>
    <item>
      <title>The only React JS Resources Intro you need</title>
      <dc:creator>Sam</dc:creator>
      <pubDate>Tue, 09 May 2023 07:50:30 +0000</pubDate>
      <link>https://forem.com/codepapi/the-only-react-js-resources-intro-you-need-1414</link>
      <guid>https://forem.com/codepapi/the-only-react-js-resources-intro-you-need-1414</guid>
      <description>&lt;p&gt;Learning ReactJS can be a valuable skill to showcase on your LinkedIn profile for several reasons. First, ReactJS is in high demand in the job market, as it is widely used by companies of all sizes to build web and mobile applications. Having ReactJS on your resume can increase your chances of landing a job in the tech industry.&lt;/p&gt;

&lt;p&gt;In addition, ReactJS has a large and active development community, which means that there are always new features, tools, and best practices being developed. By staying up-to-date with the latest developments in ReactJS, you can demonstrate your commitment to professional growth and show that you are a valuable asset to any team.&lt;br&gt;
To learn ReactJS, there are many resources available, including:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1- Official ReactJS Documentation:&lt;/strong&gt; The official documentation is a great place to start learning ReactJS. It is well organised and provides detailed explanations of ReactJS concepts.&lt;br&gt;
Link: &lt;a href="https://lnkd.in/edcuZ3Kh" rel="noopener noreferrer"&gt;https://lnkd.in/edcuZ3Kh&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2- ReactJS Tutorials on W3Schools:&lt;/strong&gt; W3Schools provides a set of tutorials that cover the basics of ReactJS. The tutorials include hands-on exercises that help you learn by doing.&lt;br&gt;
Link: &lt;a href="https://lnkd.in/ek77fddx" rel="noopener noreferrer"&gt;https://lnkd.in/ek77fddx&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3- ReactJS Tutorial on Codecademy:&lt;/strong&gt; Codecademy offers a comprehensive tutorial that covers the basics of ReactJS. It provides a great foundation for beginners to learn ReactJS.&lt;br&gt;
Link: &lt;a href="https://lnkd.in/eMPqU2f2" rel="noopener noreferrer"&gt;https://lnkd.in/eMPqU2f2&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4- ReactJS Crash Course on YouTube:&lt;/strong&gt; Traversy Media's ReactJS Crash Course on YouTube is a great way to get started with ReactJS by Brad Traversy. The video covers the basics of ReactJS and provides examples of how to build a simple application.&lt;br&gt;
Link: &lt;a href="https://lnkd.in/eAMKRXRy" rel="noopener noreferrer"&gt;https://lnkd.in/eAMKRXRy&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5- ReactJS Roadmap on GitHub:&lt;/strong&gt; The ReactJS Roadmap is a comprehensive list of resources that you can use to learn ReactJS put together by Adam Gołąb . It includes tutorials, courses, books, and other resources.&lt;br&gt;
Link: &lt;a href="https://lnkd.in/emV7ad62" rel="noopener noreferrer"&gt;https://lnkd.in/emV7ad62&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6- ReactJS Courses on Udemy:&lt;/strong&gt; Udemy has a wide selection of courses that cover ReactJS. Some of the popular courses include React - The Complete Guide, Modern React with Redux, and React Native - The Practical Guide.&lt;br&gt;
Link: &lt;a href="https://www.udemy.com/" rel="noopener noreferrer"&gt;https://www.udemy.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;By using these resources to learn ReactJS, you can develop a valuable skill that you can showcase on your LinkedIn profile. I am also available to answer questions concerning this topic.. Good luck!&lt;/p&gt;

</description>
      <category>react</category>
      <category>beginners</category>
      <category>codenewbie</category>
      <category>javascript</category>
    </item>
    <item>
      <title>A complete guide to the Browser console</title>
      <dc:creator>Sam</dc:creator>
      <pubDate>Mon, 07 Feb 2022 15:02:30 +0000</pubDate>
      <link>https://forem.com/codepapi/a-complete-guide-to-the-browser-console-6gd</link>
      <guid>https://forem.com/codepapi/a-complete-guide-to-the-browser-console-6gd</guid>
      <description>&lt;p&gt;In this article, you will learn the A to Z about the console object. Everything you need to know about the Console in JavaScript, including how to use it to format output, and how to use it to debug your code. You will also learn all the features of the console object, additional styling options and using string substitution to format output.&lt;/p&gt;

&lt;h4&gt;
  
  
  Prerequisites
&lt;/h4&gt;

&lt;p&gt;Basic knowledge of JavaScript is required or Be console friendly.&lt;/p&gt;

&lt;h2&gt;
  
  
  what is a console in javascript?
&lt;/h2&gt;

&lt;p&gt;A console is a global object that is used to output data to the console environment in the browser or the Nodejs command line interface.&lt;/p&gt;

&lt;p&gt;This is a very useful tool for debugging and testing your code.It is also used to output data to the browser console in a more readable format.&lt;br&gt;
This object is available in the global scope and is made up of 24 methods as at 6th of February 2022.&lt;/p&gt;

&lt;p&gt;To check out the methods, you can use the &lt;code&gt;console.log (Object. keys (console). length)&lt;/code&gt; in any console environment to check out the number of methods available and also &lt;code&gt;console.log(console)&lt;/code&gt; to check out all the current available console object methods.&lt;/p&gt;
&lt;h2&gt;
  
  
  How to open a console in a Browser?
&lt;/h2&gt;

&lt;p&gt;For different browsers and operating systems, there are different ways to open a console.&lt;br&gt;
These are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;For Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools &amp;gt; Developer Tools.&lt;br&gt;
You can also use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;For Firefox,  click on the Firefox Menu in the upper-right-hand corner of the browser and selects More Tools &amp;gt; Browser Console.&lt;br&gt;
You can also use the shortcut Shift + ⌘ + J (on macOS) or Shift + CTRL + J (on Windows/Linux).&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;For Microsoft Edge, open the Edge Menu in the upper-right-hand corner of the browser window and select More Tools &amp;gt; Developer Tools.&lt;br&gt;
You can also press CTRL + Shift + i to open it.&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;For other browsers, kindly check out their documentation.&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  How to use the console object
&lt;/h2&gt;


&lt;h3&gt;
  
  
  1.  &lt;u&gt;console.log ()&lt;/u&gt;
&lt;/h3&gt;

&lt;p&gt;The easiest way to use the console is to use the &lt;code&gt;console.log()&lt;/code&gt; function on your browser console.&lt;/p&gt;
&lt;h4&gt;
  
  
  example 1: Passing in a simple single argument of any data type.
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello World&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This would simply output the text “Hello World” to the console.&lt;br&gt;
Something to note is that the console will output any data type that is passed in. For instance, if you pass in a number, it will output the number. If you pass in a string, it will output the string. If you pass in an object, it will output the object in a readable format.&lt;/p&gt;
&lt;h4&gt;
  
  
  example 2: Passing in multiple arguments
&lt;/h4&gt;

&lt;p&gt;The &lt;code&gt;console.log()&lt;/code&gt; function can take in any number of arguments and will output them to the console. &lt;br&gt;
It also outputs the arguments to the console in a readable format.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello World&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;test&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;test&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;  &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; 
&lt;span class="c1"&gt;//returns    "Hello World" true false null [ 1, 3, 4 ] { test: 'test' } &lt;/span&gt;


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

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu2dr5hpu11ylkig0c5hk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu2dr5hpu11ylkig0c5hk.png" alt="console.log example" width="607" height="85"&gt;&lt;/a&gt;&lt;br&gt;
The console will output the arguments in a readable format.&lt;/p&gt;
&lt;h4&gt;
  
  
  example 3: Performing logics,  arithmetic operations or string concatenations.
&lt;/h4&gt;

&lt;p&gt;console.log allows logic, string concatenation or mathematical operations to be performed inside it and returns the result&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="o"&gt;&amp;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;// returns false&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// returns 4&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I am &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Learning&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// returns "I am Learning"&lt;/span&gt;

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  example 4: Perfoming Strings Styling  like the css to html
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;%c I am a blue text on a black background.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;color:blue; background-color:black&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkjg03514lsa1v7f4ldh6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkjg03514lsa1v7f4ldh6.png" alt="console styling" width="612" height="24"&gt;&lt;/a&gt;&lt;br&gt;
The above example we uses %c to specify that we have styles to add which are later added as the second arguments of the console.log method.&lt;/p&gt;
&lt;h4&gt;
  
  
  example 5: Perfoming String Substitution
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hi %s, my name is %s and i am %d years old&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;world&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Joe&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F59gnk39b0nhremtxj0wl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F59gnk39b0nhremtxj0wl.png" alt="string substitution example" width="602" height="28"&gt;&lt;/a&gt;&lt;br&gt;
The above example takes in a string as the first argument which also contains %s and %d, making the statement not clear. This shows that, the second, third and forth arguments are to replace the %s and %d values. but what makes the two different?  s% can only take in a string and %d takes in a digit.&lt;/p&gt;


&lt;h3&gt;
  
  
  2.  &lt;u&gt; console.table()&lt;/u&gt;
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;console.table()&lt;/code&gt;function is used to output data to the console in a tabular format unlike the &lt;code&gt;console.log()&lt;/code&gt; that logs out all data as inputted. It takes in an array of objects, an Array or an Object and outputs them to the console in a tabular format.&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;arr&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;a&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;b&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;c&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="na"&gt;firstName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;lastName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;eyeColor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;blue&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;arrOfObj&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="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;shark&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;likes&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ocean&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;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;turtle&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;likes&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pond&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;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;otter&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;likes&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;fish biscuits&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above code sample would be used to illustrate how codes would output on &lt;code&gt;console.log()&lt;/code&gt; vs &lt;code&gt;console.table()&lt;/code&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  - example 1: console.log(arr) vs console.table(arr)
&lt;/h4&gt;

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

&lt;h4&gt;
  
  
  - example 2: console.log(obj) vs console.table(obj)
&lt;/h4&gt;

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

&lt;h4&gt;
  
  
  - example 3: console.log(arrOfObj) vs console.table(arrOfObj)
&lt;/h4&gt;

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

&lt;p&gt;The difference between the console.log and the console.table  is that, the console.log outputs Arrays and Objects just the way they are, while the console.table presents them in a tabular format.&lt;br&gt;
A very important use case for this is when testing an API with a list of data. This makes it more readable.&lt;/p&gt;


&lt;h3&gt;
  
  
  3.  &lt;u&gt; console.clear()&lt;/u&gt;
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;console.clear()&lt;/code&gt; function is used to clear the console. It is very useful when you are debugging and you want to clear the console before you start writing your code.&lt;br&gt;
example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello World Before Clear&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;clear&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello World After Clear&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This would clear the console with the text &lt;code&gt;"Hello World Before Clear"&lt;/code&gt; and would output only &lt;code&gt;"Hello World After Clear"&lt;/code&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  4.  &lt;u&gt; console.assert()&lt;/u&gt;
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;console.assert()&lt;/code&gt; function is used to check if a condition is true or false. If the condition is false, it will output an error message to the console, but if it is not, it will do nothing.&lt;/p&gt;

&lt;h4&gt;
  
  
  - example 1:
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;assert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1 is not equal to 1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This would output nothing to the console because the condition is true, since integer is equal to integer 1 &lt;/p&gt;

&lt;h4&gt;
  
  
  - example 2:
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;assert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1 is not equal to 2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff9gi5jw9wg2msxz7ahvw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff9gi5jw9wg2msxz7ahvw.png" alt="console.assert example" width="596" height="61"&gt;&lt;/a&gt;&lt;br&gt;
This would output the following to the console:   &lt;code&gt;"1 is not equal to 2"&lt;/code&gt;because  the condition is false.&lt;/p&gt;


&lt;h3&gt;
  
  
  5.  &lt;u&gt;console.log() Aliases&lt;/u&gt;:
&lt;/h3&gt;

&lt;p&gt;&lt;u&gt;console.error(), console.warn(), console.info(), console.debug()&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;There are 4 console.log() aliases because there are 4 different types of messages that can be outputted to the console. There are aliases because there work like the console.log but the functions are used to output data to the console in a different format and/or background colors. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;u&gt; The console.error() &lt;/u&gt; function is used to output an error message to the console.&lt;/li&gt;
&lt;li&gt;
&lt;u&gt;  The console.warn() &lt;/u&gt; function is used to output a warning message to the console.&lt;/li&gt;
&lt;li&gt; &lt;u&gt; The console.info() &lt;/u&gt; function is used to output an informational message to the console.&lt;/li&gt;
&lt;li&gt;
&lt;u&gt;  The console.debug() &lt;/u&gt; function is used to output a debugging message to the console.
These functions are all very similar to the console.log() function.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The only difference is that they output renders in a different format, background colors or the left icon which may vary from browser to browser.&lt;br&gt;
These are all aliases for the console.log() function. &lt;/p&gt;
&lt;h4&gt;
  
  
  example
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;info&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Console Info&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;debug&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Console Debug&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;warn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Console Warn&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Console Error&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe1bm2mwishyjwiflhr6j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe1bm2mwishyjwiflhr6j.png" alt="console aliases" width="595" height="78"&gt;&lt;/a&gt;&lt;br&gt;
The above is a representation of the console.log aliases behavior on the Google Chrome browser which indicates the exhibition of the &lt;code&gt;console.error&lt;/code&gt; on a red background color and &lt;code&gt;console.warn&lt;/code&gt; on a yellow background color. &lt;br&gt;
The colors and behavior varies from browsers to browser and it is more informative than just using the console.log. &lt;/p&gt;


&lt;h3&gt;
  
  
  6.  &lt;u&gt;The Time Tracking Logs&lt;/u&gt;
&lt;/h3&gt;
&lt;h4&gt;
  
  
  &lt;u&gt; console.time(), console.timeLog() and console.timeEnd() &lt;/u&gt;
&lt;/h4&gt;

&lt;p&gt;The time tracking Logs in the console are used to track the time it takes to run a piece of code.&lt;br&gt;
There are 3 functions that are used to track the time.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;u&gt;  The console.time() &lt;/u&gt; function is used to  start a timer in a console, it should be placed at the beginning a process. It takes in a label as an argument which is of string data type.
This label act as an identifier of whatever process time interval you want to track.
&lt;/li&gt;
&lt;li&gt;
&lt;u&gt;  console.timeLog() &lt;/u&gt; function is used to output processing time to the console at a each interval interval. 
If you only want to track the total time, you might not need the console.timeLog() function. It also takes in the same argument as the &lt;code&gt;console.time()&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;u&gt; The console.timeEnd() &lt;/u&gt; function is used to stop a timer and output a message to the console of the total time to run the process.It also takes in the same argument as the &lt;code&gt;console.time()&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Note: The reason why we use the same argument for the console.time() and console.timeEnd() is because we want to track the time of a process. if we want to track the time of another process, we can use the same label.&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;// Our label here is Track Time&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;time&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Track Time&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;//Here is our time tracking begins&lt;/span&gt;

&lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="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;// some code&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;timeLog&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Track Time&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 is what keeps track of time after each loop&lt;/span&gt;

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

  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;timeEnd&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Track Time&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Here is where our time tracking ends&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;The above example shows time tracked after each loop, from 0 to 4, while the last shows the total time tracked after the whole process. &lt;br&gt;
A good use case for using the time tracking logs is when trying to compare the speed of algorithms to enable you make use of the most efficient.&lt;/p&gt;




&lt;h3&gt;
  
  
  7.  &lt;u&gt; The Counter Logs &lt;/u&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;u&gt;console.count() and console.countReset() &lt;/u&gt;&lt;br&gt;
The counter logs in the console are used to count the number of times a piece of code is executed.&lt;br&gt;
There are 2 functions that are used to count the number of times a piece of code is executed.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;u&gt;The console.count()&lt;/u&gt; function is used to output a message to the console and start a counter. &lt;/li&gt;
&lt;li&gt;
&lt;u&gt;The console.countReset()&lt;/u&gt; function is used to output a message to the console and reset the counter.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The Count Tracker Logs also takes in a label as a argument. In this below example, we named in the "Count Track".&lt;/p&gt;

&lt;h4&gt;
  
  
  example:
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//console.count()&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Counter1&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Count Track&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;function&lt;/span&gt; &lt;span class="nf"&gt;Counter2&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Count Track&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="nc"&gt;Counter1&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nc"&gt;Counter1&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nc"&gt;Counter2&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nc"&gt;Counter2&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nc"&gt;Counter1&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="c1"&gt;//console.countReset()&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;countReset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Count Track&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;//counts after reset&lt;/span&gt;
&lt;span class="nc"&gt;Counter2&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nc"&gt;Counter1&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;From the result above, Counter1 and Counter2 functions tracked the count using the console method console.count() with a label "Count Track" at each function call up to 5 times till the console.countReset() method was introduced with the same label as the console.count().&lt;br&gt;
The count restarted after the countReset was called.&lt;/p&gt;




&lt;h3&gt;
  
  
  8.  &lt;u&gt; The Grouping Logs &lt;/u&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;u&gt;console.group(), console.groupEnd() and  console.groupCollapsed()&lt;/u&gt;&lt;br&gt;
The grouping logs in the console are used to group a set of logs together.&lt;br&gt;
There are 3 functions and are used to group a set of logs together.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;u&gt;The console.group()&lt;/u&gt; function is used to output a message to the console and start a group. &lt;/li&gt;
&lt;li&gt;
&lt;u&gt;The console.groupEnd()&lt;/u&gt; function is used to output a message to the console and stop a group. &lt;/li&gt;
&lt;li&gt;
&lt;u&gt;The console.groupCollapsed()&lt;/u&gt; function is used to output a message to the console at any group level, but is is collapsed by default.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  example :
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;This is the outer level which is Level 1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;group&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Level 2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;group&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Level 3&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;More of level 3&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;groupCollapsed&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;test collapse&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;test collapse2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;groupEnd&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Back to level 2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;groupEnd&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Back to the outer level&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;The above displays the result of the grouped codes. The result shows levels of each group formed using the console.group() method. at every time the console.group() method was called, a new group was created, at any point a groupEnd() was called, the last group was taken off. &lt;br&gt;
The groupCollapsed maintained any group it found itself except gave birth to children which where collapsed by default. &lt;/p&gt;




&lt;h3&gt;
  
  
  9.  &lt;u&gt;console.trace()&lt;/u&gt;
&lt;/h3&gt;

&lt;p&gt;The console.trace() function is used to output a stack trace to the console.&lt;br&gt;
This is very useful when you are debugging and you want to see the stack trace of the error.&lt;/p&gt;

&lt;h4&gt;
  
  
  example :
&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;function&lt;/span&gt; &lt;span class="nf"&gt;showTrace&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;bar&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;trace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;show me traces&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="nf"&gt;bar&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="nf"&gt;showTrace&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;The above example shows stack trace of the in order of the last child to the parent function. A good use case for it is when debugging to sort the origin of a certain stack.&lt;/p&gt;




&lt;h3&gt;
  
  
  10.  &lt;u&gt;console.dir()&lt;/u&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;u&gt;The console.dir()&lt;/u&gt; is used to output all the properties of a javascript object to the console. This is very useful when you are debugging and you want to see the properties of an object. It outputs the properties of an object in hierarchical format.&lt;/p&gt;

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

&lt;p&gt;The console environment can be utilized to output data in more useful, customized and readable format beyond just the console.log. &lt;/p&gt;

&lt;p&gt;I hope it has helped 😀 😀 😀&lt;br&gt;
Thanks for reading and Happy coding!!!&lt;/p&gt;

&lt;p&gt;You can also check out My other article on&lt;a href="https://dev.to/codepapi/debouncing-in-javascript-using-a-custom-function-or-lodash-library-lah"&gt;Debouncing in Javascript using a custom function or Lodash library.&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>console</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Debouncing in Javascript using a custom function or Lodash library.</title>
      <dc:creator>Sam</dc:creator>
      <pubDate>Thu, 30 Dec 2021 21:06:05 +0000</pubDate>
      <link>https://forem.com/codepapi/debouncing-in-javascript-using-a-custom-function-or-lodash-library-lah</link>
      <guid>https://forem.com/codepapi/debouncing-in-javascript-using-a-custom-function-or-lodash-library-lah</guid>
      <description>&lt;p&gt;&lt;strong&gt;What A Debounce function is&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Wait, you are a Javascript developer trying  to implement a function to only fire after an interval from when a certain action or event is triggered and you have tried and still not gotten it the right way.&lt;/p&gt;

&lt;p&gt;Worry no more as I would put together two ways of doing this the right way without you getting to crack your head so hard and that is what a debounce function solves.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1.) Debouncing using a custom JS function&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;const&lt;/span&gt; &lt;span class="nx"&gt;debounceTime&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;timer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;return&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;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;timer&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nf"&gt;clearTimeout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;timer&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nx"&gt;timer&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;T&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;This function takes in two parameters,   a function, &lt;code&gt;fn()&lt;/code&gt; to be debounced and the time interval, &lt;code&gt;T&lt;/code&gt; to wait for the action to run.&lt;/p&gt;

&lt;p&gt;Example, we want a callback function that would be called after 1000 Milliseconds or 1 seconds, we would just call the debounceTime function with parameters of the callback function and 1000 Milliseconds.&lt;br&gt;
The function would log "I debounced after 1 seconds" just after 1 second in the console.&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="nf"&gt;debounceTime&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt;&lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I debounced after 1 seconds&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;&lt;strong&gt;2.) Debouncing using a Lodash&lt;/strong&gt;&lt;br&gt;
For you to be able use the lodash package on your Node.js Environment,&lt;br&gt;
you have to first install the lodash package using &lt;code&gt;$ npm i --save lodash&lt;/code&gt; for npm or &lt;code&gt;$ yarn add lodash&lt;/code&gt; for yarn through your command line interface, &lt;br&gt;
after that, you import it into your the file you want to apply it.&lt;br&gt;
import {debounce} from "lodash"&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="nf"&gt;debounce&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt;&lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I debounced after 1 seconds&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;The above use case would work exactly as the example using the custom JS function&lt;/p&gt;

&lt;p&gt;I hope it helped 😀 😀 😀&lt;br&gt;
Thanks for reading and Happy coding!!!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>debounce</category>
    </item>
  </channel>
</rss>
