<h1>Learn JavaScript Fundamentals &#8211; A Beginner&#8217;s Guide</h1>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-1520" src="https://api.frontendlead.com/wp-content/uploads/2024/04/FrontendLead-22.png" alt="Javascript fundamentals Guide for frontend interviews" width="1920" height="1080" srcset="https://api.frontendlead.com/wp-content/uploads/2024/04/FrontendLead-22.png 1920w, https://api.frontendlead.com/wp-content/uploads/2024/04/FrontendLead-22-300x169.png 300w, https://api.frontendlead.com/wp-content/uploads/2024/04/FrontendLead-22-1024x576.png 1024w, https://api.frontendlead.com/wp-content/uploads/2024/04/FrontendLead-22-768x432.png 768w, https://api.frontendlead.com/wp-content/uploads/2024/04/FrontendLead-22-1536x864.png 1536w" sizes="(max-width: 1920px) 100vw, 1920px" /></p>
<p>JavaScript is the language that brings your website to life. If HTML is the structure and CSS is the style, JavaScript is the behavior. It enables you to respond to user actions, update the UI, fetch data from APIs, and perform additional tasks.</p>
<p>Whether you&#8217;re aiming to become a frontend engineer or want to build interactive web pages, learning JavaScript is a must. Let&#8217;s start from the very beginning and walk through all the core fundamentals you need to know.</p>
<p>This article will be divided into three main parts for simplicity:</p>
<ol>
<li>Javascript Fundamentals</li>
<li>Objects and Data Types</li>
<li>Promises / Async / Awaits</li>
</ol>
<p>Before we begin, I want to mention that this fundamental guide may seem a bit overwhelming, however, the goal here isn&#8217;t to memorize and rehearse all of these topics, but instead, use them in practical web applications, and naturally, you will recognize patterns, and where and when to apply certain things.</p>
<p>With that out of the way, let&#8217;s begin.</p>
<hr />
<h2>Javascript Fundamentals</h2>
<h3>Hello World in JavaScript</h3>
<p>The simplest way to run JavaScript is inside a browser using the <code>&lt;script&gt;</code> tag.</p>
<pre><code>&lt;script&gt;
  alert("Hello, world!");
&lt;/script&gt;</code></pre>
<p>This will show a pop-up message when the page loads.</p>
<h3>Basic Code Structure</h3>
<p>JavaScript code is composed of statements that end with semicolons. You don’t always need semicolons, but it’s good practice to use them.</p>
<pre><code>let message = "Welcome!";
alert(message);</code></pre>
<h3>Variables</h3>
<p>You can store values using. <code>let</code>, <code>const</code>, or <code>var</code> (which is older and now rarely used).</p>
<pre><code>let name = "Sarah";
const age = 28;</code></pre>
<p>Use <code>let</code> If the value changes, <code>const</code> If it won’t.</p>
<h3>Data Types</h3>
<p>Common data types in JavaScript:</p>
<ul>
<li>String: <code>"Hello"</code></li>
<li>Number: <code>42</code>, <code>3.14</code></li>
<li>Boolean: <code>true</code>, <code>false</code></li>
<li>Null: intentional absence of value</li>
<li>Undefined: declared but not assigned</li>
<li>Object: complex data structures</li>
<li>Array: list of values</li>
</ul>
<h3>Interaction: alert, prompt, and confirm</h3>
<pre><code>alert("This is an alert!");
prompt("What is your name?");
confirm("Are you sure?");</code></pre>
<p><code>alert</code> shows a message. <code>prompt</code> Asks for input. <code>confirm</code> asks for yes/no and returns <code>true</code> or <code>false</code>.</p>
<h3>Type Conversions</h3>
<p>JavaScript is loosely typed. It automatically converts types, but you can also do it manually.</p>
<pre><code>Number("42"); // 42
String(123);  // "123"
Boolean(0);   // false</code></pre>
<h3>Basic Math Operators</h3>
<pre><code>let sum = 10 + 5;
let difference = 10 - 3;
let product = 4 * 2;
let quotient = 20 / 5;
let remainder = 10 % 3;</code></pre>
<p>You can also use <code>++</code> and <code>--</code> to increment or decrement a value.</p>
<h3>Comparison Operators</h3>
<pre><code>5 &gt; 3     // true
10 &lt;= 10  // true
"5" == 5  // true (loose equality)
"5" === 5 // false (strict equality)</code></pre>
<p>Use <code>===</code> to avoid unexpected type conversions.</p>
<h3>Conditional Branching: if and ?</h3>
<pre><code>let age = 20;

if (age &gt;= 18) {
  alert("You can enter.");
} else {
  alert("Too young.");
}

// Ternary version
let message = age &gt;= 18 ? "Allowed" : "Denied";</code></pre>
<h3>Logical Operators</h3>
<p>Logical operators are used to combine multiple boolean expressions.</p>
<pre><code>let isLoggedIn = true;
let isAdmin = false;

if (isLoggedIn &amp;&amp; isAdmin) {
  alert("Welcome, admin");
} else {
  alert("Access denied");
}</code></pre>
<h3>Nullish Coalescing Operator</h3>
<p>The nullish operator <code>??</code> returns the right-hand value only if the left-hand value is <code>null</code> or <code>undefined</code>.</p>
<pre><code>let nickname = null;
let displayName = nickname ?? "Guest";

alert(displayName); // "Guest"</code></pre>
<h3>While Loop</h3>
<p>A <code>while</code> loop repeats as long as the condition is true.</p>
<pre><code>let i = 0;
while (i &lt; 3) {
  console.log(i);
  i++;
}</code></pre>
<h3>For Loop</h3>
<p>A <code>for</code> loop is great for running a block of code a specific number of times.</p>
<pre><code>for (let i = 0; i &lt; 3; i++) {
  console.log("Step " + i);
}</code></pre>
<h3>Switch Statement</h3>
<p>A <code>switch</code> is a clean way to handle multiple possible values of a single variable.</p>
<pre><code>let color = "blue";

switch (color) {
  case "red":
    console.log("Color is red");
    break;
  case "blue":
    console.log("Color is blue");
    break;
  default:
    console.log("Color not recognized");
}</code></pre>
<h3>Functions</h3>
<p>A function lets you group code together so you can reuse it.</p>
<pre><code>function sayHi(name) {
  alert("Hi, " + name);
}

sayHi("Alex");</code></pre>
<h3>Function Expressions</h3>
<p>You can also assign a function to a variable.</p>
<pre><code>const sayBye = function(name) {
  alert("Goodbye, " + name);
};

sayBye("Alex");</code></pre>
<h3>Arrow Functions</h3>
<p>Arrow functions are a shorter way to write function expressions, often used for quick tasks.</p>
<pre><code>const sayThanks = (name) =&gt; {
  alert("Thanks, " + name);
};

sayThanks("Alex");</code></pre>
<h3>Putting It All Together</h3>
<pre><code>function greetUser(name) {
  if (!name) {
    name = prompt("What's your name?") ?? "Guest";
  }

  const welcomeMessage = (name === "Admin")
    ? "Welcome back, Admin"
    : "Welcome, " + name;

  alert(welcomeMessage);
}

for (let i = 0; i &lt; 2; i++) {
  greetUser();
}</code></pre>
<p>This example prompts the user for their name (if not provided), uses the nullish operator to default to &#8220;Guest&#8221;, checks if the user is &#8220;Admin&#8221; using a ternary operator, and then runs the greeting twice using a for loop. It brings together variables, conditionals, prompts, functions, nullish, ternary, and loops — all in one place.</p>
<p>This covers the absolute basics you need to get started. Next, we’ll dig into how to write better quality code and work with objects, arrays, and more.</p>
<hr />
<h2>Objects and Data Types</h2>
<h3>Objects</h3>
<p>Objects are used to group related data and functionality together.</p>
<pre><code>let user = {
  name: "Alice",
  age: 30,
  greet: function() {
    alert("Hi, I'm " + this.name);
  }
};

user.greet();</code></pre>
<h3>Object References and Copying</h3>
<p>Objects are copied by reference, not by value.</p>
<pre><code>let person = { name: "Bob" };
let clone = person;

clone.name = "John";
console.log(person.name); // "John" — same object</code></pre>
<h3>Garbage Collection</h3>
<p>JavaScript automatically cleans up memory when objects are no longer reachable. You don’t have to manually manage memory.</p>
<h3>This in Methods</h3>
<p>Inside a method, <code>this</code> refers to the object that owns the method.</p>
<pre><code>let car = {
  brand: "Tesla",
  show: function() {
    alert(this.brand);
  }
};

car.show();</code></pre>
<h3>Constructor Function with new</h3>
<p>Use <code>new</code> with a constructor function to create multiple similar objects.</p>
<pre><code>function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user1 = new User("Sarah");
alert(user1.name);</code></pre>
<h3>Optional Chaining</h3>
<p>Use <code>?.</code> to safely access deeply nested properties.</p>
<pre><code>let user = {};
console.log(user.profile?.email); // undefined, no error</code></pre>
<h3>Symbols</h3>
<p><code>Symbol</code> is a unique identifier. Often used for hidden properties in objects.</p>
<pre><code>let id = Symbol("id");
let user = {
  [id]: 123
};

console.log(user[id]);</code></pre>
<h3>Methods of Primitives</h3>
<p>Primitive values like strings and numbers can use methods because JavaScript wraps them temporarily.</p>
<pre><code>let message = "hello";
console.log(message.toUpperCase()); // "HELLO"</code></pre>
<h3>Numbers</h3>
<p>JavaScript has one number type. It handles integers and floats.</p>
<pre><code>let num = 42;
let price = 19.99;</code></pre>
<h3>Strings</h3>
<pre><code>let str = "JavaScript";
console.log(str.length);       // 10
console.log(str.includes("Script")); // true</code></pre>
<h3>Arrays</h3>
<p>Arrays store ordered collections.</p>
<pre><code>let colors = ["red", "blue", "green"];
console.log(colors[1]); // "blue"</code></pre>
<h3>Common Array Methods</h3>
<pre><code>let numbers = [1, 2, 3, 4];

numbers.push(5);       // [1,2,3,4,5]
numbers.pop();         // [1,2,3,4]
numbers.map(x =&gt; x * 2); // [2,4,6,8]
numbers.filter(x =&gt; x % 2 === 0); // [2,4]</code></pre>
<h3>Iterables</h3>
<p>Arrays, strings, and some objects can be looped over using <code>for...of</code>.</p>
<pre><code>for (let char of "hello") {
  console.log(char);
}</code></pre>
<h3>Map and Set</h3>
<p><strong>Map</strong>: Like an object, but keys can be anything.</p>
<pre><code>let map = new Map();
map.set("name", "Alex");
console.log(map.get("name"));</code></pre>
<p><strong>Set</strong>: A collection of unique values.</p>
<pre><code>let set = new Set();
set.add(1);
set.add(1);
console.log(set.size); // 1</code></pre>
<h3>WeakMap and WeakSet</h3>
<p>These work like Map and Set, but the keys must be objects, and they don’t prevent garbage collection.</p>
<h3>Object.keys, Object.values, Object.entries</h3>
<pre><code>let user = { name: "Jane", age: 25 };

console.log(Object.keys(user));   // ["name", "age"]
console.log(Object.values(user)); // ["Jane", 25]
console.log(Object.entries(user)); // [["name", "Jane"], ["age", 25]]</code></pre>
<h3>Destructuring Assignment</h3>
<p>You can pull values out of objects or arrays easily.</p>
<pre><code>let user = { name: "Kyle", age: 22 };
let { name, age } = user;

let colors = ["red", "blue"];
let [first, second] = colors;</code></pre>
<h3>Date and Time</h3>
<pre><code>let now = new Date();
console.log(now.getFullYear());</code></pre>
<h3>JSON Methods</h3>
<p>Used to convert data to and from JSON format.</p>
<pre><code>let user = {
  name: "Mia",
  age: 30
};

let json = JSON.stringify(user); // Convert to JSON string
let parsed = JSON.parse(json);   // Convert back to object</code></pre>
<hr />
<h2>Fetching and Rendering Data From The Backend (Async Requests)</h2>
<p>&nbsp;</p>
<h3>Callbacks (Before Promises)</h3>
<p>Callbacks were the original way to handle asynchronous code in JavaScript.</p>
<pre><code>function loadData(callback) {
  setTimeout(() =&gt; {
    callback("Data loaded");
  }, 1000);
}

loadData((result) =&gt; {
  console.log(result);
});</code></pre>
<p>Callbacks work, but they quickly become messy and hard to manage — especially when you have nested operations.</p>
<h3>Introduction to Promises</h3>
<p>A promise is a built-in JavaScript object that represents a value that may be available now, later, or never.</p>
<pre><code>let promise = new Promise((resolve, reject) =&gt; {
  setTimeout(() =&gt; resolve("Success!"), 1000);
});

promise.then(result =&gt; console.log(result));</code></pre>
<h3>Promise Chaining</h3>
<p>You can chain multiple <code>.then()</code> calls together to handle a sequence of asynchronous operations.</p>
<pre><code>fetch("/api/user")
  .then(response =&gt; response.json())
  .then(user =&gt; {
    console.log("User loaded", user);
    return fetch(`/api/posts?user=${user.id}`);
  })
  .then(response =&gt; response.json())
  .then(posts =&gt; console.log("Posts loaded", posts));</code></pre>
<h3>Error Handling with Promises</h3>
<p>Use <code>.catch()</code> to handle any errors in the chain.</p>
<pre><code>fetch("/api/unknown")
  .then(res =&gt; res.json())
  .catch(err =&gt; console.error("Something went wrong", err));</code></pre>
<h3>Promise API</h3>
<p>JavaScript has a few powerful Promise utilities:</p>
<ul>
<li><code>Promise.all([ ... ])</code> – waits for all promises to finish</li>
<li><code>Promise.race([ ... ])</code> – resolves when the first promise resolves</li>
<li><code>Promise.allSettled([ ... ])</code> – waits for all to finish, regardless of success/failure</li>
</ul>
<h3>Promisification</h3>
<p>This means wrapping older callback-based functions in a promise for easier handling.</p>
<pre><code>function loadScript(src) {
  return new Promise((resolve, reject) =&gt; {
    let script = document.createElement("script");
    script.src = src;
    script.onload = () =&gt; resolve(script);
    script.onerror = () =&gt; reject(new Error("Script load failed"));
    document.head.append(script);
  });
}</code></pre>
<h3>Microtasks</h3>
<p>Promise callbacks are scheduled in the microtask queue, which runs after the current execution but before the next <code>setTimeout</code> or DOM event.</p>
<pre><code>Promise.resolve().then(() =&gt; console.log("Microtask"));

setTimeout(() =&gt; console.log("Macrotask"), 0);

// Output: Microtask, then Macrotask</code></pre>
<h3>Async and Await</h3>
<p><code>async</code> functions let you write promise-based code as if it were synchronous.</p>
<pre><code>async function loadUser() {
  try {
    let response = await fetch("/api/user");
    let user = await response.json();
    console.log(user);
  } catch (err) {
    console.error("Failed to load user", err);
  }
}</code></pre>
<h3>Full Example: Fetching and Rendering Data</h3>
<p>This example fetches data from a fake API and renders it on the page.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    body {
      font-family: Arial;
      padding: 20px;
    }
    .user {
      border: 1px solid #ddd;
      padding: 10px;
      margin-bottom: 10px;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

  &lt;h2&gt;Users List&lt;/h2&gt;
  &lt;div id="users"&gt;Loading...&lt;/div&gt;

  &lt;script&gt;
    async function fetchUsers() {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users");
        const users = await response.json();
        const container = document.getElementById("users");
        container.innerHTML = "";

        users.forEach(user =&gt; {
          const div = document.createElement("div");
          div.className = "user";
          div.innerHTML = `&lt;strong&gt;${user.name}&lt;/strong&gt; &lt;br /&gt; ${user.email}`;
          container.appendChild(div);
        });
      } catch (err) {
        document.getElementById("users").innerText = "Failed to load users.";
        console.error(err);
      }
    }

    fetchUsers();
  &lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>This app fetches a list of users from an example API and displays them using HTML, CSS, and JavaScript. It combines everything — fetch, async/await, DOM manipulation, and error handling — into one real-world use case.</p>
<hr />
<p>Still with me? Good, I know there is a lot to take in and cover here, but don&#8217;t feel overwhelmed. This will come more naturally as you build more apps.</p>
<p>Okay, I think you are ready for the fun stuff now. Let&#8217;s move on to the fundamentals of React.</p>
