변수, 데이터 타입, 연산자

웹 페이지를 정적으로 보여주는 단계를 넘어서려면 자바스크립트(JavaScript)가 필수적입니다.

자바스크립트는 브라우저가 이해하고 실행할 수 있는 프로그래밍 언어이며, 화면에 동작과 반응을 부여하는 핵심 역할을 맡습니다.

프로그래밍에서 우리가 다루는 정보를 데이터라고 부릅니다.

데이터를 저장하고 분류하며 조작하는 방법을 이해하는 것이 학습의 출발점입니다.

이 장에서는 자바스크립트 데이터 처리의 기본 단위인 변수(Variable), 데이터 타입(Data Type), 연산자(Operator)를 실전 코드와 함께 기준 중심으로 정리합니다.

let a = 3;
let b = a;
b = 4;
// a: 3, b: 4

const a = { n: 3 };
const b = a;
b.n = 4;
// a.n: 4, b.n: 4

let a = 3;
let b = a;
b = 4;
// a: 3, b: 4

const a = { n: 3 };
const b = a;
b.n = 4;
// a.n: 4, b.n: 4

변수: 데이터를 담는 그릇

예제는 브라우저 개발자 도구의 콘솔에서 실행할 수 있습니다. console.log()는 개발자 도구에 값을 기록하며, HTML 본문을 바꾸지는 않습니다. 같은 이름의 let·const를 다시 선언하면 오류가 날 수 있으므로 예제별로 새 페이지나 별도 스크립트에서 실행하세요. 문자열 예제의 age처럼 앞에서 선언한 값을 이어 쓰는 부분은 필요한 선언부터 함께 실행합니다.

우리가 요리를 할 때, 설탕, 소금, 밀가루와 같은 재료들을 각자의 용기에 담아 보관하듯이, 프로그래밍에서도 다양한 데이터를 저장할 공간이 필요합니다.

이때 사용되는 것이 바로 변수입니다.

처음에는 변수를 값을 읽고 쓰기 위한 이름으로 이해하면 좋습니다. 좀 더 정확하게는 이름이 값과 연결되는 바인딩(binding)이며, 아래 그릇 비유가 엔진의 실제 메모리 배치를 그대로 뜻하는 것은 아닙니다.

선언과 초기화가 끝난 뒤 이름으로 값을 읽을 수 있습니다. 새 값을 대입할 수 있는지는 let과 const의 규칙에 따라 달라집니다.

자바스크립트에서는 변수를 선언하는 여러 가지 방법이 있습니다.

가장 일반적으로 사용되는 let과 const 키워드를 중심으로 살펴보겠습니다.

let: 유연한 변수 선언

let 키워드는 변수를 선언할 때 사용되며, 한 번 선언된 변수에 새로운 값을 다시 할당할 수 있습니다.

즉, 변수의 값이 변경될 수 있다는 의미입니다.

let userName = "김철수"; // userName이라는 변수를 선언하고 "김철수"라는 문자열을 할당했습니다.
console.log(userName);   // 결과: 김철수

userName = "이영희";    // userName 변수에 새로운 값 "이영희"를 다시 할당했습니다.
console.log(userName);   // 결과: 이영희

위 예시에서 userName이라는 변수는 처음에는 김철수라는 값을 가지고 있었지만, 나중에 이영희로 값이 변경되었습니다.

이처럼 let은 변수의 값이 동적으로 변할 필요가 있을 때 유용하게 사용됩니다.

const: 재할당하지 않는 변수 선언

const는 변수 이름과 값의 연결인 바인딩(binding)을 재할당할 수 없게 선언합니다.

다른 값을 다시 대입할 수는 없지만, 연결된 값이 객체라면 그 객체의 속성을 바꾸는 것은 가능합니다.

예상치 못한 재할당을 막아 코드의 의도를 분명하게 할 때 사용합니다.

const PI = 3.141592; // PI라는 상수를 선언하고 원주율 값을 할당했습니다.
console.log(PI);     // 결과: 3.141592

// PI = 3.14; // 이 코드는 오류를 발생시킵니다. 상수의 값은 변경할 수 없습니다.

const는 나중에 다른 값으로 재할당하지 않을 변수를 선언할 때 사용합니다.

예를 들어, 웹 사이트의 로고 경로, 고정된 메시지, 수학적 상수 등을 선언할 때 const를 사용하면 좋습니다.

예시

const settings = { theme: "light" };
settings.theme = "dark";
console.log(settings.theme); // dark
// settings = { theme: "light" }; // 재할당이므로 TypeError

settings.theme에 대입하는 것은 같은 객체의 속성 변경입니다. settings 자체에 대입하는 것은 바인딩의 재할당입니다. 그림의 두 화살표가 같은 객체로 모이는 이유도 두 이름이 객체 하나를 공유하기 때문입니다.

• 다른 값으로 재할당하지 않을 경우에는 const를 사용하는 것을 권장합니다. 객체 속성을 바꾸더라도 변수 자체를 재할당하지 않으면 const를 사용할 수 있습니다.
• 다른 값으로 재할당할 필요가 있는 경우에는 let을 사용합니다.

변수 이름 규칙: 명확하고 의미 있게

변수와 상수의 이름을 지을 때에는 몇 가지 규칙과 권장 사항이 있습니다.

• 문자, 숫자, 밑줄(_), 달러 기호($)만 사용 가능합니다.
• 숫자로 시작할 수 없습니다. (예: 1name은 불가능합니다.)
• 예약어(JavaScript에서 특별한 의미를 가지는 단어)는 사용할 수 없습니다. (예: if, for, function, let, const 등)
• 의미 있는 이름을 사용하세요. (예: a, b보다는 userName, totalPrice와 같이 변수의 목적을 명확히 알 수 있는 이름을 사용합니다.)
• 카멜 케이스(camelCase)를 권장합니다. 첫 단어는 소문자로 시작하고, 이후 단어의 첫 글자는 대문자로 쓰는 방식입니다. (예: myNewVariable, totalScore)

데이터 타입: 데이터의 종류

변수에 저장할 수 있는 값은 숫자가 될 수도 있고, 문자가 될 수도 있으며, 참/거짓을 나타내는 값이 될 수도 있습니다.

이처럼 데이터가 가질 수 있는 형태를 데이터 타입이라고 합니다.

자바스크립트는 다양한 종류의 데이터 타입을 제공하며, 각 타입은 데이터를 저장하고 처리하는 방식에 영향을 미칩니다.

주요 데이터 타입들을 살펴보겠습니다.

원시 타입 (Primitive Types)

원시 타입의 값은 그 값 자체를 수정할 수 없는 불변 값입니다. let 변수에 새 문자열을 대입할 수 있다는 사실과 구분하세요. 기존 문자열 자체를 바꾸는 것이 아니라 그 이름을 다른 문자열에 연결하는 것입니다. 원시 타입은 다음 일곱 종류입니다.

• Number (숫자): 정수와 실수를 모두 포함합니다.

  let age = 30;         // 정수
  let pi = 3.14;        // 실수
  let temperature = -5; // 음수

• String (문자열): 텍스트 데이터를 나타냅니다. 작은따옴표(' '), 큰따옴표(" "), 또는 백틱(`)으로 감싸서 표현합니다.

  let name = "홍길동";
  let greeting = '안녕하세요!';
  let message = `내 나이는 ${age}살 입니다.`; // 백틱은 템플릿 리터럴을 허용하여 변수를 문자열 안에 쉽게 포함할 수 있습니다.
  console.log(message); // 결과: 내 나이는 30살 입니다.

• Boolean (불리언): 논리적인 참(true) 또는 거짓(false)을 나타냅니다. 조건문에서 매우 유용하게 사용됩니다.

  let isAdult = true;
  let hasLicense = false;

• Undefined (정의되지 않음): 변수를 선언하고 값을 할당하지 않았을 때 자동으로 주어지는 값입니다. 값이 할당되지 않았다는 의미입니다.

  let unknownVar;
  console.log(unknownVar); // 결과: undefined

• Null (널): 값이 없음을 명시적으로 나타낼 때 사용합니다. undefined와 달리 개발자가 의도적으로 값을 비워둘 때 할당합니다.

  let selectedItem = null; // 선택된 아이템이 없음을 명시적으로 나타냅니다.

• BigInt (큰 정수): 123n처럼 정수 뒤에 n을 붙여 표현합니다. 큰 정수를 정확하게 다루기 위한 타입이며 Number와 별개입니다. 예를 들어 typeof 123n은 "bigint"입니다. 1n + 1처럼 Number와 섞어 산술 계산하면 오류가 나므로 이 장의 일반 숫자 계산은 Number끼리 합니다.
• Symbol (심볼): ES6에서 새로 추가된 타입으로, 고유하고 변경 불가능한 값을 생성할 때 사용됩니다. 주로 객체의 속성 키로 사용되어 이름 충돌을 방지하는 데 유용합니다. (초급 단계에서는 깊이 있게 다루지 않으므로, 이런 타입이 있다는 정도만 이해해도 충분합니다.)

객체 타입 (Object Type)

원시 타입 외의 모든 값은 객체(Object)입니다.

객체는 여러 데이터를 한데 묶어서 표현할 수 있는 복합적인 데이터 타입입니다.

배열, 함수 등도 모두 객체의 한 종류입니다.

객체에 대해서는 뒤이은 내용에서 더 자세히 다루게 될 것입니다.

• Object (객체): 키(key)와 값(value)의 쌍으로 이루어진 데이터의 집합입니다.

  let person = {
      name: "김민수",
      age: 25,
      isStudent: true
  };
  console.log(person.name); // 결과: 김민수

• Array (배열): 여러 개의 값을 순서대로 나열하여 저장하는 특별한 종류의 객체입니다.

  let colors = ["red", "green", "blue"];
  console.log(colors[0]); // 결과: red (배열은 0부터 시작합니다.)

• Function (함수): 특정 작업을 수행하는 코드 블록입니다. 함수도 자바스크립트에서는 값으로 취급됩니다.

  function greet(name) {
      return `안녕하세요, ${name}님!`;
  }
  console.log(greet("이유진")); // 결과: 안녕하세요, 이유진님!

어떤 변수의 데이터 타입이 궁금할 때에는 typeof 연산자를 사용할 수 있습니다.

console.log(typeof 123);           // 결과: "number"
console.log(typeof "hello");       // 결과: "string"
console.log(typeof true);          // 결과: "boolean"
console.log(typeof undefined);     // 결과: "undefined"
console.log(typeof null);          // 결과: "object" (자바스크립트의 역사적인 버그로, null은 object로 나옵니다.)
console.log(typeof {});            // 결과: "object"
console.log(typeof []);            // 결과: "object"
console.log(typeof function(){});  // 결과: "function" (함수도 객체의 일종이지만, typeof는 "function"을 반환합니다.)

연산자: 데이터를 조작하는 도구

변수에 담긴 데이터를 가져오고, 저장하는 것만큼 중요한 것이 바로 이 데이터를 가지고 다양한 작업을 수행하는 것입니다.

이때 우리는 연산자(Operator)를 사용합니다.

연산자는 하나 이상의 값을 대상으로 연산을 수행하여 새로운 값을 만듭니다.

자바스크립트의 주요 연산자들을 함께 살펴보겠습니다.

산술 연산자

산술 연산자 (Arithmetic Operators)는 수학적 계산을 수행하는 연산자입니다.

• + (덧셈): 5 + 3 결과 8
• - (뺄셈): 10 - 4 결과 6
• * (곱셈): 2 * 6 결과 12
• / (나눗셈): 15 / 3 결과 5
• % (나머지 연산): 10 % 3 결과 1 (10을 3으로 나눈 나머지)
• ** (거듭제곱): 2 ** 3 결과 8 (2의 3제곱)

let num1 = 10;
let num2 = 3;

console.log(num1 + num2); // 결과: 13
console.log(num1 - num2); // 결과: 7
console.log(num1 * num2); // 결과: 30
console.log(num1 / num2); // 결과: 3.3333333333333335
console.log(num1 % num2); // 결과: 1
console.log(2 ** 3); // 결과: 8

덧셈 연산자는 숫자뿐만 아니라 문자열에도 사용될 수 있습니다.

이때는 두 문자열을 연결하는 역할을 합니다.

let firstName = "길동";
let lastName = "홍";
let fullName = lastName + firstName; // 문자열 연결
console.log(fullName); // 결과: 홍길동

console.log("숫자" + 123); // 결과: "숫자123" (숫자가 문자열로 변환되어 연결됩니다.)

Number는 이진 부동소수점으로 계산하므로 0.1 + 0.2는 0.30000000000000004가 됩니다. 화면의 소수 표시와 내부 계산값은 구분해야 합니다. 아래 금액 연습은 이 문제를 피하려고 안전한 크기의 정수 원 단위만 사용합니다.

할당 연산자

할당 연산자 (Assignment Operators)는 변수에 값을 할당할 때 사용하는 연산자입니다.

• = (할당): let x = 10;
• += (더하고 할당): x += 5;는 x = x + 5;와 같습니다.
• -= (빼고 할당): x -= 2;는 x = x - 2;와 같습니다.
• *= (곱하고 할당): x *= 3;는 x = x * 3;와 같습니다.
• /= (나누고 할당): x /= 2;는 x = x / 2;와 같습니다.
• %= (나머지 계산 후 할당): x %= 3;는 x = x % 3;와 같습니다.

let score = 100;
score += 50; // score는 150이 됩니다.
console.log(score); // 결과: 150

score /= 3;  // score는 50이 됩니다.
console.log(score); // 결과: 50

비교 연산자

비교 연산자 (Comparison Operators)는 두 값을 비교하여 true 또는 false를 반환하는 연산자입니다.

조건문에서 주로 사용됩니다.

• == (동등): 타입이 다르면 정해진 변환 규칙을 적용하여 비교
• === (일치): 값과 타입이 모두 같은지 비교
• != (부등): ==로 비교한 결과를 반대로 반환
• !== (불일치): 값 또는 타입이 다른지 비교
• > (보다 큼):
• < (보다 작음):
• >= (크거나 같음):
• <= (작거나 같음):

console.log(10 == "10"); // 결과: true (값만 비교)
console.log(10 === "10"); // 결과: false (값은 같지만 타입이 다름)

console.log(5 != "5");   // 결과: false (값만 비교, 같으므로 false)
console.log(5 !== "5");  // 결과: true (값은 같지만 타입이 다르므로 true)

console.log(7 > 5);      // 결과: true
console.log(3 < 3);      // 결과: false
console.log(8 >= 8);     // 결과: true

위 코드의 “값만 비교”라는 주석은 10과 "10"의 결과를 짧게 표현한 것입니다. ==가 타입을 무시하는 것은 아닙니다. 피연산자의 타입에 따라 정해진 변환 규칙을 적용합니다.

반면 === 연산자는 타입 변환 없이 비교합니다. 객체끼리는 속성이 같아 보여도 같은 객체를 참조해야 true입니다. Number의 NaN === NaN은 false이고, +0 === -0은 true라는 규칙도 있습니다. 따라서 모든 상황에서 단순히 “모양과 타입이 같다”로 판정하지는 않습니다.

예상치 못한 오류를 방지하기 위해 일반적으로 ===와 !==를 사용하는 것이 강력히 권장됩니다.

논리 연산자

논리 연산자 (Logical Operators)는 여러 조건을 연결할 때 사용합니다. 아래 목록과 첫 예제는 피연산자가 모두 불리언인 경우입니다.

여러 조건을 조합할 때 사용됩니다.

• && (AND): 두 피연산자 모두 true일 때 true를 반환합니다.
• || (OR): 두 피연산자 중 하나라도 true일 때 true를 반환합니다.
• ! (NOT): 피연산자의 논리 값을 반전시킵니다 (true는 false로, false는 true로).

let isRaining = true;
let hasUmbrella = false;

console.log(isRaining && hasUmbrella); // 결과: false (둘 다 true여야 true)
console.log(isRaining || hasUmbrella); // 결과: true (둘 중 하나라도 true면 true)
console.log(!isRaining);               // 결과: false (isRaining의 반대)

일반 값에 적용하면 &&와 ||의 결과가 반드시 불리언인 것은 아닙니다. 왼쪽부터 평가하면서 &&는 처음으로 거짓처럼 취급되는 값, 없으면 마지막 값을 반환합니다. ||는 처음으로 참처럼 취급되는 값, 없으면 마지막 값을 반환합니다. 결과가 결정되면 오른쪽 식은 실행하지 않는 단락 평가를 합니다.

console.log("" || "손님");  // 손님
console.log(0 || 10);        // 10: 0도 거짓처럼 취급
console.log("회원" && 3);   // 3
console.log(Boolean("0"));  // true: 빈 문자열이 아님

false, 0, -0, 0n, 빈 문자열, null, undefined, NaN은 조건에서 거짓처럼 취급됩니다. 문자열 "0"과 빈 배열 []은 참처럼 취급됩니다. 그래서 수량 0이 유효한 입력이라면 수량 || 기본수량으로 덮어쓰면 안 됩니다.

증감 연산자

증감 연산자 (Increment/Decrement Operators)란 숫자 값을 1씩 증가시키거나 감소시킬 때 사용하는 연산자입니다.

• ++ (증가): 값을 1 증가시킵니다.
• -- (감소): 값을 1 감소시킵니다.

이 연산자들은 변수 앞에 붙느냐(전위 연산자) 뒤에 붙느냐(후위 연산자)에 따라 미묘한 차이가 있습니다.

• 전위 연산 (++a, --a): 먼저 값을 증감시킨 후, 그 값을 사용합니다.
• 후위 연산 (a++, a--): 값을 먼저 사용한 후, 값을 증감시킵니다.

let count = 5;
let result1 = ++count; // count를 먼저 6으로 만들고, result1에 6을 할당
console.log(count);   // 결과: 6
console.log(result1); // 결과: 6

let num = 10;
let result2 = num++;  // result2에 먼저 10을 할당하고, num을 11로 만듭니다.
console.log(num);     // 결과: 11
console.log(result2); // 결과: 10

이러한 차이점을 이해하는 것은 코드의 동작 방식을 정확히 예측하는 데 중요합니다.

그림은 원시값의 재할당과 공유 객체의 속성 변경을 비교합니다. 수치 계산에서는 다음처럼 입력의 타입을 먼저 확인하고 계산·비교를 분리해 보세요. 입력 유효성 검사 전체를 구현한 예제는 아니며, 이 연습에서는 입력이 "3", 단가가 정수 4,000원이라고 정합니다.

변수와 연산자를 함께 사용할 때는 먼저 값의 종류를 고정하고, 그다음 변환·계산·비교 순서를 분리해 생각하면 예기치 않은 타입 변환을 줄일 수 있습니다.

직접 풀어보기

입력 문자열 "3"을 Number()로 바꾼 뒤 단가 4,000원을 곱합니다. 10,000원 이상이면 배송비가 없다는 연습 규칙입니다. 총액과 비교 결과를 예상하고, 변환 전후에 각각 + 1을 하면 무엇이 나오는지 확인하세요.

const quantityText = "3";
const quantity = Number(quantityText);
const totalPrice = quantity * 4000;
console.log(totalPrice);             // 12000
console.log(totalPrice >= 10000);    // true
console.log(quantityText + 1);       // 31: 문자열 연결
console.log(quantity + 1);           // 4: 숫자 덧셈

규칙 확인: 엄격한 비교, 논리 AND, 논리 OR.

데이터 기초 학습 정리

이 절에서는 변수, 타입, 연산자 선택이 이후 로직 설계에 어떤 영향을 주는지 실습 관점에서 정리합니다.

이번 장에서는 자바스크립트의 가장 기본적인 빌딩 블록인 변수, 데이터 타입, 그리고 연산자에 대해 깊이 있게 알아보았습니다.

데이터를 저장하고, 그 종류를 이해하며, 다양한 방법으로 데이터를 조작하는 것은 모든 프로그래밍의 핵심입니다.

이제는 자바스크립트 코드를 통해 데이터를 다루는 기본적인 준비를 마쳤습니다.