JavaScript Concepts You Must Know

JavaScript is a wonderful programming language. It allows you to build almost anything, from websites to AI, yet it’s also notorious for its quirks. In this post, we'll break down 101 JavaScript concepts you should know, covering everything from fundamentals to advanced techniques.

Introduction

JavaScript was created in 1993 by Brendan Eich at Netscape. Initially designed to make websites interactive, it has evolved into one of the most powerful and widely used languages in the world. Today, it's the only language that natively runs in browsers aside from WebAssembly.

JavaScript Basics

Variables and Scope

JavaScript has multiple ways to define variables:

let name = "Ali";  // Can be reassigned
const age = 25;     // Cannot be reassigned
var country = "Pakistan"; // Avoid using var

Variables in JavaScript have different scopes:

• Global Scope: Accessible everywhere.
• Function Scope: Limited to the function it’s declared in.
• Block Scope: Available only within {} if declared using let or const.

Functions

Functions are a core part of JavaScript. They can be defined using function declarations, expressions, or arrow functions:

function greet() {
  return "Hello, World!";
}

const greetExpression = function() {
  return "Hello, World!";
};

const greetArrow = () => "Hello, World!";

Closures

Closures allow a function to remember variables from its outer scope:

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    return `${outerVariable} - ${innerVariable}`;
  };
}

const newFunction = outerFunction("Hello");
console.log(newFunction("World")); // Outputs: Hello - World

Objects & Prototypes

JavaScript uses prototypal inheritance rather than classical class-based inheritance.

const person = {
  name: "Ali",
  greet() {
    return `Hello, my name is ${this.name}`;
  }
};

Classes (ES6+)

Even though JavaScript supports class, it's syntactic sugar over prototypal inheritance:

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, I am ${this.name}`;
  }
}

const ali = new Person("Ali");
console.log(ali.greet());

The Event Loop & Asynchronous JavaScript

JavaScript is single-threaded but handles async operations using the event loop.

Callbacks, Promises & Async/Await

Callback Hell 😵

setTimeout(() => {
  console.log("Step 1");
  setTimeout(() => {
    console.log("Step 2");
    setTimeout(() => {
      console.log("Step 3");
    }, 1000);
  }, 1000);
}, 1000);

Promises ✨

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched!"), 2000);
  });
};

fetchData().then(console.log);

Async/Await 🚀

async function fetchData() {
  let data = await new Promise((resolve) => setTimeout(() => resolve("Data fetched!"), 2000));
  console.log(data);
}
fetchData();

JavaScript in the Browser

The DOM

const button = document.querySelector("#myButton");
button.addEventListener("click", () => alert("Button clicked!"));

Dynamic Imports

import("./module.js").then((module) => {
  module.someFunction();
});

Conclusion

Mastering JavaScript means understanding not just syntax but also its quirks and powerful features. Whether you're building web apps, mobile apps, or even servers, JavaScript is everywhere. Keep learning, keep coding, and have fun!