{"id":564,"date":"2025-07-28T14:16:02","date_gmt":"2025-07-28T14:16:02","guid":{"rendered":"https:\/\/cms.aptiw.com\/?p=564"},"modified":"2025-07-28T14:28:32","modified_gmt":"2025-07-28T14:28:32","slug":"10-javascript-mistakes-beginners-still-make-and-how-to-avoid-them","status":"publish","type":"post","link":"https:\/\/cms.aptiw.com\/index.php\/2025\/07\/28\/10-javascript-mistakes-beginners-still-make-and-how-to-avoid-them\/","title":{"rendered":"10 JavaScript Mistakes Beginners Still Make (and How to Avoid Them)"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/cms.aptiw.com\/wp-content\/uploads\/2025\/07\/10-JavaScript-Mistakes-Beginners-Still-Make-and-How-to-Avoid-Them-1024x538.jpg\" alt=\"\" class=\"wp-image-565\" srcset=\"https:\/\/cms.aptiw.com\/wp-content\/uploads\/2025\/07\/10-JavaScript-Mistakes-Beginners-Still-Make-and-How-to-Avoid-Them-1024x538.jpg 1024w, https:\/\/cms.aptiw.com\/wp-content\/uploads\/2025\/07\/10-JavaScript-Mistakes-Beginners-Still-Make-and-How-to-Avoid-Them-300x158.jpg 300w, https:\/\/cms.aptiw.com\/wp-content\/uploads\/2025\/07\/10-JavaScript-Mistakes-Beginners-Still-Make-and-How-to-Avoid-Them-768x403.jpg 768w, https:\/\/cms.aptiw.com\/wp-content\/uploads\/2025\/07\/10-JavaScript-Mistakes-Beginners-Still-Make-and-How-to-Avoid-Them.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>JavaScript is a powerful but quirky language. Even experienced developers occasionally stumble over its unexpected behaviors. If you&#8217;re just starting out, you might be making some of these common mistakes without even realizing it.<\/p>\n\n\n\n<p>Don\u2019t worry, we\u2019ve all been there! Here are&nbsp;<strong>10 JavaScript pitfalls<\/strong>&nbsp;beginners often face and how to avoid them before they sneak into your code.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Accidentally Creating Global Variables<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>function greet(){\n  name = 'Ruth' \/\/Opps!, we made a global variable\n  }<\/code><\/pre>\n\n\n\n<p><strong>Why it\u2019s a problem:<\/strong> If you forget to use <code>let<\/code>, <code>const<\/code>, or <code>var<\/code>, JavaScript assumes you meant to create a global variable. This can lead to bugs that are <em>very<\/em> hard to track down.<\/p>\n\n\n\n<p><strong>How to avoid it:<\/strong><\/p>\n\n\n\n<p>Always declare your variables. And consider using <code>'use strict';<\/code> at the top of your files to catch this early.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Overusing <\/strong><code><strong>==<\/strong><\/code><strong> Instead of <\/strong><code><strong>===<\/strong><\/code><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>0 == false; \/\/ true\n'' == 0;    \/\/ true<\/code><\/pre>\n\n\n\n<p><strong>Why it\u2019s a problem:<\/strong><\/p>\n\n\n\n<p><code>==<\/code> does type coercion. Sometimes that\u2019s handy, but often it\u2019s just confusing.<\/p>\n\n\n\n<p><strong>Better practice:<\/strong><\/p>\n\n\n\n<p>Use <code>===<\/code> and <code>!==<\/code> For strict comparisons, they don\u2019t convert types behind your back.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Using <\/strong><code><strong>parseInt()<\/strong><\/code><strong> Incorrectly<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>parseInt(\"08\"); \/\/ returns 8\nparseInt(\"08\", 8); \/\/ returns 0 ???<\/code><\/pre>\n\n\n\n<p><strong>What\u2019s going on?<\/strong><\/p>\n\n\n\n<p><code>parseInt<\/code> can interpret the string as octal if no radix is provided.<\/p>\n\n\n\n<p><strong>Safer way:<\/strong><\/p>\n\n\n\n<p>Always provide the second argument:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>parseInt(\"08\", 10); \/\/ 8<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ignoring Asynchronous Behavior<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(\"Start\");\nsetTimeout(() =&gt; console.log(\"Delayed\"), 0);\nconsole.log(\"End\");\n\/\/ Output: Start \u2192 End \u2192 Delayed<\/code><\/pre>\n\n\n\n<p>Beginners often expect&nbsp;<code>setTimeout<\/code>&nbsp;to run immediately.<\/p>\n\n\n\n<p><strong>Better practice: <\/strong>Understand the&nbsp;<strong>event loop<\/strong>. Use&nbsp;<code>async\/await<\/code>&nbsp;or&nbsp;<code>.then()<\/code>&nbsp;for predictable async flow.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ignoring Error Handling in Async Code<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const data = await fetchData(); \/\/ what if this fails?<\/code><\/pre>\n\n\n\n<p><strong>Beginners skip try\/catch blocks.<\/strong><\/p>\n\n\n\n<p>But async errors don\u2019t throw like synchronous ones; they silently fail if unhandled.<\/p>\n\n\n\n<p><strong>Do this:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>try {\n  const data = await fetchData();\n} catch (err) {\n  console.error(\"Something went wrong\", err);\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Reassigning Constants<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const user = { name: \"Alice\" }; \nuser = { name: \"Bob\" }; \/\/ \u274c Error<\/code><\/pre>\n\n\n\n<p><strong>But wait!<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  user.name = \"Bob\"; \/\/ \u2705 Works<\/code><\/pre>\n\n\n\n<p><strong>Why?<\/strong><\/p>\n\n\n\n<p><code>const<\/code> means the binding can\u2019t change, but the object it points to <em>can<\/em>.<\/p>\n\n\n\n<p><strong>Be aware:<\/strong><\/p>\n\n\n\n<p><code>const<\/code> keeps the variable from being reassigned, not the object from being mutated.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Thinking <\/strong><code><strong>this<\/strong><\/code><strong> Works the Same Everywhere<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const person = {\n  name: \"Jane\",\n  greet: function () {\n    console.log(`Hi, I\u2019m ${this.name}`);\n  },\n};\nconst greet = person.greet;\ngreet(); \/\/ Uh-oh: \"Hi, I\u2019m undefined\"<\/code><\/pre>\n\n\n\n<p><strong>What happened?<\/strong><\/p>\n\n\n\n<p>When you pull a method out of an object, <code>this<\/code> gets lost.<\/p>\n\n\n\n<p><strong>How to fix:<\/strong><\/p>\n\n\n\n<p>Use arrow functions if you&#8217;re inside classes or bind the function properly.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Expecting <\/strong><code><strong>forEach()<\/strong><\/code><strong> to Work With <\/strong><code><strong>async\/await<\/strong><\/code><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>arr.forEach(async (item) =&gt; {\n  await doSomething(item);\n  });<\/code><\/pre>\n\n\n\n<p><strong>Why it fails silently:<\/strong><\/p>\n\n\n\n<p><code>forEach<\/code> doesn\u2019t wait for <code>async<\/code> functions to finish. So your <code>await<\/code> may not behave as expected.<\/p>\n\n\n\n<p><strong>What to use instead:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>for (const item of arr) {\n  await doSomething(item);\n}<\/code><\/pre>\n\n\n\n<p>Or if you&#8217;re feeling fancy, use <code>Promise.all()<\/code> for parallel execution.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Forgetting That <\/strong><code><strong>null<\/strong><\/code><strong> and <\/strong><code><strong>undefined<\/strong><\/code><strong> Are Different<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let name = null; \nlet age; \nconsole.log(name); \/\/ null \nconsole.log(age); \/\/ undefined<\/code><\/pre>\n\n\n\n<p><strong>Beginners often assume they\u2019re the same.<\/strong><\/p>\n\n\n\n<p>But <code>null<\/code> is something you assign intentionally. <code>undefined<\/code> is what JavaScript assigns when something hasn\u2019t been defined yet.<\/p>\n\n\n\n<p><strong>Tip:<\/strong><\/p>\n\n\n\n<p>Use them deliberately. If you <em>mean<\/em> \u201cnothing,\u201d use <code>null<\/code>. If it\u2019s just not set yet, <code>undefined<\/code> is fine.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Forgetting&nbsp;<\/strong><code><strong>return<\/strong><\/code><strong>&nbsp;in Arrow Functions<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const add = (a, b) =&gt; { a + b }; \/\/ No return = undefined\nconsole.log(add(2, 3)); \/\/ undefined<\/code><\/pre>\n\n\n\n<p><strong>Do this<\/strong><\/p>\n\n\n\n<p>Either use implicit return (no braces):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const add = (a, b) =&gt; a + b;<\/code><\/pre>\n\n\n\n<p>Or explicitly&nbsp;<code>return<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const add = (a, b) =&gt; { return a + b; };<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Final Thoughts<\/h3>\n\n\n\n<p>Mistakes are part of learning. If you\u2019ve made (or are making) any of these, you\u2019re not alone. Every JavaScript dev has been there. The key is knowing what to look out for and building habits that keep your code predictable and bug-free.<\/p>\n\n\n\n<p>Even better? Bookmark this post and come back to it every few months, just to laugh at how far you\u2019ve come.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Even experienced developers occasionally stumble on JavaScript quirks. From accidental globals to misunderstood async behavior, here\u2019s how to spot and fix these common mistakes early.<\/p>\n","protected":false},"author":3,"featured_media":565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[15,11],"class_list":["post-564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-software-development","tag-tech-skills"],"_links":{"self":[{"href":"https:\/\/cms.aptiw.com\/index.php\/wp-json\/wp\/v2\/posts\/564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cms.aptiw.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cms.aptiw.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cms.aptiw.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/cms.aptiw.com\/index.php\/wp-json\/wp\/v2\/comments?post=564"}],"version-history":[{"count":4,"href":"https:\/\/cms.aptiw.com\/index.php\/wp-json\/wp\/v2\/posts\/564\/revisions"}],"predecessor-version":[{"id":570,"href":"https:\/\/cms.aptiw.com\/index.php\/wp-json\/wp\/v2\/posts\/564\/revisions\/570"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cms.aptiw.com\/index.php\/wp-json\/wp\/v2\/media\/565"}],"wp:attachment":[{"href":"https:\/\/cms.aptiw.com\/index.php\/wp-json\/wp\/v2\/media?parent=564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms.aptiw.com\/index.php\/wp-json\/wp\/v2\/categories?post=564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms.aptiw.com\/index.php\/wp-json\/wp\/v2\/tags?post=564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}