변수

1. 변수

자바스크립트에서 변수는 데이터를 저장하고 나중에 재사용하기 위해 이름을 붙인 저장 공간입니다. var, let, const 키워드를 사용하여 변수를 선언할 수 있으며, 각각의 키워드는 변수의 스코프(유효 범위)와 재할당 가능 여부에 따라 다르게 동작합니다. 예를 들어, let은 블록 스코프를 가지며 재할당이 가능하고, const는 블록 스코프를 가지지만 재할당이 불가능한 상수를 선언할 때 사용합니다. 변수에는 숫자, 문자열, 객체, 배열, 함수 등 다양한 데이터를 저장할 수 있으며, 자바스크립트는 동적 타입 언어이기 때문에 변수에 저장된 값의 자료형은 언제든지 바뀔 수 있습니다.

let name = "apple";

 

1. 변수 선언 방법

자바스크립트에서는 변수를 만들 때 다음 세 가지 키워드를 사용합니다:

var	예전 방식. 함수 스코프를 가짐. 지금은 잘 사용하지 않음.
let	블록 스코프를 가짐. 값 재할당 가능. 가장 일반적으로 사용됨.
const	블록 스코프를 가짐. 값 재할당 불가능. 변하지 않는 값을 저장할 때 사용.

let age;

 

2. 값을 저장

선언한 변수에 값을 넣으려면 대입 연산자 =를 사용합니다. 이걸 "값을 대입한다" 또는 "할당한다"라고 표현합니다.

age = 20;

 

3. 선언과 대입을 한 줄로

자바스크립트에서는 선언과 동시에 값을 넣을 수도 있습니다.

let name = "apple";
const PI = 3.14;

• name이라는 변수에 "apple"라는 문자열이 저장됩니다.
• PI는 상수이기 때문에 값 변경이 불가능합니다. (const는 한번만 저장 가능)

 

4. 저장한 값을 사용

변수에 저장된 값은 언제든지 이름을 이용해 꺼내 쓸 수 있습니다.

console.log(name); // 출력: apple

 

 

2. 자료형

자료형(Data Type)은 변수에 저장할 수 있는 값의 종류를 의미합니다. 자바스크립트에서는 숫자, 문자열, 불리언처럼 간단한 값을 저장하는 기본형(Primitive Type)과, 객체나 배열처럼 복잡한 데이터를 저장하는 참조형(Reference Type)으로 나뉩니다. 자료형을 이해하면 변수에 어떤 값을 넣을 수 있고, 그 값이 어떻게 저장되고 동작하는지를 알 수 있어 코드의 안정성과 예측 가능성이 높아집니다. 즉, 자료형은 데이터의 성격을 정의하는 기준이라 할 수 있습니다.

 

1. 기본형 (Primitive Type)

기본형은 값 자체를 저장하며, 변경 불가능한(immutable) 특성을 가집니다. 스택(Stack) 메모리에 저장됩니다. 기본형은 스택에 "값 자체"가 저장됩니다

let a = 100;
let b = a;
b = 200;

• a라는 변수는 스택에 100이라는 값을 그대로 저장합니다.
• b = a는 100이라는 값을 복사해서 b에 저장합니다.
• b를 바꿔도 a는 전혀 영향을 받지 않습니다.

 

1.1 number – 숫자

• 정수, 실수, 음수, 양수 모두 포함합니다.

1.2 string – 문자열

• 텍스트 데이터를 표현합니다.
• 큰따옴표(" "), 작은따옴표(' '), 백틱(```)으로 감쌉니다.

1.3 boolean – 참 또는 거짓

• true 또는 false 두 가지 값만 가질 수 있습니다.
• 조건문에서 자주 사용됩니다.

1.4 undefined – 값이 정의되지 않음

• 변수를 선언했지만 값을 주지 않았을 때 자동으로 undefined가 됩니다.

1.5 null – 아무 값도 없음

• 의도적으로 “값이 없다”는 것을 나타냅니다.

1.6 symbol – 고유한 식별자

• 유일한 값이 필요한 경우에 사용됩니다.
• 잘 쓰이진 않지만, 객체의 숨겨진 키 등에 사용됩니다.

1.7 bigint – 아주 큰 정수

• 일반 number로 표현할 수 없는 큰 정수를 다룰 때 사용합니다.
• 숫자 뒤에 n을 붙입니다.

 

2. 참조형 (Reference Type)

참조형은 값이 아니라 주소(참조)를 저장합니다. 힙(Heap) 메모리에 저장되며, 값은 변경 가능합니다.(mutable)

let obj1 = { name: "apple" };
let obj2 = obj1;
obj2.name = "banana";

• 객체 { name: "apple" }는 힙(Heap)이라는 공간에 저장됩니다.
• obj1은 그 힙의 주소값을 스택에 저장합니다.
• obj2 = obj1은 주소값을 복사해서 저장하므로 같은 객체를 가리킵니다.
• 그래서 obj2.name = "banana"을 바꾸면 obj1.name도 바뀐 것처럼 보입니다.

 

2.1 object – 여러 값을 하나로 묶는 자료형

• {} 중괄호 안에 키(key)와 값(value) 쌍으로 구성됩니다.

2.2 array – 순서가 있는 값들의 집합

• 대괄호 []를 사용합니다.
• 값은 어떤 타입이든 섞여도 됩니다.

2.3 function – 실행 가능한 코드 블록

• 함수도 객체이지만, 호출할 수 있다는 점에서 특별한 역할을 합니다.

2.4 date, regexp, map, set, class 등

• 자바스크립트에는 기본 객체 외에도 다양한 내장 객체가 존재합니다.

/* 
    기본형(Primitive Type)
*/
let num = 20; // 숫자
let str = "Hello, JS!"; // 문자열
let isReady = true; // 불리언
let nothing = null; // null
let notDefined; // undefined (선언만 하고 값 없음)
let bigNumber = 1234567890123456789012345678901234567890n; // BigInt
let unique = Symbol("id"); // Symbol

console.log("기본형 타입 출력:");
console.log("num:", num);
console.log("str:", str);
console.log("isReady:", isReady);
console.log("nothing:", nothing);
console.log("notDefined:", notDefined);
console.log("bigNumber:", bigNumber);
console.log("unique:", unique);

/* 
    참조형(Reference Type)
*/
let person = { name: "apple", age: 20 }; // 객체
let numbers = [1, 2, 3, 4, 5]; // 배열
let greet = function () {
  // 함수
  return "안녕하세요!";
};
let now = new Date(); // 날짜 객체

console.log("\n참조형 타입 출력:");
console.log("person:", person);
console.log("numbers:", numbers);
console.log("greet():", greet());
console.log("now:", now);

 

// 기본형
let x = 10;
let y = x;
y = 20;
console.log(x); // 10

// 참조형
let a = { value: 1 };
let b = a;
b.value = 2;
console.log(a.value); // 2

 

 

3. 스택과 힙

1. 스택의 특징

• 순서대로 쌓고 꺼내는 구조 (Last-In, First-Out → LIFO)
• 빠르고 효율적인 저장
• 작고 단순한 값들 저장 (예: 숫자, 문자, 불리언 등)
• 함수 호출 시 실행 정보(변수, 매개변수 등)도 여기에 저장됨

2. 힙의 특징

• 크고 복잡한 데이터 저장 (예: 객체, 배열, 함수 등)
• 구조가 자유롭지만 속도는 느림
• 값은 힙에 저장되고, 변수에는 그 주소(참조값)만 저장됨
• 가비지 컬렉터가 불필요해진 데이터를 자동 정리함

 

가비지 컬렉션(Garbage Collection)

자바스크립트는 자동으로 사용하지 않는 메모리를 정리해 줍니다. 이를 가비지 컬렉션이라고 부릅니다. 예를 들어 더 이상 참조되지 않는 객체는 자바스크립트가 알아서 메모리에서 제거해 줍니다. 자바스크립트 엔진(예: V8)은 알아서 주기적으로 다음을 반복합니다:

1. 현재 실행 중인 코드(루트)에서 도달 가능한 변수 추적
2. 힙 메모리에서 그 변수들이 참조하는 모든 객체 탐색
3. 그 외에 도달 불가능한 객체는 메모리에서 제거

let person = { name: "apple" };
let copy = person;
person = null;

• 객체 { name: "apple" }는 여전히 copy가 참조하므로 살아 있음
• 하지만 copy = null;까지 하면 더 이상 누구도 참조하지 않음
• → 가비지 컬렉션 대상!

 

 

4. 타입 변환

자바스크립트에서 타입 변환(Type Conversion)이란 값의 자료형이 자동 또는 수동으로 다른 타입으로 바뀌는 현상을 말합니다. 자바스크립트는 동적 타입 언어이기 때문에, 상황에 따라 문자열이 숫자로, 숫자가 불리언으로 자동 변환될 수 있습니다. 이처럼 자바스크립트가 코드 실행 중에 자동으로 타입을 바꾸는 것을 암시적(자동) 타입 변환이라 하고, 개발자가 직접 String(), Number() 같은 함수를 사용해 변환하는 것을 명시적(수동) 타입 변환이라고 합니다.

console.log(10 + '문자열')
console.log('3' * '5')
console.log(1 - '일') // NaN

const num1 = '10'
const num2 = '3.5'
console.log(`현재 num1의 타입: ${typeof(num1)}`)
console.log(`Number(num1)의 타입: ${typeof(Number(num1))}`)
console.log(`String(num1)의 타입: ${typeof(String(num1))}`)
console.log(`Boolean(num1)의 타입: ${typeof(Boolean(num1))}, ${Boolean(num1)}`)
console.log(`Object(num1)의 타입: ${typeof(Object(num1))}`)
console.log(`parseInt(num2)의 타입: ${typeof(parseInt(num2))}, ${parseInt(num2)}`)
console.log(`parseFloat(num2)의 타입: ${typeof(parseFloat(num2))}, ${parseFloat(num2)}`)

 

NaN

자바스크립트에서 NaN은 "Not-a-Number", 즉 숫자가 아님을 의미하는 특별한 값입니다. 수학적으로 말이 안 되는 계산이나 숫자로 변환할 수 없는 값을 처리할 때 자동으로 생성됩니다. 예를 들어, 0 / 0, "hello" * 3, parseInt("abc") 같은 연산은 모두 NaN을 반환합니다. 특이하게도 NaN은 자바스크립트에서 number 타입에 속하면서도, 자기 자신과조차 같지 않은 유일한 값입니다 (NaN !== NaN은 true). 그래서 NaN인지 확인할 때는 isNaN()이나 Number.isNaN() 함수를 사용해야 합니다. NaN은 숫자 연산에서 오류를 나타내는 표시로 사용되며, 에러가 발생하지 않고 조용히 처리되는 자바스크립트의 특징 중 하나입니다.