Variables: Let vs. Const

Hello! Welcome to the fourth module of your front-end development course.

In the previous modules, we focused on structure (HTML) and presentation (CSS). You learned to build well-organized pages and bring them to life with styling, layout, and even animations. Now, we're going to add the third core layer of web development: behavior.

This module is all about JavaScript, the programming language that allows us to create dynamic, interactive user experiences. We'll start with the most fundamental concept in any programming language: how to store and manage information.

Today's lesson will focus on variables. Your goal is to store and reference data using variables declared with let and const, distinguishing between constant and re-assignable values.

1. What Are Variables?

Before we dive into the code, let's talk about the concept. In programming, a variable is simply a named container that holds a piece of information.

Think about your work in Figma. You might create a color style called primary-blue and assign it the value #007AFF. From then on, instead of remembering and typing the hex code, you just apply the primary-blue style. If you ever need to update that color, you only change it in one place, and the update applies everywhere you used the style.

Variables in JavaScript work the same way. They give a name to a value, making our code more readable, manageable, and easier to update.

In modern JavaScript, we have two main keywords to create these containers: let and const. A third, older keyword, var, also exists, but its behavior can lead to unexpected issues, so modern practice strongly favors let and const.

2. The Core Differences: let and const

The choice between let and const comes down to a simple question: Will this value need to change later?

• let declares a variable whose value can be changed (re-assigned).
• const declares a variable whose value cannot be changed after it's first assigned. It is a "constant."

This distinction is crucial for writing predictable and bug-free code. Let's watch a video that breaks down the practical differences.

3. let and const in Practice

Let's solidify the concepts from the video with some practical examples relevant to product design.

Using let for Values That Change

You should use let for any value that you expect to be updated as a result of user interaction or application events.

Imagine a user profile settings page. The user's name or notification preference can be changed.

// The user's display name can be edited.
let displayName = "Alex"; 

// A user can toggle their notification settings.
let notificationsEnabled = true; 

// Later, the user updates their name in a form.
displayName = "Alex Taylor";

// They turn off notifications.
notificationsEnabled = false; 

In these cases, let is the correct choice because the values are designed to be re-assigned.

Using const for Fixed Values

You should use const for any value that you know should not change after it's initially set. This makes your code safer by preventing accidental modifications.

Think about values that are fundamental to a user's identity or the application's configuration.

// A user's unique ID should never change.
const userId = "a4e9-b1c7-d8f2";

// The date an account was created is a fixed fact.
const accountCreationDate = "2023-10-26";

// Trying to change it will cause an error, which is good!
// userId = "new-id-123"; // This would throw a TypeError.

The Nuance of const with Objects

As the video highlighted, one of the most important concepts to grasp is how const works with objects. When you declare an object with const, you are making the binding to that object constant. You cannot assign a completely new object to that variable. However, you can still change the properties inside the object.

This is perfect for managing something like a user profile object. The user profile itself is a constant entity, but its internal properties (like email or role) might change.

const userProfile = {
  name: "Sam",
  email: "sam.jones@example.com",
  role: "UX Designer"
};

// This is perfectly fine. We are modifying a property inside the object.
userProfile.role = "Senior UX Designer";

// This is NOT allowed and will cause an error.
// We are trying to assign a completely new object to the variable.
// userProfile = { name: "Sam Smith", email: "sam.smith@example.com", role: "Lead" }; 

4. Best Practices: When to Use Which?

Now that you know the technical differences, the practical strategy is simple and widely adopted by developers:

Use const by default. Only use let if you know the variable will need to be re-assigned.

This approach makes your intentions clear. When another developer (or your future self) sees const, they immediately know that value is not supposed to change. This helps prevent bugs and makes the code easier to reason about.

Let's read a short article that reinforces this modern convention.

Your Turn: Apply the Concept

Let's connect this to your design work. Imagine you are designing a user settings screen for a web application.

1. Identify two pieces of information on that screen that would be stored in a let variable. Why would their values need to change?
2. Identify two pieces of information that would be stored in a const variable. Why should their values remain constant?

Take a moment to think about it before moving on. This exercise will help you internalize the difference between re-assignable and constant data.

Click here for some ideas.

• Candidates for let:
  • themePreference: The user might switch between 'light' and 'dark' mode.
  • selectedLanguage: The user could change the display language from 'en-US' to 'fr-FR'.
  • profileBio: The user can edit their biography text.
• Candidates for const:
  • userEmail: While a user might be able to change their email, this is often a complex process. The email they signed in with for the current session is constant.
  • subscriptionTier: The user's subscription level ('Free', 'Pro') is fixed until they go through an upgrade/downgrade flow, at which point the application state would likely be reloaded.
  • dateJoined: The date the user signed up never changes.

Conclusion

Congratulations on taking your first step into JavaScript! Understanding how to store and manage data is the foundation upon which all application logic is built.

Key Takeaways:

• Variables are named containers for data. They make code readable and maintainable.
• Use let for variables whose values need to change (e.g., a user's current selection, a calculated total).
• Use const for variables whose values should not change after being set (e.g., a user ID, a birth date). This prevents accidental changes.
• The modern best practice is to use const by default and only switch to let when you specifically need re-assignment.
• For objects declared with const, you can still modify their internal properties.

In this lesson, we created the "containers" for our data. In the next lesson, we'll explore the different types of data we can put inside them, such as text (string), numbers, and true/false values (boolean).