<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Peter Akojede</title>
    <description>The latest articles on DEV Community by Peter Akojede (@peter_akojede).</description>
    <link>https://dev.to/peter_akojede</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%2F1523650%2Fb2a5897f-4fe9-4ee9-bd3e-ed2cffba62cc.jpg</url>
      <title>DEV Community: Peter Akojede</title>
      <link>https://dev.to/peter_akojede</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/peter_akojede"/>
    <language>en</language>
    <item>
      <title>Why Every Software Engineering Team Needs a QA Tester</title>
      <dc:creator>Peter Akojede</dc:creator>
      <pubDate>Sun, 04 May 2025 21:16:18 +0000</pubDate>
      <link>https://dev.to/peter_akojede/why-every-software-engineering-team-needs-a-qa-tester-3ef8</link>
      <guid>https://dev.to/peter_akojede/why-every-software-engineering-team-needs-a-qa-tester-3ef8</guid>
      <description>&lt;p&gt;In the fast-paced world of software development, Quality Assurance (QA) Testers are the unsung heroes ensuring that what we build actually works — and works well. They test end to end to ensure the products meet its requirement and specification. They look for loopholes, and prevent bugs in production.&lt;/p&gt;

&lt;p&gt;Here’s why QA is essential:&lt;/p&gt;

&lt;p&gt;✅ Bug Prevention, Not Just Detection: QA testers help catch issues early, saving time and resources before bugs make it to production.&lt;/p&gt;

&lt;p&gt;✅ Improved User Experience: They think like end users, helping to ensure a smooth, intuitive experience.&lt;/p&gt;

&lt;p&gt;✅ Boosts Developer Efficiency: Engineers can focus on building, knowing QA has their back on quality.&lt;/p&gt;

&lt;p&gt;✅ Confidence to Ship: With QA sign-off, teams can deploy with peace of mind.&lt;/p&gt;

&lt;p&gt;✅ Maintains Brand Reputation: High-quality, reliable software keeps users happy and loyal.&lt;/p&gt;

&lt;p&gt;A great QA Tester doesn’t just test — they collaborate, communicate, and elevate the whole team.&lt;/p&gt;

&lt;p&gt;Let’s stop thinking of QA as the last step, and instead, an integral part of the process from Day One. 💡&lt;/p&gt;

&lt;h1&gt;
  
  
  SoftwareEngineering #QualityAssurance #QATesting #TechTeamwork #ProductQuality.
&lt;/h1&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%2Fy5xaokzn1s56q3nbtxvo.jpg" 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%2Fy5xaokzn1s56q3nbtxvo.jpg" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>When A Developer Actually Take A Break</title>
      <dc:creator>Peter Akojede</dc:creator>
      <pubDate>Thu, 20 Mar 2025 10:23:13 +0000</pubDate>
      <link>https://dev.to/peter_akojede/when-a-developer-actually-take-a-break-4l5j</link>
      <guid>https://dev.to/peter_akojede/when-a-developer-actually-take-a-break-4l5j</guid>
      <description>&lt;p&gt;As developers, we often find ourselves in the zone, coding away for hours on end. But let's be honest—when do we actually take a break.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;When the Code Finally Works &lt;/li&gt;
&lt;li&gt;When logical thinking and flow is not coming&lt;/li&gt;
&lt;li&gt;After Hours of Mindless Debugging, or when debugging becomes frustrating.&lt;/li&gt;
&lt;li&gt;When external factors interrupt&lt;/li&gt;
&lt;li&gt;When deep focus declines.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Remember, taking breaks isn't just about resting—it's about giving your brain the space it needs to innovate and create. So, next time you're stuck, maybe it's time to step away, grab a snack, and come back with fresh eyes.👀&lt;/p&gt;

&lt;p&gt;What's your favorite "break moment"? you can Share your stories in the comment section! 👇&lt;/p&gt;

&lt;h1&gt;
  
  
  Programming hashtag#DeveloperLife hashtag#TakeABreak hashtag#Coding hashtag#TechHumor
&lt;/h1&gt;

</description>
    </item>
    <item>
      <title>Frontend vs. Backend: Understanding the Difference</title>
      <dc:creator>Peter Akojede</dc:creator>
      <pubDate>Tue, 11 Mar 2025 09:02:39 +0000</pubDate>
      <link>https://dev.to/peter_akojede/frontend-vs-backend-understanding-the-difference-3fai</link>
      <guid>https://dev.to/peter_akojede/frontend-vs-backend-understanding-the-difference-3fai</guid>
      <description>&lt;p&gt;In software development, two major components power every web or mobile application: Frontend and Backend. Each plays a crucial role in delivering seamless user experiences and functionality.&lt;/p&gt;

&lt;p&gt;Frontend – The User Interface&lt;br&gt;
Frontend is the client-side of an application—everything the user sees and interacts with. From buttons and navigation to forms and animations, frontend development focuses on creating visually appealing, user-friendly interfaces.&lt;br&gt;
💡 Key technologies:&lt;br&gt;
 🖥️ Markup &amp;amp; Styling: HTML, CSS, Tailwind, Bootstrap, SCSS, Styled Components, MUI&lt;br&gt;
 ⚙️ Programming &amp;amp; Frameworks: JavaScript, React, Next.js, Vue, Angular, Svelte&lt;br&gt;
💡 Common frontend features:&lt;br&gt;
 ✅ Displaying API data&lt;br&gt;
 ✅ Handling user interactions&lt;br&gt;
 ✅ Implementing UI/UX designs&lt;br&gt;
 ✅ Responsive &amp;amp; interactive layouts&lt;br&gt;
Whether it's tracking an order, making a payment, or booking a ride, a well-built frontend makes it all possible.&lt;/p&gt;

&lt;p&gt;Backend – The Logic &amp;amp; Data Layer&lt;br&gt;
Backend is the server-side of an application—it handles logic, database interactions, and security. While the frontend focuses on presentation, the backend ensures everything works behind the scenes.&lt;br&gt;
💡 Key responsibilities:&lt;br&gt;
 🔹 Building APIs &amp;amp; endpoints for frontend consumption&lt;br&gt;
 🔹 Managing user authentication &amp;amp; security&lt;br&gt;
 🔹 Handling business logic &amp;amp; data processing&lt;br&gt;
 🔹 Storing and retrieving information from databases&lt;br&gt;
💡 Common backend technologies:&lt;br&gt;
 🚀 Programming languages: Python, Java, Ruby, C#, Node.js, Kotlin, Perl&lt;br&gt;
 🗄️ Databases: MySQL, PostgreSQL, MongoDB, Firebase&lt;br&gt;
Simply put, without a backend, there would be no data flow, authentication, or business logic.&lt;/p&gt;

&lt;p&gt;How Frontend &amp;amp; Backend Work Together&lt;br&gt;
The frontend is like a restaurant’s dining area—what customers see, the menu, and where they place orders. The backend is the kitchen, where meals are prepared, orders are processed, and everything runs behind the scenes. Both are essential for a great experience! 🍽️🚀 Both are essential to delivering high-performing, scalable applications! 🚀&lt;br&gt;
Are you a frontend or backend developer? Or maybe a full-stack engineer who does both? Drop your thoughts in the comments!&lt;/p&gt;

&lt;h1&gt;
  
  
  FrontendVsBackend #WebDevelopment #SoftwareEngineering #TechExplained #FullStackDevelopment #Coding #Programming #TechInsights #DevLife #SoftwareDevelopment #BuildTheFuture
&lt;/h1&gt;

</description>
    </item>
    <item>
      <title>Debugging: A Programmer's Superpower</title>
      <dc:creator>Peter Akojede</dc:creator>
      <pubDate>Thu, 27 Feb 2025 08:52:58 +0000</pubDate>
      <link>https://dev.to/peter_akojede/debugging-a-programmers-superpower-305</link>
      <guid>https://dev.to/peter_akojede/debugging-a-programmers-superpower-305</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsy4rgevlv9mbxo0rn0n2.jpg" 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%2Fsy4rgevlv9mbxo0rn0n2.jpg" alt="Image description" width="800" height="504"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Bugs is an inevitable part of programming. The term "debugging" became popular after a physical moth(insect) was found causing an issue in the Harvard Mark II computer at Harvard University. &lt;/p&gt;

&lt;p&gt;when writing code dealing with bugs is inevitable, solving bugs or debugging is a skill that every software engineer or programmer must have. it is actually part of the growth process and bugs also is a respecter of no body. if it is not working you fix it.&lt;/p&gt;

&lt;p&gt;Debugging takes time, depending on the nature of the bug. That’s why paying close attention to your code is crucial. Understand its flow, syntax, and logic. Mastering the fundamentals helps you catch issues faster.&lt;br&gt;
Bugs occur during development and even more in production. &lt;/p&gt;

&lt;p&gt;Here are some techniques to debug effectively&lt;/p&gt;

&lt;p&gt;🔹 Think critically – Consider all possible causes.&lt;br&gt;
🔹 Pay attention to your code – Understand how it flows and where issues might originate.&lt;br&gt;
🔹 Read error messages carefully – They often point you in the right direction.&lt;br&gt;
🔹 Take breaks – Sometimes stepping away helps you see the problem more clearly.&lt;br&gt;
🔹 Use debugging tools – console.log() for JavaScript, border: 2px solid red; for UI issues, and built-in browser dev tools.&lt;br&gt;
🔹 Explain your logic out loud – Whether to a colleague or even a rubber duck, verbalizing your thought process can reveal mistakes.&lt;/p&gt;

&lt;p&gt;Debugging is a game of the mind. Stay patient, keep learning, and embrace the process! 🚀&lt;/p&gt;

&lt;h1&gt;
  
  
  Programming #Debugging #SoftwareDevelopment #Tech #CodingTips
&lt;/h1&gt;

</description>
    </item>
    <item>
      <title>Beyond the Code: Why Communication is a Developer's Superpower</title>
      <dc:creator>Peter Akojede</dc:creator>
      <pubDate>Mon, 17 Feb 2025 09:53:38 +0000</pubDate>
      <link>https://dev.to/peter_akojede/beyond-the-code-why-communication-is-a-developers-superpower-4i3h</link>
      <guid>https://dev.to/peter_akojede/beyond-the-code-why-communication-is-a-developers-superpower-4i3h</guid>
      <description>&lt;p&gt;As developers, we often focus on writing clean, efficient code—but technical skills alone aren't enough. Communication is just as crucial.&lt;br&gt;
Your ability to clearly articulate ideas, ask the right questions, and collaborate with your team can set you apart. Technical skills might land you the job, but strong communication will accelerate your growth and impact.&lt;br&gt;
Think about it:&lt;/p&gt;

&lt;p&gt;Stuck on a blocker? Speaking up can get you the right help.&lt;br&gt;
API returning a error? A quick discussion can save hours of debugging.&lt;br&gt;
Merge conflicts slowing you down? Clear communication can prevent delays.&lt;/p&gt;

&lt;p&gt;Effective communication ensures smoother development cycles, fewer misunderstandings, and faster problem-solving. It’s what keeps projects moving forward. Being able to communicate effectively is a fundamental ability that increases your productivity, dependability, and value. &lt;/p&gt;

&lt;p&gt;Have you ever been on a project where poor communication caused delays or even failure? Let’s discuss in the comments! &lt;/p&gt;

&lt;h1&gt;
  
  
  softwareengineer
&lt;/h1&gt;

&lt;h1&gt;
  
  
  developer
&lt;/h1&gt;

&lt;h1&gt;
  
  
  communication
&lt;/h1&gt;

</description>
    </item>
    <item>
      <title>Best Practices for Working with Legacy Code</title>
      <dc:creator>Peter Akojede</dc:creator>
      <pubDate>Tue, 11 Feb 2025 09:28:35 +0000</pubDate>
      <link>https://dev.to/peter_akojede/best-practices-for-working-with-legacy-code-40pf</link>
      <guid>https://dev.to/peter_akojede/best-practices-for-working-with-legacy-code-40pf</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcloa7bu2i3xyu5s9muze.jpg" 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%2Fcloa7bu2i3xyu5s9muze.jpg" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;#softwaredevelopment&lt;/p&gt;

&lt;p&gt;Legacy code base is an existing code base that has been written in the past by  software Engineers(dev) and is still being used today. When asked to work on a legacy code base you are expected to follow the pattern, structure and legacy of the person (dev) who wrote the code or set down the structure.&lt;/p&gt;

&lt;p&gt;As a software Engineer(dev) before working on a legacy code base, ensure you request for documentation, or go through the RADME.md file. If possible request for time to go through the legacy code base. Ensure you understand the user flow and the workflow the legacy code base was written for. &lt;/p&gt;

&lt;p&gt;Here are some of the tips you can follow.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Go through the file and check how they are related and link to each other.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Understand the structure and pattern of the code, You can innovate and work things out your way after comprehending the code base.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ensure you stick to the technology stack being used, there are some you can learn on the job. If you feel that you want a change you can communicate it with the team and agree.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In some cases you might be allowed to do things in your own way or the pattern you write code which is rear [this often happens when the dev who wrote the code or set down the structure and pattern is not available] &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In all, never criticize another person’s code base  [it doesn't provide solutions], rather improve it with time, apply the DRY [Do not repeat yourself] Principle , optimize it and make it more scalable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ensure you do test the code know what is working, and also know what you want to work on and how they are related to other files. &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;How did you approach a legacy code base, share your tips below at the comment section let us learn from each other.&lt;/p&gt;

&lt;p&gt;Follow me for more programming Tips&lt;/p&gt;

&lt;h1&gt;
  
  
  LegacyCodebase
&lt;/h1&gt;

&lt;h1&gt;
  
  
  SoftwareEngineer
&lt;/h1&gt;

&lt;h1&gt;
  
  
  softwaredevelopment
&lt;/h1&gt;

</description>
    </item>
    <item>
      <title>Conditional Statement In Javascript</title>
      <dc:creator>Peter Akojede</dc:creator>
      <pubDate>Fri, 14 Jun 2024 13:04:07 +0000</pubDate>
      <link>https://dev.to/peter_akojede/conditional-statement-in-javascript-3pb9</link>
      <guid>https://dev.to/peter_akojede/conditional-statement-in-javascript-3pb9</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3waky1wajg6vxme7uy3m.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3waky1wajg6vxme7uy3m.jpg" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;we use conditional statement in javascript when we want to perform different actions based on different conditions. They are the fundamental part of programming and use when certain conditions are either true or false. uderstanding them will enable you to use them effectively and allows you to execute specific blocks of code based on conditions.&lt;/p&gt;

&lt;p&gt;The main type of conditional statement in Javascript are;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;If statement&lt;/li&gt;
&lt;li&gt;If else Statement.&lt;/li&gt;
&lt;li&gt;If else, if else statement (else if).&lt;/li&gt;
&lt;li&gt;Switch statement.&lt;/li&gt;
&lt;li&gt;Tenary operator (Conditional Operator)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;The If statement&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The if statement in javascript is the most basic type of expression. it is a statement that always returns true, when an expression is false it will not evalutae the expression, it will only be executed when it is true.&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;samuelAge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;18&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;felixAge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;samuelAge&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;felixAge&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Samuel is the eldest brother of Felix&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; 

&lt;span class="c1"&gt;// output Samuel is the eldest brother of Felix\&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The output here will be Samuel is the eldest brother of felix, because the conditions evaluate to be true. However when the statement is false the code will not run.&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;felixAge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;samuelAge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;18&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;felixAge&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;SamuelAge&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Felix is older than Samuel&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// output: no output because it is false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This code will have no output, since felixAge is less than (&amp;lt;) samuelAge. This will evaluate to false and will be ignored because it is not a truthy statement.&lt;br&gt;
The if keywords is used to create an if statement, which is then followed by a condition enclosed in parenthesis and the code to be executed enclosed in curly brackets. it may be expressed simply as if () {}.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If else Statement&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;if else statement is applicable when we want the conditions to be either true or false. when we want something to occur in the event that the condition is not fulfilled i.e. false then we use if else statement. the if statement comes first and the else statement comes follows and has no condition in parathesis.&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;felixAge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;samuelAge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;18&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;felixAge&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;samuelAge&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Samuel is the eldest brother of Felix&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&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;Felix is the eldest brother of Samuel&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;//output: Felix is the eldest brother of Samuel&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This statement above is false!!! when executing an if statement they are always true but when the if statement are not true the codes moves on to the else statement and execute the statement that is false. The condition is false because felix is not older than samuel.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If else if else (The else if Statement)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If else statement is nested to create an else if clause. it is often use for conditions that are true or false. The else if statement can evaluate multiple possibe outcomes or options with different block of code in a single decision-making structure.&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;cgpa&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;4.5&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;cgpa&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mf"&gt;4.5&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;First Class&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cgpa&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mf"&gt;3.5&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Second Class Upper&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cgpa&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mf"&gt;2.4&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Second Class Lower&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cgpa&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mf"&gt;1.5&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Third Class&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&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;pass&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// output: First class&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;we can have so many else if statemets as necessary but then in the case of many else if statement, the switch statement can be preferred for readability, understandability, and clarity in the looks of code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Switch Statement&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;firstClassCgpa&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;4.5&lt;/span&gt; 

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;cgpaClassification&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cgpa&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="k"&gt;switch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="nx"&gt;cgpa&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mf"&gt;4.5&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;congratulations you have archived a first class&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="nx"&gt;cgpa&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mf"&gt;3.5&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;well done you have archived a second class upper&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="nx"&gt;cgpa&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mf"&gt;2.4&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;second class lower&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;case&lt;/span&gt;  &lt;span class="nx"&gt;cgpa&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mf"&gt;1.5&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;Third Class&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nl"&gt;default&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;pass&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;cgpaClassification&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;firstClassCgpa&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;// output: congratulations you have archived a first class&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The case keyword is where the expression will be defined regarding the block of code to be executed, The break keyword in the switch statement indicates that javascript should stop the execution inside the switch block when the match case is valid, if there is no break keyword the execution will continue to the next case or default. The default shows that if it does not match any of the expression, the particular code define under the default should execute.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conditional (Ternary) operator&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This actually operate in the same way as if else statement in a simpler version just that it is written in another way or shorter form. it involve a questions mark "?" which indicate that it is true and a semi-colon ":" for false. it reduce the amount of code and make the code more readable to comprehend when dealing with simple conditions.&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;samuelAge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;18&lt;/span&gt; 
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;eligibility&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;samuelAge&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt;&lt;span class="mi"&gt;18&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;you are eligible to vote&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;you are not eligible to vote&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;

&lt;span class="c1"&gt;//output: you are eligible to vote&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Inconclusion, conditional statement is well used in javascript to determine output of our programs based on certain conditions, and it is found in most programming language. however knowing how to use if statement, if else statement, else if statement, switch statement, and ternary operator will determine our programming output and it will go a long way.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>coding</category>
    </item>
    <item>
      <title>Understanding Javascript Variables Declaration: The Significant of Var, Let, Const, In Modern Development.</title>
      <dc:creator>Peter Akojede</dc:creator>
      <pubDate>Sun, 02 Jun 2024 14:45:32 +0000</pubDate>
      <link>https://dev.to/peter_akojede/understanding-javascript-variables-declaration-the-significant-of-var-let-const-in-modern-development-19aa</link>
      <guid>https://dev.to/peter_akojede/understanding-javascript-variables-declaration-the-significant-of-var-let-const-in-modern-development-19aa</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxfwr53rpo4yp6qf5jadm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxfwr53rpo4yp6qf5jadm.png" alt="explanation of Const,Let,Var in Javascript for declaration of variable." width="708" height="393"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Variable is a unique identifier of words or letter put together to store data in your programs. Variable are always declare before use (using let and const), they are the container for storing values and are also use to make reference to functions. Unique name should be given to variables base on what you are working on, for easy identification and making the codebase easy to understand by other or fellow programmers.&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;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;Hello world!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;countries&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Usa&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;United Kingdom&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;Canada&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Apple&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Pine Apple&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Banana&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;Here!!! message, countries, and fruits are variables. They are sensitive and case sensitive during usage and you can't use Javascript keywords to declara a variables like if, else, for, switch, try, catch. e.t.c. They are reserve words in Javascript and use for their specific purpose. A variable without a value is an undefined varaible.&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;message&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;countries&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here!!! message, countries, and fruits are undefined because value have not been assign to them and they hold no meaningful data, but the variables have been initialized and they are undefined.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Javascript Naming Convention When Declaring Variables&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt;  &lt;span class="c1"&gt;// lowercase&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;FRUITS&lt;/span&gt; &lt;span class="c1"&gt;// uppercase&lt;/span&gt;
&lt;span class="c1"&gt;//combining 2 words&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;FruitJuice&lt;/span&gt; &lt;span class="c1"&gt;// pascal case&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruitJuice&lt;/span&gt; &lt;span class="c1"&gt;// camel case&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruit_juice&lt;/span&gt; &lt;span class="c1"&gt;// snake case&lt;/span&gt;

&lt;span class="c1"&gt;// observe the variable naming convention&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;however, the camelCase, "lower case" and the snake_case is commonly used and accepted for naming variables and functions in Javascript.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Understanding Different Types of Scope In Javascript For Variable Declaration.&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Global Scop: The variable can be declared anywhere and can be 
accesible from anywhere. They are often declared oustside of the 
function or block "{}"&lt;/li&gt;
&lt;li&gt;Function Scope: variable declared with in the function can be 
accessible with in the function.&lt;/li&gt;
&lt;li&gt;Block Scope: variable declare with in the block can be accessible 
with in the block e.g loops, if else statement curly braces "{}".
&lt;/li&gt;
&lt;/ol&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;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;john doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;  &lt;span class="c1"&gt;// global scope&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="c1"&gt;// block scoped&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;name&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="c1"&gt;// function scoped&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nf"&gt;name &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="c1"&gt;// function scoped&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;Javascript Best Practices For Modern Development Using Var, Let, and Const,&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;VAR&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Var method of declaring variables in Javascript was used from year 1995 to 2015 and sometimes use now, can also be found in some legacy code base, it was use for old browser and it has drawbacks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Feature of Var&lt;/strong&gt;&lt;br&gt;
when declaring variable using Var it can be used before it is declared in the code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="c1"&gt;// declaration is hoisted &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;number&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// outputs undefined instead of error&lt;/span&gt;
&lt;span class="nx"&gt;number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// &lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;//output 8&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;variable declared with var are not limited to the block in which they are defined, they can be used outside of the block in which they are defined. However, this can lead to unintentional variable leaks and conflicts&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="c1"&gt;// block scope&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="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;number&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// outputs 30  //outside of the block scope&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;in response to these problems, particularly the lack of block scope, ECMA script 6 (ES6) added let and const as improved variable scoping techniques for more understandable and predictable code. let and const are typically preferred over var(function scope) in contemporary javascript and let and const provided block scope.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;LET&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let is a keyword that is use in javascript, it declare a block scope when use the variable must be declared before use (No hoisting). Let works well with loops, functions, if else ststaement, and curly braces "{}". when using let you can't re-declared same variable name once the initial variable name has been declared in the same scope.&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;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;john doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;musa doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// SyntaxError: Identifier 'name' has already been declared&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will throw an error because name has already been declared, but it is possible in var and it will take up the new value. however, you can re-declared variable with the same name in deifferent scope "not in the same scope".&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;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;john doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// global scope&lt;/span&gt;
&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="c1"&gt;// block scope&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;musa doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// musa doe&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="c1"&gt;// global scope&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;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// john doe&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Furthermore, variable declared with let can be re-assiged with in the same scope it was declared, you can change its value as long you are in the sme scope, You can also access the variable with in the block that they are defined.&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;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;john doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// global scope&lt;/span&gt;
&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="c1"&gt;// block scope&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;musa doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;jane doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// jane doe&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="c1"&gt;// global scope&lt;/span&gt;
&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mary doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// mary doe&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;CONST&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;when you declare a variable in javascript using const you can't re-declare that variable again, const declaration of variable is only declared once with in the same scope but same variable name can be re-declared in different scope.&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;fruit&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mangoe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fruit&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// SyntaxError: Identifier 'fruit' has already been declared&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;when a variable is assign using const, you can't re-assign that variable to a new value again after the initial assignment.&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;gender&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;male&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="nx"&gt;gender&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;female&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// uncaught syntax error&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is possible using let but it is not possible using const. const declaration of variable is constant. However you can modify the content of an object or an array.&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;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Apple&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mangoe&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;banana&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="nx"&gt;fruits&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="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;water melon&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// you can change the element&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;fruits&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="c1"&gt;// water melon&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Apple&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mangoe&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;banana&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
 &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Apple&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mangoe&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;water melon&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="c1"&gt;// uncaught syntax error&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will throw an error because you can't re-assign  variable in the same scope, but you can change an element / manipulate an element in the array using the variable name. This also apply to an object using const.&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;classGroup&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="na"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;apple&lt;/span&gt;&lt;span class="dl"&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="s2"&gt;john 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;phone&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;iphone&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="na"&gt;country&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;canada&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="nx"&gt;classGroup&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;phone&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;samsung&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;classGroup&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;phone&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// samsung&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;when declaring a variable and you know that the value of the variable will not changed use const, especially for an array, object and funtion.&lt;/p&gt;

&lt;p&gt;Re- assignement: var ✓, let ✓, const ✗.&lt;br&gt;
Re-declaration: var ✓, let ✗,  const ✗.&lt;br&gt;
Function-scope: var ✓, let ✓, const ✓.&lt;br&gt;
Block-sope: var ✗, let ✓, const ✓.&lt;br&gt;
Hoisting: var ✓, let ✗, const ✗.&lt;br&gt;
Global-scope: var ✓, let ✗, const ✗.&lt;br&gt;
Global object property.[window]: var ✓, let ✗, const ✗.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>react</category>
      <category>frontend</category>
    </item>
  </channel>
</rss>
