[JavaScript Series 2] Understanding Variables and Types

In Part 1, we explored why JavaScript matters. Now it is time to run code yourself and build intuition for storing and managing values. You will try the simplest runtimes—browser consoles and Node.js—and organize variables and types along the concept → code → reason loop.

Key terms

Runtime: the environment that actually executes JavaScript. Browsers and Node.js are the big two.
Console: a window that executes code line by line and shows the result immediately.
const: the declaration keyword that locks a value so it cannot be reassigned.
let: the declaration keyword for values that should change, perfect for state updates.
Data type: the label that tells you whether a value is a string, number, and so on.
Array: an ordered box of same-kind data, ideal for list UIs.
Object: a structure for describing one entity with multiple properties, such as a card or form payload.

Core ideas

Study card

Time: 20–30 minutes

Setup: one browser such as Chrome or a terminal with Node.js installed

Goal: run JavaScript examples in the browser console and via the node command

Runtime options: run JavaScript inside a browser console or via Node.js files. Start with whichever feels easier.
Browser console: the lightest starting point. Paste code, press Enter, and see the result without setting up a project.
Node.js: a runtime that executes files via node filename.js. Great when you want to save examples and rerun them.
Variables: name tags for values. UI inputs, button labels, and server responses all live here.
const vs. let: use const for values that never change and let for those that will. This avoids accidental state overwrites.
Data types: strings (text), numbers (calculations), booleans (true/false), arrays (ordered lists), and objects (property bundles). New terms include a short explanation.
Array vs. object: arrays line up similar items; objects describe one item with multiple fields.

Code examples

Start with the fastest option—the browser console.

Run it directly inside the console

Open Chrome or Edge.
Launch DevTools and switch to the Console tab.
Paste the code below and press Enter.

const courseName = "JavaScript";
let attendeeCount = 120;

attendeeCount = attendeeCount + 5;

const tags = ["UI", "Frontend", "Study"];
const post = {
  title: "Planning the landing page",
  views: 120,
  published: true,
};

console.log(courseName);
console.log(attendeeCount);
console.log(tags.includes("UI"));
console.log(post.title);

The console prints a string, a number, a boolean, and finally a property from an object. At this stage, just get used to storing and retrieving values.

When you want to save the file and rerun it, move to Node.js.

Execute a file with Node.js

On macOS, install via Homebrew. On other systems, grab the Node.js LTS installer.

brew install node
node --version

Create a variables.js file with the following code.

const courseName = "JavaScript";
let attendeeCount = 120;

attendeeCount = attendeeCount + 5;

const members = ["Minji", "Seojun", "Haneul"];

function addMember(name) {
  if (!members.includes(name)) {
    members.push(name);
  }
}

const studentCard = {
  name: "Minji",
  grade: 2,
  favoriteTool: "Figma",
};

addMember("Haneul");
addMember("Doyun");

console.log(courseName, attendeeCount);
console.log(members);
console.log(studentCard.name);

Then run it from the terminal.

node variables.js

You should see something like this:

JavaScript 125
[ 'Minji', 'Seojun', 'Haneul', 'Doyun' ]
Minji

Use members.includes("Doyun") to check whether the list already contains someone, and studentCard.name to read a property for UI cards or forms.

Why it matters

Once you are comfortable with either the console or Node.js you can run examples instead of passively reading them.
Declaring variables deliberately prevents dashboard state from being overwritten in team projects.
Correctly labeling data types is essential for form validation, conditionals, and API payloads.
Understanding array vs. object helps you compose list UIs, detail cards, and stats modules quickly.

Practice

Follow along: execute the same code in the browser console and inside variables.js, then compare the outputs.
Extend: convert the participants array into an array of { name, role } objects and implement setRole(name, role) to update each person’s role, just like editing a modal.
Debug: add the string "10" to the number 10, observe the wrong result, and fix it with Number() while writing down the steps.
Done when: you have verified outputs from both the console and node variables.js, and the flows for adding, updating, and reading participants all behave as expected.

Wrap-up

To feel comfortable with JavaScript you first need the experience of running code on your own machine and understanding how values are stored and retrieved. Whether you use the browser console or Node.js, one successful run makes later topics—functions, conditionals, DOM work—far easier. Next time we will manage data flow with functions and array methods.