1. 데이터 상자 만들기 (변수 선언)/1.2 상자에 넣을 수 있는 것들 (데이터 타입)

1.2.1 기본형: 숫자(Number), 글자(String), 참/거짓(Boolean) - 변수에 저장할 수 있는 세 가지 값

thejavascript4kids 2025. 6. 27. 12:20

📘 1.2.1 기본형: 숫자(Number), 글자(String), 참/거짓(Boolean) - 변수에 저장할 수 있는 세 가지 값

조용한 오후, 우리는 지난 시간에 var, let, const라는 세 가지 변수 만들기 방법을 배웠습니다. 이제 여러분은 변수를 만드는 것에 익숙해졌을 것입니다.

그런데 문득 이런 생각이 들 것입니다. "변수는 만들 줄 알겠는데, 그 안에 어떤 것들을 넣을 수 있을까요?" 오늘은 바로 그 질문에 대한 답을 찾아볼 것입니다. 자바스크립트 세상에는 변수에 넣을 수 있는 세 가지 기본 종류의 값이 있거든요.

🧠 새로운 단어들과 친해지기

데이터 타입을 이해하는 데 도움이 되는 쉬운 단어들을 알아보겠습니다.

단어 뜻
데이터 타입 (Data Type) 변수에 들어있는 값의 종류를 알려주는 표시입니다.
Number 숫자를 나타내는 값 종류입니다. 계산할 수 있는 모든 숫자들입니다.
String 글자와 문장을 나타내는 값 종류입니다. 이름이나 메시지 같은 것입니다.
Boolean 참(true) 또는 거짓(false)만 가질 수 있는 특별한 값입니다.

데이터 타입은 변수에 들어있는 값의 종류를 알려주는 표시와 같습니다. 마치 과자 봉지에 "초콜릿", "사탕", "과자"라고 써붙이는 것처럼, 각 값이 어떤 성질을 가지고 있는지 알려주는 중요한 정보입니다.

✨ 세 가지 기본 값들 알아보기

자바스크립트 세상에는 변수에 넣을 수 있는 정말 다양한 값들이 있습니다. 각각의 값은 서로 다른 특별한 특성을 가지고 있습니다.

Number(숫자)는 모든 종류의 숫자를 다루는 값입니다. 여러분의 나이, 시험 점수, 용돈, 키와 몸무게까지 숫자로 표현할 수 있는 모든 것들이 여기에 속합니다. 양수도, 음수도, 소수점이 있는 수도 모두 포함입니다. 이 값의 특별한 능력은 수학적 계산을 할 수 있다는 것입니다.

String(글자)은 글자, 단어, 문장을 저장하는 값입니다. 여러분의 이름, 좋아하는 노래 제목, 친구에게 보내는 메시지 등 글자로 이루어진 모든 것들을 다룹니다. 이 값의 특별한 능력은 글자들을 보관하고 표시할 수 있다는 것입니다. 그리고 꼭 기억해야 할 것은 따옴표로 감싸야 한다는 규칙입니다.

Boolean(참/거짓)은 가장 단순하면서도 가장 똑똑한 값입니다. 이 값은 오직 두 가지만 가질 수 있습니다. "맞아!"(true) 또는 "틀려!"(false) 말입니다. 단순해 보이지만, 컴퓨터가 판단하고 결정하는 모든 과정의 기초가 되는 정말 중요한 값입니다.

이 세 값은 서로 다른 특별한 기능을 가지고 있습니다. 숫자는 계산 기능을, 글자는 텍스트 저장 기능을, 참/거짓은 판단 기능을 제공합니다.

온화한 비유: 학교 준비물의 세 가지 종류

세 가지 기본 값을 더 쉽게 이해하기 위해 '학교 준비물의 세 가지 종류' 이야기를 들려드리겠습니다.

학교에 가져가는 준비물들을 세 가지로 나누어볼까요?

🔢 계산 도구들(Number 종류)에는 숫자를 다루는 물건들이 있습니다. 계산기, 자, 저울, 시계 등이 여기에 속합니다. 이런 도구들의 특징은 숫자를 표시하고 저장할 수 있다는 것입니다. 시험 점수를 기록하거나, 책의 페이지 수를 세거나, 키를 재는 모든 일들에 필요합니다.

📝 글쓰기 도구들(String 종류)에는 글자를 다루는 물건들이 있습니다. 연필, 펜, 지우개, 노트 등이 여기에 속합니다. 이런 도구들의 특징은 글자들을 쓰고 보관할 수 있다는 것입니다. 이름을 쓰거나, 일기를 쓰거나, 편지를 보내는 모든 일들에 필요합니다.

✅ 체크 도구들(Boolean 종류)에는 맞다/틀리다를 확인하는 물건들이 있습니다. 체크리스트, O/X 문제지, 출석부 등이 여기에 속합니다. 이런 도구들의 특징은 오직 두 가지만 표시할 수 있다는 것입니다. "맞아!" 또는 "틀려!" 세상의 모든 질문에 명확하고 확실하게 답해주는 것입니다. "숙제를 다 했나요?", "오늘 체육시간이 있나요?" 같은 질문에 정확하게 답할 때 사용합니다.

🎯 왜 세 가지 값을 알아야 할까요?

여러분이 궁금해할 것입니다. "왜 이 세 가지 값의 종류를 알아야 하나요?"

첫 번째 이유는 올바른 값을 올바른 곳에 사용하기 위해서입니다. 계산이 필요한 곳에는 Number를, 이름이나 메시지가 필요한 곳에는 String을, 맞다/틀리다 판단이 필요한 곳에는 Boolean을 사용해야 하거든요.

두 번째로는 각 값의 특별한 능력을 제대로 활용하기 위해서입니다. 예를 들어 문자열은 메시지를 저장하고, 숫자는 수학적 계산이 가능하다는 것을 알게 되죠.

세 번째로는 값의 특성을 미리 알고 적절히 사용하여 프로그램의 문제를 쉽게 찾고 해결할 수 있게 됩니다.

마지막으로 이후에 배울 값 변환 개념의 기초를 탄탄히 다질 수 있습니다. 때로는 숫자를 글자로 바꾸거나, 그 반대로 바꿔야 할 때가 있거든요.

⚙️ 세 가지 값 사용법 배우기

각 값을 변수에 넣는 방법을 알아보겠습니다.

Number (숫자) 넣는 법:

let age = 12;           // 정수
let height = 150.5;     // 소수점 수  
let temperature = -5;   // 음수

String (글자) 넣는 법:

let name = "지민";      // 큰따옴표
let hobby = '독서';     // 작은따옴표
let message = `안녕!`;  // 백틱 (특별한 기능)

Boolean (참/거짓) 넣는 법:

let isStudent = true;   // 참
let isWeekend = false;  // 거짓

각 값마다 변수에 넣는 특별한 방법이 있다는 점을 기억해두세요. 특히 글자는 반드시 따옴표로 감싸야 하고, 참/거짓은 true와 false라는 정확한 단어를 사용해야 합니다.

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 세 가지 기본 값을 어떻게 사용하는지 자세히 알아보겠습니다.

🔹 첫 번째 예시: 세 가지 값을 모두 사용해서 나를 소개해보자

첫 번째로는 Number, String, Boolean을 모두 사용해서 나 자신을 소개하는 프로그램을 만들어보겠습니다.

// Number - 나이와 점수를 숫자 변수에 넣어요
let myAge = 11;          // 내 나이는 11살이에요
let mathScore = 95.5;    // 수학 점수는 95.5점이에요

// String - 이름과 인사말을 글자 변수에 넣어요
let studentName = "수민";     // 내 이름은 수민이에요
let greeting = "안녕하세요!"; // 인사말을 준비했어요

// Boolean - 참/거짓 정보를 논리 변수에 넣어요
let isRaining = false;   // 지금 비가 안 와요 (거짓)
let hasHomework = true;  // 숙제가 있어요 (참)

// 각 변수에 들어있는 값들을 하나씩 꺼내서 확인해봐요
console.log(myAge);        // 11 (숫자가 나타나요)
console.log(mathScore);    // 95.5 (소수점 숫자가 나타나요)
console.log(studentName);  // "수민" (글자가 나타나요)
console.log(greeting);     // "안녕하세요!" (문장이 나타나요)
console.log(isRaining);    // false (거짓이 나타나요)
console.log(hasHomework);  // true (참이 나타나요)

이 과정을 차근차근 설명해드리겠습니다. 먼저 각 값 종류별로 변수를 만듭니다. Number로는 나이와 점수처럼 계산할 수 있는 정보를, String으로는 이름과 인사말처럼 글자로 된 정보를, Boolean으로는 맞다/틀리다로 답할 수 있는 정보를 넣습니다. 그다음 console.log라는 특별한 기능을 사용해서 각 변수에 값이 잘 들어갔는지 확인해봅니다. 이를 통해 하나의 프로그램에서 여러 종류의 값을 함께 사용하는 방법을 익힐 수 있습니다.

🔹 두 번째 예시: 각 값의 특별한 성질 확인해보자

두 번째로는 각 값 종류가 가진 특별한 성질들을 확인하는 방법을 배워보겠습니다.

// 다양한 값들을 각각의 변수에 넣어봐요
let number1 = 42;        // 숫자를 넣었어요
let text1 = "Hello";     // 글자를 넣었어요  
let check1 = true;       // 참/거짓을 넣었어요

// 각 값들을 출력해서 어떻게 보이는지 확인해봐요
console.log("숫자 값:", number1);    // 숫자 값: 42
console.log("글자 값:", text1);      // 글자 값: Hello
console.log("논리 값:", check1);     // 논리 값: true

// 변수가 아닌 값 자체도 바로 출력할 수 있어요
console.log("직접 쓴 숫자:", 100);        // 직접 쓴 숫자: 100
console.log("직접 쓴 글자:", "안녕");     // 직접 쓴 글자: 안녕
console.log("직접 쓴 논리:", false);      // 직접 쓴 논리: false

이 예시를 통해 각 값 종류의 특성을 확인할 수 있습니다. 먼저 세 가지 종류의 값을 각각 다른 변수에 넣습니다. 그다음 각 값들을 화면에 출력해서 어떻게 표시되는지 살펴봅니다. 그뿐만 아니라 변수가 아닌 값 자체도 직접 사용할 수 있다는 것을 알게 됩니다. 이런 방법으로 프로그램에서 다양한 종류의 값들을 활용하는 기초를 다질 수 있습니다.

🔹 세 번째 예시: 겉보기엔 같지만 실제론 다른 값들 구별해보자

세 번째로는 겉보기에는 같아 보이지만 실제로는 완전히 다른 값들의 차이를 확인해보겠습니다.

// 겉보기엔 비슷하지만 실제론 완전히 다른 값들을 만들어봐요
let realNumber = 100;      // 진짜 숫자 100
let stringNumber = "100";  // 글자로 된 가짜 숫자 "100"

// 둘 다 출력해보면 겉보기엔 똑같아 보여요
console.log("진짜 숫자:", realNumber);      // 진짜 숫자: 100
console.log("글자 숫자:", stringNumber);    // 글자 숫자: 100

// 하지만 실제로는 완전히 다른 종류예요
console.log("이것은 진짜 숫자입니다");
console.log(realNumber);    // 100 (숫자)

console.log("이것은 글자로 된 숫자입니다");  
console.log(stringNumber);  // "100" (문자열)

// Boolean에서도 비슷한 상황이 있어요
let realBool = true;       // 진짜 참/거짓
let stringBool = "true";   // 글자로 된 가짜 참/거짓

console.log("진짜 논리값:", realBool);      // 진짜 논리값: true
console.log("글자 논리값:", stringBool);    // 글자 논리값: true

이 예시는 자바스크립트를 배우는 친구들이 가장 헷갈려하는 부분을 명확히 보여줍니다. 먼저 같은 내용이지만 종류가 다른 값들을 만듭니다. 겉보기에는 거의 똑같아 보이지만, 실제로는 완전히 다른 종류라는 것을 확인할 수 있습니다. 더 중요한 것은 각각의 특별한 성질입니다. 진짜 숫자와 글자로 된 숫자, 진짜 Boolean과 글자로 된 Boolean은 서로 다른 특성을 가지고 있다는 것을 확인할 수 있습니다.

🔄 세 가지 값 사용하는 순서 정리하기

지금까지 학습한 값 사용 과정을 자연스럽게 정리해보겠습니다.

첫 번째 단계는 값 만들기입니다. 숫자, 글자, 참/거짓 값을 적절한 방법으로 변수에 저장하는 것입니다. 이때 각 값 종류의 특별한 규칙을 정확히 지켜야 합니다.

두 번째 단계는 값의 특성 파악하기입니다. 각 값이 어떤 종류인지, 어떤 특별한 능력을 가지고 있는지 이해하는 것입니다. 이는 프로그램이 예상대로 동작하는지 이해하는 중요한 과정입니다.

세 번째 단계는 값별 특별한 능력 활용하기입니다. 각 값 종류의 고유한 특성에 맞게 값을 사용하는 것입니다. 숫자는 계산에, 글자는 텍스트 표시에, 참/거짓은 상태 표현에 활용합니다.

마지막으로 가장 중요한 것은 비슷해 보이는 값들 구별하기입니다. 숫자 100과 글자 "100"처럼 겉보기에는 비슷해 보이지만 실제로는 완전히 다른 값들의 차이를 명확히 이해하는 것이 중요합니다.

🧠 자주 하는 실수와 주의할 점

세 가지 값을 사용할 때 친구들이 자주 하는 실수들을 알아보고, 어떻게 피할 수 있는지 함께 배워보겠습니다.

❌ 실수 1: 글자를 따옴표 없이 만들려고 하기

let name = 철수; // SyntaxError! 글자는 따옴표로 감싸야 해요
let name = "철수"; // 올바른 방법이에요

이런 실수가 생기는 이유는 자바스크립트가 따옴표 없는 철수를 변수 이름으로 생각하기 때문입니다. 하지만 철수라는 변수는 아직 만들어지지 않았으므로 에러가 발생하죠. 글자는 반드시 따옴표(", ', `)로 감싸야 한다는 규칙을 기억해주세요.

❌ 실수 2: 숫자와 글자를 헷갈리기

let age = "12";  // 이건 글자 "12"예요, 숫자 12가 아니에요!
let age = 12;    // 이게 진짜 숫자 12예요

이는 정말 흔한 실수입니다. 겉보기에는 똑같아 보이지만, 따옴표가 있으면 글자이고 없으면 숫자입니다. 글자 "12"와 숫자 12는 완전히 다른 종류의 값이라는 것을 기억해주세요.

❌ 실수 3: Boolean을 따옴표로 감싸서 글자로 만들어버리기

let isStudent = "true";  // 이건 글자 "true"예요
let isStudent = true;    // 이게 진짜 참/거짓 true예요

true와 false는 자바스크립트의 특별한 단어입니다. 따옴표로 감싸면 그냥 글자가 되어버립니다. 진짜 Boolean으로 사용하려면 따옴표 없이 true와 false를 정확한 단어로 써야 합니다.

📦 기본 연습문제

이제 배운 내용을 연습 문제를 통해서 확실히 익혀보겠습니다. 손으로 직접 써보고 실행해보는 시간입니다. 마치 새로운 악기를 배울 때 계속 연주해봐야 손에 익는 것처럼, 코딩도 직접 써보고 실행해봐야 우리 것이 됩니다. 천천히, 하나씩 해보겠습니다.

연습문제 1: 나의 정보를 세 가지 값 종류로 모두 담아보자

// Number - 내 나이를 숫자 변수에 넣어요
let myAge = 12;           

// String - 내 이름을 글자 변수에 넣어요
let myName = "지영";      

// Boolean - 수학을 좋아하는지 참/거짓 변수에 넣어요
let likeMath = true;      

// 각 변수의 값들을 하나씩 꺼내서 확인해봐요
console.log(myAge);    // 12가 나타나요
console.log(myName);   // "지영"이 나타나요
console.log(likeMath); // true가 나타나요

이 연습을 통해 세 가지 기본 값 종류를 모두 사용하는 방법을 익힐 수 있습니다.

연습문제 2: 각 값의 특성을 확인해보자

// 세 가지 값을 각각 만들어요
let numberValue = 50;        // 숫자
let stringValue = "Hello";   // 글자
let booleanValue = true;     // 참/거짓

// 각 값들을 설명과 함께 출력해봐요
console.log("이것은 숫자입니다:", numberValue);
console.log("이것은 글자입니다:", stringValue);
console.log("이것은 논리값입니다:", booleanValue);

이 문제는 각 값의 특성을 구별하는 연습을 하는 데 도움이 됩니다.

연습문제 3: 겉보기엔 같지만 실제론 다른 값들을 구별해보자

// 겉보기엔 비슷하지만 종류가 다른 값들을 만들어요
let realAge = 123;      // 진짜 숫자
let fakeAge = "123";    // 글자로 된 가짜 숫자
let realBool = false;   // 진짜 참/거짓

// 각각을 설명과 함께 출력해봐요
console.log("진짜 숫자:", realAge);
console.log("글자 숫자:", fakeAge);
console.log("진짜 논리값:", realBool);

이 연습문제를 통해서 겉보기에는 비슷해 보이지만 실제로는 다른 값들을 구별하는 능력을 기를 수 있습니다.

🤔 연습문제

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 값 종류에 대한 이해를 확인해보겠습니다. 답을 바로 찾으려 하지 마시고, 천천히 생각해보는 시간을 가져보세요. 때로는 틀려도 괜찮습니다. 그것도 배움의 한 과정이니까요.

문제 1: 올바른 글자 만들기 찾기

다음 중 올바른 글자 만들기는?

A) let text = Hello;
B) let text = "Hello";
C) let text = 'Hello';
D) let text = \Hello`;`

정답: B, C, D 모두 맞습니다.

해설: 글자는 큰따옴표("), 작은따옴표('), 백틱(`) 모두 사용 가능합니다. A는 따옴표가 없어서 자바스크립트가 변수 이름으로 생각하려고 하지만, Hello라는 변수가 만들어지지 않았으므로 에러가 발생합니다.

문제 2: 값의 종류 구별하기

다음 코드에서 어떤 값들이 출력될까요?

console.log("123");
console.log(123);
console.log(true);
console.log("true");

정답: 첫 번째는 문자열 "123", 두 번째는 숫자 123, 세 번째는 논리값 true, 네 번째는 문자열 "true"

해설: 따옴표로 감싼 것은 글자이고, 따옴표 없는 것은 숫자나 논리값입니다. 이는 자바스크립트에서 값 종류를 구분하는 가장 기본적인 방법입니다.

🔄 이전 단원 복습하기

값의 종류를 잘 이해했다면, 이제 저번에 배운 변수 선언에 대해서도 기억하고 있는지 확인해볼까요?

복습문제 1: 변수 선언 방법 기억하기

세 가지 변수 선언 방법 var, let, const 중에서 값을 바꿀 수 없는 것은?

정답: const

해설: const로 만든 변수는 한 번 값을 정하면 절대 바꿀 수 없습니다. var와 let은 값을 바꿀 수 있지만, const는 영원히 같은 값을 유지합니다.

복습문제 2: 올바른 변수 선언과 값 할당

다음 중 올바른 const 사용법은?

A) const name; name = "철수";
B) const name = "철수";
C) const name = "철수"; name = "영희";

정답: B

해설: const는 변수를 만들 때 반드시 값을 함께 넣어야 하고(A가 틀린 이유), 한 번 정한 값은 바꿀 수 없습니다(C가 틀린 이유). B처럼 만들면서 동시에 값을 넣는 것이 올바른 방법입니다.

💡 심화 복습 문제

이제 정말 깊이 있게 데이터 타입을 이해했는지 확인해보는 문제들입니다.

심화문제 1: 데이터 타입의 특징 정리하기

Number, String, Boolean의 특징을 각각 한 줄로 설명해보세요.

정답: Number는 계산할 수 있는 숫자, String은 글자를 저장하고 표시할 수 있는 문자열, Boolean은 참 또는 거짓만 나타내는 논리값

해설: 각 데이터 타입은 고유한 특성과 능력을 가지고 있습니다. 이를 정확히 이해하면 적절한 상황에서 올바른 타입을 선택할 수 있습니다.

심화문제 2: 올바른 Boolean 값 찾기

다음 중 올바른 Boolean 값은?

let a = true;
let b = "false";  
let c = 0;
let d = false;

정답: a와 d

해설: true와 false는 따옴표 없이 써야 진짜 Boolean입니다. "false"는 문자열이고, 0은 숫자입니다.

심화문제 3: 값 종류 구별 문제

다음 중 숫자인 것을 모두 골라보세요.

A) 42 B) "42" C) 3.14 D) true

정답: A, C

해설: 42와 3.14는 숫자이고, "42"는 문자열, true는 불린형입니다.

심화문제 4: 에러 찾기

다음 코드에서 에러가 나는 부분은?

let name = "민수";
let age = 12;
let height = "160.5";
let student = True;

정답: 마지막 줄

해설: Boolean 값은 true (소문자)여야 합니다. True는 정의되지 않은 변수라서 에러가 납니다.

심화문제 5: 데이터 타입 활용 방법

각 데이터 타입을 어떤 상황에서 사용하면 좋을지 예시를 들어보세요.

정답: Number는 나이, 점수, 가격 등 계산이 필요한 값에 사용, String은 이름, 주소, 메시지 등 텍스트 정보에 사용, Boolean은 참석 여부, 완료 상태 등 예/아니오로 답할 수 있는 것에 사용

해설: 각 타입의 특성을 이해하고 적절한 상황에서 사용하는 것이 중요합니다.

✅ 소단원 검토 체크리스트

이 단원에서 배운 내용들을 모두 이해했는지 확인해보겠습니다!

체크 항목 확인
데이터 타입이 무엇인지 쉬운 말로 설명할 수 있습니다 ☐
Number, String, Boolean의 차이점을 알고 있습니다 ☐
각 타입의 올바른 문법을 사용할 수 있습니다 ☐
숫자와 문자열의 차이를 구별할 수 있습니다 ☐
Boolean 값을 올바르게 사용할 수 있습니다 ☐
자주하는 실수들을 피할 수 있습니다 ☐
각 타입을 적절한 상황에서 사용할 수 있습니다 ☐

지금까지 자바스크립트의 세 가지 기본 값 종류에 대해 자세히 알아보았습니다. Number, String, Boolean은 앞으로 여러분이 프로그래밍을 하면서 가장 자주 사용하게 될 값들입니다. 각 값의 특별한 능력과 올바른 사용법을 잘 기억해두시면, 더 복잡한 프로그램을 만들 때도 큰 도움이 될 것입니다!


🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작