자바스크립트 기초 – 변수와 자료형 쉽게 이해하기이거

자바스크립트 기초 – 변수와 자료형 쉽게 이해하기

지금까지 HTML로 웹페이지의 뼈대를 세우고, CSS로 색과 글꼴을 입히고 Flexbox와 미디어 쿼리로 배치까지 다듬는 방법을 배웠습니다. 이제 보기 좋은 페이지는 충분히 만들 수 있지만, 아직 그 페이지는 움직이지 않는 상태입니다. 버튼을 눌러도 아무 일도 일어나지 않고, 사용자가 입력한 값에 반응하지도 않습니다. 이 페이지에 생명을 불어넣는 언어가 바로 자바스크립트(JavaScript)입니다. 자바스크립트 시리즈의 첫 번째 글인 오늘은 자바스크립트를 실행하는 방법부터 시작해, 모든 프로그래밍의 기초가 되는 변수와 자료형을 쉽게 정리해 보겠습니다.

1. 자바스크립트란 무엇인가요?

HTML 기초 첫 글에서 웹을 집에 비유했던 것을 기억하시나요? HTML은 기둥과 벽 같은 구조, CSS는 벽지와 인테리어 같은 디자인, 그리고 자바스크립트는 전등 스위치나 자동문 같은 동작을 담당한다고 했습니다. 이제 드디어 그 마지막 조각을 배울 차례입니다.

자바스크립트는 웹 브라우저 안에서 실행되는 프로그래밍 언어입니다. HTML과 CSS는 문서의 구조와 모양을 “표시”하는 언어였지만, 자바스크립트는 계산을 하고, 조건을 판단하고, 같은 일을 반복하는 진짜 프로그래밍이 가능합니다. 우리가 웹에서 흔히 보는 다음 기능들이 모두 자바스크립트로 만들어집니다.

• 버튼을 누르면 메뉴가 펼쳐지거나 팝업창이 나타나는 기능
• 회원가입 시 비밀번호가 조건에 맞는지 실시간으로 확인하는 기능
• 새로고침 없이 댓글이 바로 추가되는 기능
• 사진이 자동으로 넘어가는 슬라이드 배너

참고로 이름이 비슷한 자바(Java)와 자바스크립트는 전혀 다른 언어입니다. 이름만 비슷할 뿐 문법도 용도도 다르니 헷갈리지 않도록 주의하세요.

2. 자바스크립트를 실행하는 두 가지 방법

① 브라우저 콘솔에서 바로 실행하기
가장 빠르게 자바스크립트를 체험하는 방법입니다. 크롬 브라우저에서 F12를 눌러 개발자 도구를 열고, 위쪽 탭 중 Console(콘솔)을 선택합니다. 깜빡이는 커서 옆에 다음 코드를 입력하고 Enter를 눌러 보세요.

console.log("안녕하세요, 자바스크립트!");

콘솔에 “안녕하세요, 자바스크립트!”라는 글자가 출력되면 여러분의 첫 번째 자바스크립트 코드가 성공적으로 실행된 것입니다. console.log()는 괄호 안의 값을 콘솔에 출력하는 명령으로, 앞으로 코드의 결과를 확인할 때 가장 많이 사용하게 됩니다. 콘솔에 처음 코드를 붙여넣을 때 브라우저가 경고 문구를 띄우는 경우가 있는데, 출처를 모르는 코드를 무작정 붙여넣지 말라는 보안 안내이니 직접 입력한 코드라면 안심해도 됩니다.

② HTML 파일에 script 태그로 넣기
실제 웹페이지에서는 <script> 태그를 사용합니다. CSS처럼 HTML 안에 직접 쓰거나, 별도의 .js 파일로 만들어 연결할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>첫 자바스크립트</title>
</head>
<body>
  <h1>자바스크립트 연습</h1>

  <!-- 방법 1: HTML 안에 직접 작성 -->
  <script>
    console.log("페이지가 열렸습니다!");
  </script>

  <!-- 방법 2: 외부 파일 연결 -->
  <script src="main.js"></script>
</body>
</html>

script 태그는 보통 body가 끝나기 직전에 넣습니다. 브라우저는 HTML을 위에서부터 차례로 읽는데, 자바스크립트가 너무 위에 있으면 아직 화면에 만들어지지 않은 요소를 찾으려다 오류가 날 수 있기 때문입니다. CSS 편에서 외부 스타일 시트를 권장했던 것처럼, 실제 사이트에서는 외부 .js 파일로 분리하는 것이 관리하기 좋습니다. 이 글의 예제는 콘솔에 직접 입력해 보면 가장 빠르게 결과를 확인할 수 있습니다.

3. 변수란 무엇인가요?

프로그래밍은 결국 데이터를 다루는 일입니다. 사용자의 이름, 장바구니에 담긴 상품 개수, 로그인 여부 같은 데이터를 저장해 두었다가 필요할 때 꺼내 써야 합니다. 이때 데이터를 담아 두는 공간이 바로 변수(Variable)입니다.

변수는 이름표가 붙은 상자라고 생각하면 쉽습니다. “이름”이라는 이름표가 붙은 상자에 “홍길동”을 넣어 두고, 나중에 “이름 상자 안에 뭐가 있지?” 하고 꺼내 보는 것입니다.

자바스크립트에서 변수를 만드는 코드는 다음과 같습니다.

let userName = "홍길동";
let age = 25;

console.log(userName);  // 홍길동
console.log(age);       // 25

여기서 =는 수학의 “같다”가 아니라 “오른쪽 값을 왼쪽 변수에 넣는다”는 뜻입니다. 이것을 할당이라고 부릅니다. 또한 // 뒤의 글은 주석으로, 실행되지 않는 메모입니다. 자바스크립트의 주석은 한 줄이면 //, 여러 줄이면 CSS와 같은 /* */를 사용합니다. 각 줄 끝의 세미콜론(;)은 문장이 끝났음을 표시하며, 생략해도 대부분 동작하지만 붙이는 습관을 들이는 것이 좋습니다.

4. 변수를 만드는 세 가지 키워드 – let, const, var

자바스크립트에서 변수를 만들 때는 let, const, var 중 하나를 사용합니다.

① let – 값을 바꿀 수 있는 변수
나중에 값이 바뀔 수 있는 데이터에 사용합니다.

let score = 80;
console.log(score);  // 80

score = 95;          // 값 변경 (let은 다시 쓰지 않음)
console.log(score);  // 95

② const – 값을 바꿀 수 없는 변수(상수)
const는 Constant(상수)의 약자로, 한 번 넣은 값을 다시 바꿀 수 없습니다. 바꾸려고 하면 오류가 발생합니다.

const birthYear = 2001;
birthYear = 2002;  // 오류! Assignment to constant variable.

“값을 못 바꾸면 불편하지 않나?” 싶을 수 있지만, 오히려 이것이 장점입니다. 바뀌면 안 되는 값을 실수로 덮어쓰는 버그를 미리 막아 주기 때문입니다.

③ var – 예전 방식
var는 자바스크립트 초창기부터 쓰이던 키워드입니다. 같은 이름으로 변수를 또 만들어도 오류가 나지 않는 등 예상치 못한 문제를 일으키는 특징이 있어, 이를 보완하기 위해 let과 const가 새로 도입되었습니다. 인터넷의 오래된 예제 코드에서 자주 보이지만, 새로 작성하는 코드에서는 사용하지 않는 것이 좋습니다.

실무에서 통용되는 원칙은 “기본은 const, 값이 바뀌어야 할 때만 let”입니다. 어떤 것을 써야 할지 모르겠다면 일단 const로 만들고, 값을 바꿔야 하는 상황이 생기면 그때 let으로 바꾸면 됩니다.

5. 변수 이름 짓는 규칙

변수 이름에는 반드시 지켜야 하는 규칙과 지키면 좋은 관례가 있습니다.

반드시 지켜야 하는 규칙

• 영문자, 숫자, 밑줄(_), 달러 기호($)만 사용할 수 있습니다.
• 숫자로 시작할 수 없습니다. 1st는 안 되고 first는 됩니다.
• 띄어쓰기를 할 수 없습니다.
• let, const, if처럼 자바스크립트가 이미 사용하는 단어(예약어)는 쓸 수 없습니다.
• 대소문자를 구분합니다. age와 Age는 서로 다른 변수입니다.

지키면 좋은 관례

• 카멜 케이스(camelCase) 사용 : 여러 단어를 이을 때 첫 단어는 소문자, 이후 단어의 첫 글자는 대문자로 씁니다. username보다 userName, totalprice보다 totalPrice가 읽기 쉽습니다. 낙타의 혹처럼 중간이 솟아 있다고 해서 붙은 이름입니다.
• 의미가 드러나는 이름 : a, x, data1 대신 userAge, cartCount처럼 무엇이 들어 있는지 알 수 있게 짓습니다.
• 참/거짓 값은 is, has로 시작 : isLogin, hasCoupon처럼 쓰면 예/아니오 값이라는 것이 바로 드러납니다.

CSS 선택자 편에서 클래스 이름은 하이픈(-)으로 연결한다고 배웠는데, 자바스크립트 변수 이름에는 하이픈을 쓸 수 없습니다. 하이픈이 빼기 기호로 인식되기 때문입니다. CSS는 main-title, 자바스크립트는 mainTitle로 구분해 기억해 두세요.

6. 자료형이란? – 데이터의 종류

변수라는 상자에는 여러 종류의 데이터를 넣을 수 있습니다. 글자도 있고, 숫자도 있고, 참/거짓도 있습니다. 이렇게 데이터의 종류를 구분한 것을 자료형(Data Type)이라고 합니다. 자료형에 따라 할 수 있는 일이 달라지기 때문에, 숫자끼리는 더하기를 해서 계산할 수 있지만 글자는 계산 대신 이어 붙이기가 됩니다. 자바스크립트의 기본 자료형을 하나씩 살펴보겠습니다.

7. 문자열 (String) – 글자 데이터

문자열은 글자로 이루어진 데이터로, 반드시 따옴표로 감싸야 합니다. 큰따옴표(” “), 작은따옴표(‘ ‘), 백틱(` `) 세 가지를 모두 사용할 수 있습니다.

const name1 = "홍길동";
const name2 = '김철수';
const greeting = `안녕하세요`;

문자열끼리 +로 연결하면 이어 붙여집니다. 그런데 변수가 여러 개 섞이면 따옴표와 더하기 기호가 많아져 읽기 어렵습니다. 이럴 때 백틱(키보드 숫자 1 왼쪽의 ` 키)을 사용하는 템플릿 리터럴이 매우 편리합니다. ${ } 안에 변수를 넣으면 그 자리에 값이 들어갑니다.

const userName = "홍길동";
const age = 25;

// + 로 연결하는 방식
console.log("제 이름은 " + userName + "이고, 나이는 " + age + "살입니다.");

// 템플릿 리터럴 방식 (훨씬 읽기 쉬움)
console.log(`제 이름은 ${userName}이고, 나이는 ${age}살입니다.`);

// 결과: 제 이름은 홍길동이고, 나이는 25살입니다.

두 코드의 결과는 같지만, 템플릿 리터럴이 훨씬 자연스럽게 읽힙니다. 요즘은 변수가 들어가는 문자열에는 대부분 템플릿 리터럴을 사용합니다.

8. 숫자 (Number) – 계산할 수 있는 데이터

숫자는 따옴표 없이 그대로 씁니다. 자바스크립트는 정수와 소수를 구분하지 않고 모두 Number라는 하나의 자료형으로 다룹니다.

const price = 3000;
const count = 3;
const rate = 0.1;

console.log(price * count);   // 9000  (곱하기)
console.log(10 / 3);          // 3.3333...  (나누기)
console.log(10 % 3);          // 1  (나머지)

더하기(+), 빼기(-), 곱하기(*), 나누기(/) 외에 %는 나눗셈의 나머지를 구합니다. 나머지 연산은 짝수·홀수를 구분할 때(2로 나눈 나머지가 0이면 짝수) 자주 쓰이니 기억해 두면 다음 글의 조건문에서 유용하게 활용할 수 있습니다.

여기서 아주 중요한 점이 있습니다. 따옴표로 감싼 숫자는 숫자가 아니라 문자열입니다. 25는 숫자지만 "25"는 글자입니다. 이 차이 때문에 생기는 문제는 뒤에서 자세히 다루겠습니다.

9. 불리언 (Boolean) – 참과 거짓

불리언은 true(참)와 false(거짓) 두 가지 값만 가지는 자료형입니다. 따옴표 없이 소문자로 씁니다.

const isLogin = true;
const hasCoupon = false;

console.log(10 > 5);   // true
console.log(3 === 7);  // false

불리언은 단독으로 보면 단순해 보이지만, 프로그램이 판단을 내릴 때 핵심적인 역할을 합니다. “로그인했다면 마이페이지를 보여주고, 아니라면 로그인 버튼을 보여줘라”처럼 조건에 따라 다른 동작을 할 때 반드시 필요합니다. 위 코드의 ===는 두 값이 같은지 비교하는 연산자로, 다음 글에서 조건문과 함께 자세히 다루겠습니다.

10. undefined와 null – 값이 없음

자바스크립트에는 “값이 없다”를 표현하는 자료형이 두 가지 있어 초보자를 헷갈리게 합니다.

let address;
console.log(address);  // undefined

let coupon = null;
console.log(coupon);   // null

• undefined : 변수는 만들었지만 아직 값을 넣지 않은 상태입니다. 자바스크립트가 자동으로 넣어 주는 값입니다.
• null : 개발자가 일부러 “비어 있음”이라고 지정한 값입니다.

빈 주차 공간에 비유하면, undefined는 아직 주차 칸에 번호조차 정해지지 않은 상태이고, null은 “이 칸은 비워 둠”이라는 표지판을 세워 둔 상태라고 할 수 있습니다. 직접 “값이 없음”을 표시하고 싶을 때는 null을 사용하면 됩니다.

11. 미리 보기 – 배열과 객체

지금까지 살펴본 자료형은 한 번에 값 하나만 담을 수 있었습니다. 여러 개의 값을 한꺼번에 다루고 싶을 때는 배열과 객체를 사용합니다. 오늘은 모양만 간단히 보고, 앞으로의 글에서 자세히 다루겠습니다.

// 배열: 여러 값을 순서대로 나열 (대괄호)
const fruits = ["사과", "바나나", "포도"];
console.log(fruits[0]);  // 사과 (순서는 0부터 시작)

// 객체: 이름표와 값을 짝지어 묶음 (중괄호)
const user = {
  name: "홍길동",
  age: 25,
  isLogin: true
};
console.log(user.name);  // 홍길동

배열은 장보기 목록처럼 순서가 있는 여러 값을, 객체는 회원 정보 카드처럼 이름과 값이 짝을 이루는 정보를 담을 때 사용합니다. 배열의 순서가 1이 아니라 0부터 시작한다는 점은 처음에 많이 헷갈리니 꼭 기억해 두세요.

12. 자료형 확인하기 – typeof

변수에 어떤 자료형이 들어 있는지 궁금할 때는 typeof를 사용합니다.

console.log(typeof "홍길동");   // string
console.log(typeof 25);         // number
console.log(typeof "25");       // string  ← 따옴표가 있으면 문자열!
console.log(typeof true);       // boolean
console.log(typeof undefined);  // undefined

참고로 typeof null을 실행하면 “null”이 아니라 “object”가 나옵니다. 이것은 자바스크립트 초창기의 오류가 호환성 때문에 고쳐지지 않고 남아 있는 것이니, 이상하다고 당황하지 않아도 됩니다.

13. 초보자가 꼭 겪는 함정 – 문자열과 숫자의 더하기

자바스크립트는 변수에 어떤 자료형이든 자유롭게 넣을 수 있고, 필요하면 자료형을 자동으로 바꾸기도 합니다. 편리하지만, 이 때문에 예상치 못한 결과가 나오기도 합니다. 다음 코드의 결과를 예상해 보세요.

console.log(5 + 3);      // 8
console.log("5" + 3);    // ?
console.log("5" - 3);    // ?

정답은 “53”과 2입니다. +는 숫자끼리는 더하기지만, 한쪽이라도 문자열이면 이어 붙이기가 되어 숫자 3이 글자 “3”으로 바뀌어 “53”이 됩니다. 반면 -는 문자열에는 의미가 없기 때문에 자바스크립트가 “5”를 숫자로 바꿔 계산해 2가 됩니다.

이 문제는 실제로 자주 발생합니다. 폼 편에서 배운 input에 사용자가 입력한 값은 숫자를 입력하더라도 항상 문자열로 전달되기 때문입니다. 수량 입력창에 “2”를 입력하고 1을 더하면 3이 아니라 “21”이 되는 버그가 생기는 것입니다. 이럴 때는 Number()로 문자열을 숫자로 바꾼 뒤 계산해야 합니다.

const input = "2";               // 입력창에서 받은 값 (문자열)

console.log(input + 1);          // "21"  ← 버그!
console.log(Number(input) + 1);  // 3     ← 정상

console.log(String(100));        // "100" (숫자 → 문자열)

14. 실습: 변수로 자기소개 출력하기

오늘 배운 내용을 모두 활용해 보겠습니다. 아래 코드를 intro.html로 저장해 브라우저에서 연 뒤, F12를 눌러 콘솔 탭에서 결과를 확인해 보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>변수와 자료형 실습</title>
</head>
<body>
  <h1>F12를 눌러 콘솔을 확인하세요</h1>

  <script>
    // 바뀌지 않는 정보는 const
    const userName = "홍길동";
    const birthYear = 2001;
    const hobbies = ["여행", "독서", "코딩"];

    // 바뀔 수 있는 정보는 let
    let studyDays = 12;
    let isStudying = true;

    // 계산하기
    const currentYear = 2026;
    const age = currentYear - birthYear;

    // 출력하기
    console.log(`이름: ${userName}`);
    console.log(`나이: ${age}살`);
    console.log(`취미: ${hobbies[0]}, ${hobbies[1]}, ${hobbies[2]}`);
    console.log(`코딩 공부 ${studyDays}일째`);

    // 하루가 지나서 값 변경
    studyDays = studyDays + 1;
    console.log(`이제 ${studyDays}일째!`);

    // 자료형 확인
    console.log(typeof userName);    // string
    console.log(typeof age);         // number
    console.log(typeof isStudying);  // boolean
  </script>
</body>
</html>

콘솔에는 다음과 같은 결과가 출력됩니다.

나이는 직접 적지 않고 현재 연도에서 태어난 해를 빼서 계산했습니다. 이처럼 변수에 담긴 값으로 새로운 값을 만들어 내는 것이 프로그래밍의 기본입니다. 또 공부 일수는 let으로 만들었기 때문에 값을 1 늘려 바꿀 수 있었습니다. 자신의 정보로 값을 바꿔 보고, 일부러 const 변수의 값을 바꿔 보며 어떤 오류가 나는지도 확인해 보세요. 오류 메시지를 읽어 보는 것도 중요한 공부입니다.

15. 자주 하는 실수와 해결 방법

• is not defined 오류 : 변수 이름의 철자나 대소문자가 다른 경우입니다. userName으로 만들고 username으로 부르면 다른 변수로 인식합니다.
• Assignment to constant variable 오류 : const로 만든 변수의 값을 바꾸려 한 경우입니다. 값이 바뀌어야 한다면 let으로 만드세요.
• 문자열에 따옴표를 빠뜨림 : const name = 홍길동;처럼 쓰면 자바스크립트는 홍길동을 변수 이름으로 생각해 오류를 냅니다.
• 템플릿 리터럴이 그대로 출력돼요 : 백틱(`) 대신 일반 따옴표를 쓰면 ${userName}이 글자 그대로 출력됩니다. 키보드 숫자 1 왼쪽의 백틱 키를 사용하세요.
• 계산 결과가 이상해요 : 숫자가 문자열로 저장되어 이어 붙여진 경우가 많습니다. typeof로 자료형을 확인하고 필요하면 Number()로 바꾸세요.
• 같은 이름으로 변수를 또 만듦 : let이나 const로 이미 만든 변수를 다시 선언하면 오류가 납니다. 값을 바꿀 때는 키워드 없이 score = 95;처럼 쓰세요.

마무리하며

오늘은 자바스크립트의 첫걸음으로 코드를 실행하는 방법과 변수, 자료형에 대해 알아보았습니다. 변수는 데이터를 담는 이름표 붙은 상자이며, 기본은 const로 만들고 값이 바뀌어야 할 때만 let을 사용한다는 원칙을 기억해 두세요. 자료형은 글자인 문자열, 계산 가능한 숫자, 참과 거짓의 불리언, 그리고 값이 없음을 나타내는 undefined와 null이 기본이며, 따옴표 하나로 숫자가 문자열이 되어 “5” + 3이 “53”이 되는 함정도 꼭 주의해야 합니다.

처음 프로그래밍 언어를 배우면 낯선 용어가 많아 어렵게 느껴질 수 있지만, 콘솔에 직접 입력하고 결과를 확인하는 과정을 반복하다 보면 금방 익숙해집니다. 다음 글에서는 오늘 배운 불리언을 활용해 프로그램이 스스로 판단하게 만드는 조건문(if문)과, 같은 일을 자동으로 반복하는 반복문(for문)을 예제로 배워보겠습니다. 궁금한 점은 댓글로 남겨 주세요!