[JS] 변수의 타입 (원시형 VS 참조형)

자바스크립트에서 변수의 타입은 크게 2가지로 나눌 수 있습니다.
원시형(Primitive Types)과 참조형(Reference Types)

2가지 타입의 차이점

• 원시형이 할당될 시점에는 변수에 값(Value)가 저장됩니다.
• 참조형이 할당될 시점에는 저장소의 주소값(Reference)가 저장됩니다.

---

원시형(Primitive Types)

객체가 아니면서 method를 가지지 않는 6가지의 타입이 존재합니다.

원시 자료형은 모두 1개의 데이터만을 담고 있습니다.

string, number,boolean,null,undefined, symbol

이때 null 은 원시타입과 거의 같다시피 사용되지만 엄연히 객체이긴 하지만, 

빈 참조를 나타내는데 자주 사용됩니다.

1.  숫자(Number)

정수와 부동 소수점 숫자를 포함합니다.

모든 숫자는 64비트의 부동 소수점 형식으로 저장됩니다.

let age = 30;
let temperature = 25.5;

 

2.  문자열(String)

텍스트 데이터를 나타냅니다. 

작은따옴표(' ') 또는 큰 따옴표(" ")로 둘러싸여 있습니다.

 

let name = "Code:J";
let message = 'Hello, JavaScript!';

 

3. 불리언(Boolean)

참(true) 또는 거짓(flase) 값을 나타냅니다.

주로 조건식과 논리 연산에서 사용됩니다.

let isTrue = true;
let isFalse = false;
let flag = true & false;

 

4. Null

값이 없음을 나타내는 특별한 값입니다.

변수가 존재하지만 어떠한 값도 가지고 있지 않습니다.(공백은 Null이 아닙니다!)

 

의도적으로 값이 비어있음을 표현하기 위하여 null이라는 것이 들어가 있는 것입니다.

 

let emptyValue = null;

5. Undefined

변수가 정의되지 않았거나 값이 할당되지 않은 변수를 나타냅니다.

 

let undefinedValue;

6. 심벌(Symbol)

고유하고 변경 불가능한 값으로 , 객체 속성의 키로 사용될 수 있습니다.

 

let uniqueKey = Symbol("unique");

---

참조형(Reference Types)

자바스크립트에서는 원시 자료형이 아닌 모든 것은 참조형입니다.

참조형은 원시형 데이터의 집합입니다.

함수(function(){}), 배열([]), 객체({}) 이 대표적인 예시입니다.

참조형을 변수에 할당할 때는 주소를 저장합니다.

참조형은 고정된 크기의 저장소가 아니기 때문에, 데이터를 저장하기 위해 변수가 아닌 다른 곳에 데이터를 저장하고 변수에는 그 주소의 주소값만 할당됩니다.

 

1. 객체(Object)

여러 속성을 포함할 수 있는 Container입니다.

속성은 Key-Value 쌍으로 이루어져 있습니다.

이때 객체는 배열, 함수, 클래스 등을 모두 포함합니다.

 

let person = {
    firstName: "Code",
    lastName: "J",
    age: 28
};

2.  배열(Array)

여러 개의 값이 순서대로 나열된 리스트를 나타냅니다.

특징은 배열의 각 항목들은 Index로 접근할 수 있습니다.

 

let colors = ["red", "green", "blue"];

3.  함수(Function)

재사용이 가능한 코드 블록을 의미합니다.

함수는 매개변수를 받아들이고, 코드 블록을 실행한 후 결과를 반환할 수 있습니다.

 

function greet(name) {
    console.log(`Hello, ${name}!`);
}

4.  날짜(Date)

날짜와 시간 정보를 다루는 데 사용되는 객체입니다.

let currentDate = new Date();

 

5. 맵(Map)과 셋(Set)

각각 Key-Value 쌍과 고유한 값들의 집합을 나타내는 객체입니다.

 

let userMap = new Map();
userMap.set("username", "john_doe");

let uniqueNumbers = new Set([1, 2, 3, 4, 5]);

6.  클래스(Class) 

객체를 생성하기 위한 템플릿으로, 프로퍼티와 메서드를 정의할 수 있습니다.

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    sayHello() {
        console.log(`Hello, ${this.firstName} ${this.lastName}!`);
    }
}

let person = new Person("Alice", "Smith");

7. 참조(Reference)

객체나 배열 등을 가리키는 변수입니다.

실제 데이터는 메모리 상에 저장된 객체 내에 있으며,

참조 변수는 해당 객체를 가리키게 됩니다.

let obj1 = { value: 10 };
let obj2 = obj1; // obj2는 obj1을 가리키는 참조
obj2.value = 20;
console.log(obj1.value); // 20

---

요약 :

참조형 변수는 값을 저장하는 것이 아니라 메모리 주소를 저장하고,

해당 주소를 통해 실제 데이터에 접근합니다.

 

원시형 변수는 실제 값을 변수에 직접 저장합니다.

 

자바 스크립트는 동적 타입 언어이므로, 변수의 타입은 런타임 중에 결정됩니다.

따라서 변수를 선언할 때 타입을 명시할 필요가 없으며, 값의 할당에 따라 타입이 자동으로 결정됩니다.

 

이러한 특징으로 인해 자바스크립트는 유연하게 변수를 다룰 수 있는 장점도 있지만, 때로는 예기치 않은 동작을 초래할 수 있다는 단점 이 있습니다.