[JavaScript 시리즈 2편] 변수와 자료형을 덜 헷갈리게 보는 법

1편에서 "왜 다시 공부해야 하는가"를 살펴봤다면, 이제는 코드를 직접 실행할 준비를 하고 값 관리 감각을 익힐 차례입니다. 이번 글은 브라우저 콘솔과 Node.js로 가장 기본적인 실행 환경을 확인한 뒤, 개념 → 코드 → 이유 순서로 변수와 자료형을 정리합니다.

이번 글에서 새로 나오는 용어

런타임: JavaScript 코드를 실제로 실행하는 환경으로, 브라우저와 Node.js가 대표적입니다.
콘솔(Console): 코드를 한 줄씩 실행하고 결과를 바로 확인하는 창입니다.
const: 값을 한 번 저장하면 다시 대입하지 못하게 잠그는 선언 키워드입니다.
let: 값이 상황에 따라 바뀔 때 사용하는 선언 키워드라서 상태 업데이트에 적합합니다.
자료형: 값이 문자열인지 숫자인지 등 "어떤 성격인지"를 알려 주는 꼬리표입니다.
배열: 같은 종류의 데이터를 순서대로 담는 상자라서 리스트 UI를 만들 때 씁니다.
객체: 한 대상을 여러 속성으로 설명할 때 쓰는 구조로, 카드나 폼 데이터 묶음에 어울립니다.

핵심 개념

학습 메모

소요 시간: 20~30분

준비물: Chrome 같은 브라우저 하나 또는 Node.js가 설치된 터미널

학습 목표: 브라우저 콘솔과 node 명령으로 JavaScript 예제를 직접 실행하기

실행 환경: JavaScript는 브라우저 콘솔에서도 실행할 수 있고, Node.js를 설치하면 파일 단위로도 실행할 수 있습니다. 처음에는 둘 중 하나만 준비해도 충분합니다.
브라우저 콘솔: 가장 가볍게 시작하는 방법입니다. 새 프로젝트를 만들지 않아도 코드를 붙여 넣고 결과를 바로 확인할 수 있습니다.
Node.js: node 파일명.js 형태로 코드를 실행하는 런타임입니다. 예제를 파일로 저장하고 반복 실행할 때 편합니다.
변수: 값에 붙인 이름표입니다. DOM 입력 값, 버튼 라벨, 서버 응답처럼 화면에 필요한 정보가 여기에 담깁니다.
const와 let: 다시 대입하지 않을 값은 const, 바뀔 예정인 값은 let으로 선언합니다. 이렇게 나누면 실수로 상태가 덮어쓰이지 않습니다.
자료형: 문자열(텍스트), 숫자(계산용 값), 불리언(참/거짓), 배열(순서 있는 리스트), 객체(속성 묶음) 같은 꼬리표입니다. 처음 등장하는 용어는 한국어 설명과 함께 적었습니다.
배열 vs. 객체 선택 기준: 같은 종류의 데이터를 줄 세울 때는 배열, 한 대상을 여러 속성으로 설명할 때는 객체가 어울립니다.

코드로 확인하기

먼저 가장 가볍게 시작할 수 있는 브라우저 콘솔에서 변수와 값을 확인해 보겠습니다.

브라우저 콘솔에서 바로 실행하기

Chrome이나 Edge를 엽니다.
개발자 도구를 열고 Console 탭으로 이동합니다.
아래 코드를 붙여 넣고 Enter를 눌러 실행합니다.

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

attendeeCount = attendeeCount + 5;

const tags = ["UI", "Frontend", "Study"];
const post = {
  title: "랜딩 페이지 계획",
  views: 120,
  published: true,
};

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

콘솔에는 문자열, 숫자, 불리언이 차례로 출력됩니다. 이 단계에서는 "값을 저장하고 꺼내는 흐름"만 눈에 익히면 충분합니다.

파일로 저장해 반복 실행하고 싶다면 Node.js를 준비하면 됩니다.

Node.js로 파일 실행하기

Mac에서는 Homebrew로 설치할 수 있고, 다른 환경에서는 Node.js LTS 설치 프로그램을 사용하면 됩니다.

brew install node
node --version

설치가 끝나면 variables.js 파일을 만들고 아래 코드를 저장합니다.

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

attendeeCount = attendeeCount + 5;

const members = ["민지", "서준", "하늘"];

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

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

addMember("하늘");
addMember("도윤");

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

이제 터미널에서 아래 명령으로 실행합니다.

node variables.js

결과는 대략 아래처럼 나옵니다.

JavaScript 125
[ '민지', '서준', '하늘', '도윤' ]
Minji

members.includes("도윤")처럼 배열 메서드는 리스트에 특정 항목이 있는지 확인할 때 쓰고, studentCard.name처럼 객체 속성은 UI 카드나 폼 데이터를 꺼낼 때 그대로 사용할 수 있습니다.

왜 중요한가

브라우저 콘솔과 Node.js 중 하나라도 먼저 다룰 수 있으면 예제를 읽기만 하지 않고 바로 실행하며 확인할 수 있습니다.
변수 선언을 구분하면 팀 과제용 대시보드에서 상태가 갑자기 덮어쓰이는 버그를 줄일 수 있습니다.
자료형을 제대로 구분해야 폼 검증, 조건문, API 요청 본문을 안정적으로 구성할 수 있습니다.
배열과 객체 차이를 이해해야 리스트 UI, 상세 카드, 통계 모듈을 빠르게 조립할 수 있습니다.

실습

따라 하기: 같은 코드를 브라우저 콘솔과 variables.js 파일 두 곳에서 각각 실행하고 출력 차이를 비교합니다.
확장하기: participants 배열을 { name, role } 객체 배열로 바꾸고 setRole(name, role) 함수를 만들어 모달 카드 역할을 수정합니다.
디버깅: 문자열 "10"과 숫자 10을 섞어 더한 뒤 잘못된 결과를 콘솔에서 확인하고 Number()로 고치는 과정을 기록합니다.
완료 기준: 브라우저 콘솔과 node variables.js 실행 결과를 모두 확인하고, 참가자 추가·수정·조회 흐름이 예상대로 동작하면 실습을 마칩니다.

마무리

JavaScript를 편하게 느끼려면 화려한 문법보다 먼저 "내 컴퓨터에서 코드를 실행해 보는 경험"과 값을 어떻게 저장하고 꺼내는지부터 익혀야 합니다. 브라우저 콘솔이든 Node.js든 한 번 직접 돌려 보면 이후 함수, 조건문, DOM 조작도 훨씬 덜 막힙니다. 다음 글에서는 함수와 배열 메서드로 데이터 흐름을 정리하는 방법을 살펴보겠습니다.