DEV Community: Tsedey Terefe

JavaScript Core Fundamentals: var, let, const, Scope, and Closures

Tsedey Terefe — Sun, 05 Oct 2025 08:14:50 +0000

Understanding how JavaScript handles variables is crucial for mastering the language. This post walks through the differences between var, let, and const, the concept of scope, variable mutability, and concludes with an exploration of closures.

1. var vs let vs const: What’s the Difference?

Global Scope Behavior

When declared outside of any function or block, all three var, let, and const are globally accessible. However, their behavior differs:

var: Function-scoped or globally scoped if declared outside any function. It is hoisted and initialized with undefined.
let: Block-scoped. It is hoisted but not initialized, leading to a "Temporal Dead Zone" (TDZ) until the declaration is encountered.
const: Block-scoped. Like let, it is hoisted but not initialized. Additionally, it must be assigned a value at the time of declaration and cannot be reassigned later.

2. Understanding Scope

Scope determines the accessibility of variables. JavaScript has three types of scope:

Global Scope: Variables declared outside any function or block.
Function Scope: Variables declared within a function.
Block Scope: Variables declared within a block (e.g., inside {}).

Global Scope Example:

let myPodcastName = "ExtendWomenInTech";

function getPodcastName() {
  console.log(myPodcastName); // ✅ "ExtendWomenInTech"
}

getPodcastName();
console.log(myPodcastName);   // ✅ "ExtendWomenInTech"

Function Scope Example:

function getPodcastName() {
  let myPodcastName = "ExtendWomenInTech";
  console.log(myPodcastName); // ✅ "ExtendWomenInTech"
}`

getPodcastName();
console.log(myPodcastName);   // ❌ ReferenceError: myPodcastName is not defined

Block Scope Example:

{
  let topic = "Learning Scope";
  console.log(topic); // ✅ "Learning Scope"
}

console.log(topic); // ❌ ReferenceError: topic is not defined

3. Assignment & Re-assignment

let and var allow both reassignment and mutation of variables.
const prevents reassignment of the variable itself but allows mutation of the value if it's an object.

let message = "Hello outside";

function showMessage() {
  let message = "Hello inside";
  console.log(message); // ✅ "Hello inside"

  message = "Hello changed inside";
  console.log(message); // ✅ "Hello changed inside"
}

showMessage();
console.log(message);   // ✅ "Hello outside"

Object Mutation with const:

const user = { name: "Alice" };

function updateUser() {
  user.name = "Tsedey"; // ✅ Mutating property
  return user.name;
}

console.log(updateUser()); // ✅ "Tsedey"
console.log(user);         // ✅ { name: "Tsedey" }

Attempting to reassign the entire object will result in an error:

// ❌ TypeError: Assignment to constant variable.
// user = { name: "Charlie" };

4. var vs let vs const in Re-assignment

var nameVar = "Alice";
let nameLet = "Bob";
const nameConst = "Carol";

function updateNames() {
  nameVar = "Updated by var";   // ✅ works
  nameLet = "Updated by let";   // ✅ works
  // nameConst = "Updated by const"; // ❌ TypeError
}

updateNames();

console.log(nameVar); // ✅ "Updated by var"
console.log(nameLet); // ✅ "Updated by let"
console.log(nameConst); // ✅ "Carol"

5. Scopes, Shadowing & Re-assignment

var globalVar = "I am global var";
let globalLet = "I am global let";

function scopeTest() {
  var funcVar = "I am func var";
  let funcLet = "I am func let";

  console.log(globalVar); // ✅ Accessible
  console.log(globalLet); // ✅ Accessible

  {
    var blockVar = "I am block var"; // function-scoped
    let blockLet = "I am block let"; // block-scoped

    console.log(funcVar); // ✅ Accessible
    console.log(funcLet); // ✅ Accessible
    console.log(blockVar); // ✅ Accessible
    console.log(blockLet); // ✅ Accessible

    blockLet = "Changed block let";
    console.log(blockLet); // ✅ "Changed block let"
  }

  console.log(blockVar); // ✅ Accessible
  // console.log(blockLet); // ❌ ReferenceError
}

scopeTest();

console.log(globalVar); // ✅ "I am global var"
console.log(globalLet); // ✅ "I am global let"

6. Hoisting: The Sneaky Part

Hoisting refers to JavaScript's behavior of moving declarations to the top of their containing scope during the compile phase.

console.log(a); // ✅ undefined
var a = 10;

console.log(b); // ❌ ReferenceError: Cannot access 'b' before initialization
let b = 20;

console.log(c); // ❌ ReferenceError: Cannot access 'c' before initialization
const c = 30;

var: Hoisted and initialized with undefined.
let and const: Hoisted but not initialized, leading to a Temporal Dead Zone (TDZ) until the declaration is encountered.

7.Closures: Functions with Memory

A closure is a function that "remembers" its lexical scope, even when the function is executed outside that scope.

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // ✅ 1
counter(); // ✅ 2
counter(); // ✅ 3

In this example, the inner function forms a closure that retains access to the count variable from its lexical scope, even after the outer function has finished executing.

💬 Final Thought

Understanding how scope, reassignment, and hoisting work under the hood will make debugging and structuring your code far easier. When in doubt, use const by default, switch to let when you need reassignment, and avoid var unless you're debugging legacy code.

How I Learned to Talk About Stale Data in React – A Reflection

Tsedey Terefe — Sun, 23 Mar 2025 12:55:31 +0000

Recently, while chatting with a fellow developer, they asked me a question: "How do you handle stale data in your React apps?" My first instinct was to say, "I just use React Query and invalidate the data." It sounded straightforward at the time.

They then asked the same question again. At first, I thought maybe I hadn’t explained myself clearly, so I repeated my answer:
"Yeah, I invalidate the data when it's no longer fresh."
That pause made me wonder, “Is there another approach they’re expecting? Am I missing something deeper here?” I wasn’t sure if they were looking for a more in-depth answer or exploring other methods I might use.

Looking back, I realize that I could have provided a more detailed response. For instance, I could have mentioned strategies like prefetching or polling, which are useful when ensuring fresh data or managing updates that need to happen regularly. At that moment, I assumed these techniques were common knowledge, so I didn’t elaborate further.

I now recognize that a deeper dive into these methods would have painted a more complete picture of how I manage stale data in React. For example, I could have explained how prefetching works by fetching data before it’s needed—so that when the component renders, the data is already available. I also could have touched on polling for real-time updates or discussed how caching works to reduce the need for frequent invalidation.

This experience taught me an important lesson: while it’s easy to assume certain concepts are widely known, explaining the “why” and “how” behind each choice can lead to richer technical conversations. It’s a reminder that, in any discussion about architecture or strategy, digging deeper and showcasing a broader understanding is always beneficial.

Digging Deeper: Strategies for Managing Stale Data

Here are some strategies to consider:

1.Optimistic Updates

With optimistic updates, you change the UI immediately as if everything went smoothly, even while the app syncs with the backend. This approach improves the user experience by making interactions feel snappier.

   const updateTodo = async (todoId, newTitle) => {
     await fetch(`/api/todos/${todoId}`, {
       method: 'PUT',
       body: JSON.stringify({ title: newTitle }),
     });

     // Update local state immediately
     queryClient.setQueryData(['todos'], (oldTodos) =>
       oldTodos.map((todo) =>
         todo.id === todoId ? { ...todo, title: newTitle } : todo
       )
     );
   };

2.Refetching Data

Sometimes, simply refetching the data is the best way to ensure freshness. You can set up automatic refetch intervals or provide a manual refresh button.

   const { data, refetch } = useQuery('data', fetchData, {
     refetchInterval: 5000, // Refetch every 5 seconds
   });

   return <button onClick={refetch}>Refresh Data</button>;

3.WebSockets for Real-Time Updates

For live data scenarios, like chats or notifications, WebSockets enable you to receive updates instantly from the server.

   useEffect(() => {
     const socket = new WebSocket('wss://your-websocket-url');

     socket.onmessage = (event) => {
       const updatedData = JSON.parse(event.data);
       queryClient.setQueryData('data', updatedData);
     };

     return () => {
       socket.close();
     };
   }, []);

4.Polling

If WebSockets aren’t an option, polling is a reliable alternative. This involves regularly sending requests to check for new data. Just be mindful of resource usage.

   const { data } = useQuery('data', fetchData, {
     refetchInterval: 10000, // Check for new data every 10 seconds
   });

5.Cache Invalidation

With React Query, you can invalidate queries when certain events occur, ensuring that the UI reflects the most recent data without the user needing to manually refresh.

   const mutation = useMutation(updateData, {
     onSuccess: () => {
       queryClient.invalidateQueries('data');
     },
   });

Key Considerations When Managing Stale Data

User Experience: Aim for smooth interactions. Optimistic UI updates can help minimize perceived latency.
Performance: Be mindful of resource consumption—refetching and polling can strain both the client and the server if overused.
Staleness Control: Determine how long your data can remain outdated before it becomes problematic. Tools like TTL (Time-To-Live) can automate this process.
Error Handling: Always include proper error management in case data fails to fetch or update.
Consistency: Ensure that all parts of your application display consistent data, even when using multiple update strategies.

Wrapping Up

Reflecting on that conversation, I now appreciate the importance of thoroughly explaining the "why" and "how" behind each data management strategy. Whether it’s through prefetching, polling, or cache invalidation, sharing detailed insights not only deepens your own understanding but also fosters richer technical discussions with peers.