20 Core JavaScript Concepts That Will Instantly Make You a More Confident Developer

💡 20 Core JavaScript Concepts Every Dev Should Know

You can copy-paste code all day…
But if you want to build confidently, you need to truly understand JavaScript.

Here are 20 concepts that will give you that edge with real examples.

---

1. 🔄 Variable Scopes (var, let, const)

- `var` is function-scoped.
- `let` and `const` are block-scoped.

Example:

```js
if (true) {
  var a = 1;
  let b = 2;
}
console.log(a); // 1
console.log(b); // Error

---

2. 🎯 The "this" Keyword

Depends on how a function is called not where it’s defined.

Example:

const user = {
  name: "Ali",
  greet() {
    console.log(this.name);
  }
}
user.greet(); // "Ali"

---

3. 🧠 Closures

A function remembers variables from the scope it was created in.

function outer() {
  let counter = 0;
  return function inner() {
    counter++;
    return counter;
  };
}
const inc = outer();
console.log(inc()); // 1
console.log(inc()); // 2

---

4. 🏗️ Hoisting

Variables and functions are "hoisted" to the top of their scope.

console.log(a); // undefined
var a = 5;

sayHi(); // works
function sayHi() {
  console.log("Hello");
}

---

5. 🕳️ Falsy vs Truthy

Falsy values: false, 0, "", null, undefined, NaN

Everything else is truthy.

if ("0") console.log("Truthy"); // runs
if (0) console.log("Falsy");   // doesn't run

---

6. 🔁 Loops and Array Methods

Master these:

• for, for...of, forEach()
• map(), filter(), reduce()

[1,2,3].map(n => n * 2); // [2,4,6]

---

7. 🧩 Destructuring

Extract values from arrays/objects in one line.

const [a, b] = [1, 2];
const { name } = { name: "Sara", age: 30 };

---

8. 📦 Spread & Rest Operators

Spread = expand, Rest = collect

const arr = [1, 2, 3];
const copy = [...arr]; // spread

function sum(...nums) { // rest
  return nums.reduce((a, b) => a + b, 0);
}

---

9. 🔃 Promises

Handle async operations cleanly.

fetch('/api').then(res => res.json()).then(data => console.log(data));

---

10. ⏱️ async / await

Cleaner syntax for promises.

async function getData() {
  const res = await fetch('/api');
  const data = await res.json();
}

---

11. 🌊 The Event Loop

JS is single-threaded. The event loop handles async callbacks.

console.log("1");
setTimeout(() => console.log("2"), 0);
console.log("3"); // output: 1, 3, 2

---

12. 📚 Data Types

Primitive: string, number, boolean, null, undefined, symbol, bigint
Reference: object, array, function

---

13. 🔍 typeof vs instanceof

typeof checks primitive types.
instanceof checks object instances.

typeof "hello" // "string"
[] instanceof Array // true

---

14. 🧪 == vs ===

• == does type coercion
• === checks type + value (use this)

"5" == 5   // true
"5" === 5  // false

---

15. 🧱 IIFE (Immediately Invoked Function Expression)

Runs a function as soon as it’s defined.

(function() {
  console.log("I run immediately!");
})();

---

16. 🧵 Callback Hell

Too many nested callbacks → messy code.

Fix with:

• Promises
• async/await
• abstraction

---

17. 🔧 Object Methods: keys(), values(), entries()

const obj = { a: 1, b: 2 };
Object.keys(obj); // ['a', 'b']
Object.values(obj); // [1, 2]
Object.entries(obj); // [['a',1], ['b',2]]

---

18. 📏 Array.isArray() vs typeof

typeof [] === "object" → not helpful

Use:

Array.isArray([]); // true

---

19. 📛 Error Handling: try...catch

try {
  throw new Error("Something broke");
} catch (e) {
  console.log(e.message);
}

---

20. 🧠 Pure Functions

Functions with:

• No side effects
• Same input → same output

This makes your code more testable and maintainable.

function add(a, b) {
  return a + b;
}

---

🎯 Final Tip

You don’t need to master the entire language to be confident.
Just understand these 20 core concepts and practice using them.

💬 Want flashcards, cheatsheets, or exercises for these topics? Check the blog:
https://mostefa-boudjema.vercel.app/blog