<?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: Golden Okeama </title>
    <description>The latest articles on DEV Community by Golden Okeama  (@goldenokeama).</description>
    <link>https://dev.to/goldenokeama</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%2F1909015%2F9406c317-0b91-430d-ad8b-894f5a001286.jpg</url>
      <title>DEV Community: Golden Okeama </title>
      <link>https://dev.to/goldenokeama</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/goldenokeama"/>
    <language>en</language>
    <item>
      <title>💻 Why I Want to Be a Front-End Developer and How HNG Will Help Me Achieve My Goals</title>
      <dc:creator>Golden Okeama </dc:creator>
      <pubDate>Fri, 31 Jan 2025 14:54:07 +0000</pubDate>
      <link>https://dev.to/goldenokeama/why-i-want-to-be-a-front-end-developer-and-how-hng-will-help-me-achieve-my-goals-n4l</link>
      <guid>https://dev.to/goldenokeama/why-i-want-to-be-a-front-end-developer-and-how-hng-will-help-me-achieve-my-goals-n4l</guid>
      <description>&lt;p&gt;Embarking on a career in &lt;strong&gt;&lt;em&gt;front-end development&lt;/em&gt;&lt;/strong&gt; has been an exciting journey driven by my curiosity about how websites are built and how they engage users. With an eye for design and a knack for problem-solving, I’ve found front-end development to be the perfect blend of creativity and technology. This post will explain my motivation for pursuing a career in this field and how the &lt;strong&gt;HNG internship&lt;/strong&gt; will serve as the ideal platform for honing my skills and reaching my professional goals.&lt;/p&gt;




&lt;h3&gt;
  
  
  My Motivation for Becoming a Front-End Developer
&lt;/h3&gt;

&lt;p&gt;The web is a powerful platform that connects people, businesses, and ideas. I've always been curious about how websites come to life, and this curiosity led me to explore front-end development. I love how it &lt;strong&gt;combines creativity and problem-solving&lt;/strong&gt;, allowing me to build engaging, interactive user experiences. &lt;strong&gt;Seeing instant results&lt;/strong&gt; from my code keeps me motivated to learn and grow.&lt;/p&gt;




&lt;h3&gt;
  
  
  How HNG Will Help Me Grow in the Field
&lt;/h3&gt;

&lt;p&gt;HNG is a fast-paced internship designed to prepare developers for real-world job opportunities. It focuses on hands-on learning, collaboration, and industry readiness. Through HNG, I will work on real projects, engage with experienced mentors, and develop problem-solving skills essential for front-end development.&lt;/p&gt;

&lt;p&gt;Unlike traditional learning paths, &lt;strong&gt;HNG simulates real job environments&lt;/strong&gt;, pushing learners beyond their comfort zones. The program emphasizes advanced concepts, ensuring participants become proficient in modern technologies like &lt;strong&gt;React.js&lt;/strong&gt; and &lt;strong&gt;Next.js&lt;/strong&gt;. By the end of the internship, I will have &lt;strong&gt;practical experience&lt;/strong&gt; and &lt;strong&gt;industry-relevant skills&lt;/strong&gt; that set me apart in the job market.&lt;/p&gt;




&lt;h3&gt;
  
  
  My Goals for the Internship and How I Plan to Achieve Them
&lt;/h3&gt;

&lt;h4&gt;
  
  
  1. Strengthen My Technical Skills
&lt;/h4&gt;

&lt;p&gt;I aim to improve my React.js, JavaScript, and Next.js expertise by working on challenging projects and learning from mentors.&lt;/p&gt;

&lt;h4&gt;
  
  
  2. Enhance My Collaboration Skills
&lt;/h4&gt;

&lt;p&gt;Teamwork is essential in development. I will participate in &lt;strong&gt;peer programming&lt;/strong&gt;, contribute to discussions, and provide constructive feedback.&lt;/p&gt;

&lt;h4&gt;
  
  
  3. Increase My Industry Exposure
&lt;/h4&gt;

&lt;p&gt;By completing the internship, I will be in a better position to showcase my skills to potential employers. Companies looking for &lt;strong&gt;skilled developers&lt;/strong&gt; can &lt;em&gt;&lt;a href="https://hng.tech/hire/reactjs-developers" rel="noopener noreferrer"&gt;hire React.js developers&lt;/a&gt;&lt;/em&gt; from HNG, which increases the chances of connecting with job opportunities.&lt;/p&gt;




&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Becoming a front-end developer is about continuous learning and problem-solving. HNG provides the perfect platform to refine my skills and gain &lt;strong&gt;real-world experience&lt;/strong&gt;. With dedication, I am confident this internship will set me on the right path to a successful career in front-end development.&lt;/p&gt;




&lt;h3&gt;
  
  
  About Me
&lt;/h3&gt;

&lt;p&gt;Hi, I'm &lt;strong&gt;Golden Okeama&lt;/strong&gt;, a budding &lt;strong&gt;&lt;em&gt;front-end developer&lt;/em&gt;&lt;/strong&gt; passionate about JavaScript, React, and exploring the world of modern web development. As I continue learning, I love sharing insights and breaking down concepts to help other beginners along the way. Join me on my journey as I grow and build awesome projects!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>🚀 Understanding let and const: Why They Replaced var in JavaScript</title>
      <dc:creator>Golden Okeama </dc:creator>
      <pubDate>Fri, 31 Jan 2025 12:38:55 +0000</pubDate>
      <link>https://dev.to/goldenokeama/understanding-let-and-const-why-they-replaced-var-in-javascript-5c2f</link>
      <guid>https://dev.to/goldenokeama/understanding-let-and-const-why-they-replaced-var-in-javascript-5c2f</guid>
      <description>&lt;p&gt;When JavaScript was first created, developers relied on &lt;code&gt;var&lt;/code&gt; to declare variables. While functional, &lt;code&gt;var&lt;/code&gt; had limitations that often led to bugs and confusion. With the introduction of ES6, &lt;strong&gt;&lt;code&gt;let&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;const&lt;/code&gt;&lt;/strong&gt; replaced &lt;code&gt;var&lt;/code&gt; as the preferred way to declare variables. Here's why.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Problem with &lt;code&gt;var&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;var&lt;/code&gt; keyword comes with two major issues:&lt;/p&gt;

&lt;p&gt;1) &lt;strong&gt;Function Scope vs. Block Scope:&lt;/strong&gt; Variables declared with &lt;code&gt;var&lt;/code&gt; are scoped to the nearest function, not the nearest block (e.g inside an &lt;code&gt;if&lt;/code&gt; or &lt;code&gt;for&lt;/code&gt; statement). This can lead to unexpected behavior.&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="kd"&gt;var&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&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;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: "John"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Even though the &lt;code&gt;name&lt;/code&gt; variable is declared inside the &lt;code&gt;if&lt;/code&gt; block, it is accessible outside the block because &lt;code&gt;var&lt;/code&gt; does not support block scope.&lt;/p&gt;

&lt;p&gt;2) &lt;strong&gt;Hoisting:&lt;/strong&gt; is a behavior where variable and function declarations are moved to the top of their scope. However, variables declared with &lt;code&gt;var&lt;/code&gt; are initialized as &lt;code&gt;undefined&lt;/code&gt;, while &lt;code&gt;let&lt;/code&gt; and &lt;code&gt;const&lt;/code&gt; remain in a 'temporal dead zone' until their declaration is encountered. This can cause confusion:&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="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: undefined&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;age&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The declaration is moved to the top, but the assignment happens later.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Solution: &lt;code&gt;let&lt;/code&gt; and &lt;code&gt;const&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;ES6 (ECMAScript 2015) introduced &lt;code&gt;let&lt;/code&gt; and &lt;code&gt;const&lt;/code&gt; to address these issues.&lt;/p&gt;

&lt;p&gt;1) &lt;strong&gt;Block Scope&lt;/strong&gt;&lt;br&gt;
Both &lt;code&gt;let&lt;/code&gt; and &lt;code&gt;const&lt;/code&gt; are block-scoped, meaning they are only accessible within the block where they are declared:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="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="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&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;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: "John"&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;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Error: name is not defined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This behavior prevents unintended variable access outside their intended scope.&lt;/p&gt;

&lt;p&gt;2) &lt;strong&gt;No Hoisting Confusion&lt;/strong&gt;&lt;br&gt;
While &lt;code&gt;let&lt;/code&gt; and &lt;code&gt;const&lt;/code&gt; are technically hoisted, they remain in a "temporal dead zone" until the declaration is encountered:&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="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Error: Cannot access 'age' before initialization&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;age&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This ensures variables cannot be accessed before they are declared, reducing bugs.&lt;/p&gt;

&lt;p&gt;3) &lt;strong&gt;&lt;code&gt;const&lt;/code&gt; for Constants&lt;/strong&gt;&lt;br&gt;
Use &lt;code&gt;const&lt;/code&gt; for values that should not be reassigned:&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;PI&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;3.14&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;PI&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;4.15&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Error: Assignment to constant variable.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note: While &lt;code&gt;const&lt;/code&gt; prevents reassignment, it does not make objects immutable. You can still modify object properties.&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;person&lt;/span&gt; &lt;span class="o"&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&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Peter&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 works fine&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;person&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output {name: "Peter"}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  When to Use &lt;code&gt;let&lt;/code&gt; vs. &lt;code&gt;const&lt;/code&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Use &lt;code&gt;const&lt;/code&gt; by default. It signals that a variable should not change, making your code easier to understand.&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;let&lt;/code&gt; only when you know the value will change.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Bob&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// This will never change&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// This can be updated later &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






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

&lt;p&gt;Switching from &lt;code&gt;var&lt;/code&gt; to &lt;code&gt;let&lt;/code&gt; and &lt;code&gt;const&lt;/code&gt; helps you write cleaner, more predictable code. These new keywords eliminate common pitfalls and align with modern JavaScript best practices. Start using them today to level up your JavaScript skills.&lt;/p&gt;




&lt;h3&gt;
  
  
  About Me
&lt;/h3&gt;

&lt;p&gt;Hi! I'm &lt;strong&gt;Golden Okeama&lt;/strong&gt;, a budding &lt;em&gt;frontend developer&lt;/em&gt; passionate about JavaScript, React, and exploring the world of modern web development. As I learn, I enjoy sharing insights and breaking down concepts to help other beginners. Follow me on my journey as I continue to grow and build awesome projects!&lt;/p&gt;

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