Assignment versus Equality in JavaScript
Assignment Operator Logic
Assignment is an Action
In programming, the single equals sign (=) isn't a statement of fact, like in math. It doesn't mean two things are already equal. Instead, it's a command. It tells the computer to take the value on the right and store it in the variable on the left.
Think of it as "gets" or "is set to." The line
theme = 'dark'reads as "the variablethemegets the value'dark'."
This action is the primary way we change things in an application. When a user toggles a switch or clicks a button, we use the assignment operator to update the state of our program. This could mean changing a user's name, updating a score, or switching an entire website's theme.
// Storing a user's preferred theme in a variable
theme = 'light';
// Storing the current logged-in user's name
currentUser = 'Alex';
A One-Way Street
Assignment always works in one direction: from right to left. The program first evaluates whatever is on the right side of the = to resolve it into a single value. Only after that's done does it place that final value into the variable on the left.
We just have to remember everything on the right side of an assignment operator ( '=' ) is processed first and then the assignment happens.
This is why you can have the same variable on both sides of the operator. In the example below, the program first looks at score, sees it's 100, adds 10 to it, gets 110, and only then stores that new value back into score.
// Initialize the score
score = 100;
// The right side is evaluated first (100 + 10 = 110)
// Then, the result (110) is assigned back to score
score = score + 10;
// Now, score holds the value 110
Updating the User Interface
This simple act of assignment is how we bridge the gap between our code's logic and what the user sees. In modern web design, it's common to control a site's theme using a data- attribute on the main HTML element. We can change this attribute directly with JavaScript.
Let's say we have a variable holding the current theme. When the user clicks a button to switch to dark mode, we first update our variable. Then, we use assignment again to update the Document Object Model (DOM), which is the live representation of our webpage.
// The application starts with the light theme
let currentTheme = 'light';
// The user clicks a button, and we update the state
currentTheme = 'dark';
// Now, we apply that state to the webpage itself
// This tells the browser to use the CSS rules for the dark theme
document.documentElement.dataset.theme = currentTheme;
In that final line, document.documentElement.dataset.theme is the destination on the left. The program evaluates currentTheme on the right, finds it holds the string 'dark', and then assigns that string to the data-theme attribute of the page. The user instantly sees the theme change.
In programming, what is the primary function of the single equals sign (=)?
The assignment operator (=) evaluates the expression on the left side before assigning its value to the right side.
Every change in an application, from the smallest detail to the largest state update, happens because of an assignment.