DEV Community

Samaresh Das
Samaresh Das

Posted on

JS concepts I understood only after building real things

#webdev #freelancer #programming #javascript

The tutorials never told you the real story about these JavaScript concepts.

We've all been there, right? You've read the docs, watched countless videos, and felt like you got a JavaScript concept. Then, you try to apply it to a real-world project, and suddenly, it's like learning it for the first time all over again. That's been my journey as a freelancer building websites, and these are the JS concepts that really clicked only after getting my hands dirty with actual client work.

this Keyword: The Elusive Chameleon

The this keyword is probably the biggest culprit. In tutorials, it often seems straightforward, tied neatly to the object it's called upon. But in the wild, this is a shape-shifter. Its value depends entirely on how a function is invoked. Strict mode, arrow functions, bind, call, apply – these all change its behavior in ways that will make your head spin until you've debugged a few messy callbacks or event handlers.

// Tutorial version: "See? it's the object!"
const obj = {
  name: "MyObject",
  greet: function() {
    console.log(`Hello from ${this.name}`);
  }
};
obj.greet(); // "Hello from MyObject"

// Real-world chaos:
function Person(name) {
  this.name = name;
  this.sayHi = function() {
    setTimeout(function() {
      // 'this' here is often window or undefined in strict mode!
      console.log(`Hi, I'm ${this.name}`);
    }, 100);
  };
}
const person = new Person("Sam");
person.sayHi(); // Might not work as expected!
Enter fullscreen mode Exit fullscreen mode

Asynchronous JavaScript: Beyond async/await Syntax

Sure, async/await makes asynchronous code look synchronous, which is a huge win. But understanding what's happening under the hood with the event loop, the microtask queue, and the macrotask queue is crucial for performance optimization and preventing dreaded race conditions. It’s not just about writing clean code; it's about writing predictable code.

Think about handling multiple API requests where the order matters, or dealing with user input that triggers background operations. Without a grasp of the event loop, debugging those situations feels like trying to catch smoke.

Closures: More Than Just Scope Holding

Closures are often explained as functions remembering their parent scope. That's technically true, but the real power and utility become apparent when you build things like:

  • Data encapsulation: Creating private variables that can't be directly accessed or modified from outside.
  • Currying and partial application: Creating specialized versions of functions.
  • Event handlers that maintain state: Imagine clicking a button multiple times and having it remember how many times it's been clicked without needing a global variable. 
function createCounter() {
  let count = 0; // This variable is "closed over" by the returned function
  return function() {
    count++;
    console.log(count);
  };
}

const counter1 = createCounter();
counter1(); // 1
counter1(); // 2

const counter2 = createCounter();
counter2(); // 1 (independent count)
Enter fullscreen mode Exit fullscreen mode

Building real features, whether for a small business website or a complex web application, forces you to confront these concepts not as academic exercises, but as fundamental tools for problem-solving. If you’re looking for someone to help bring your web projects to life, you can check out what I do at https://hire-sam.vercel.app/.

The takeaway? Don't just learn the syntax; understand the behavior and the implications in a live application. That's where true mastery lies.

Follow for more dev content.

javascript #webdevelopment #programming #freelancer

Top comments (0)