개발

js 데이터 타입 과 메모리 관리

explosion149 2024. 11. 5.
JavaScript는 다양한 데이터 타입을 지원하며, 
각 데이터 타입은 메모리에서 다른 방식으로 처리됩니다.

 

데이터 타입의 종류

JavaScript의 데이터 타입은 크게

원시 타입(Primitive Types)과

참조 타입(Reference Types)으로

나눌 수 있습니다.

 

 

원시 타입 (Primitive Types) 불변!

 

원시 데이터(Primitive Data)는 더 이상 분해할 수 없는 기본적인 데이터 유형으로, 

일반적으로 숫자, 문자, 불리언 값 등을 포함합니다. 

 

원시 타입은 변경 불가능한 값(immutable value)을 가지며,

새로운 값을 생성할 때마다 기존 값을 수정하는 것이 아니라 새로운 값을 만들어내는 특성을 가지고 있습니다.

변경 불가능한 값은 한 번 생성된 후 그 값을 변경할 수 없는 데이터 타입을 의미합니다.
이러한 값은 원본 상태를 유지하며, 값을 변경하고자 할 경우 새로운 값을 생성해야 합니다.

 

불변 객체: JavaScript에서는 const 키워드를 사용하여 변수를 선언하면 해당 변수에 재할당할 수 없지만, 

객체의 속성은 변경할 수 있습니다. 

불변성을 유지하려면 Object.freeze()와 같은 메서드를 사용하여 객체를 동결할 수 있습니다. 

이렇게 하면 객체의 속성을 변경할 수 없게 됩니다.

메모리 사용: 새로운 객체를 생성할 때마다 기존 객체는 메모리에서 지워지지 않고 남아 있습니다. 

예를 들어, 배열이나 객체를 복사할 때 새로운 참조가 생성되지만, 원본 객체는 여전히 메모리에 존재합니다.

가비지 컬렉션: JavaScript 엔진은 가비지 컬렉션을 통해 

더 이상 참조되지 않는 객체를 자동으로 메모리에서 해제합니다.

 즉, 객체가 더 이상 사용되지 않거나 참조되지 않으면, 

가비지 컬렉터가 이를 감지하고 메모리에서 제거합니다.

참조 관리: 객체가 다른 변수나 데이터 구조에 의해 참조되고 있다면, 

해당 객체는 메모리에서 지워지지 않습니다. 

따라서, 여러 곳에서 동일한 객체를 참조하고 있다면, 

그 객체는 계속 메모리에 남아 있게 됩니다.

 

 

숫자 (Number): 정수와 부동 소수점을 포함한 숫자입니다.

예: 42, 3.14

 

문자열 (String): 텍스트 데이터를 나타내며,

작은따옴표('), 큰따옴표("), 또는 백틱(`)으로 감싸서 정의합니다.

예: '안녕하세요', "Hello", `템플릿 리터럴`

 

불리언 (Boolean): true 또는 false 두 가지 값만 가질 수 있습니다.

예: true, false

 

null: 의도적으로 비어 있는 값(null)을 나타냅니다.

예: let value = null;

 

undefined: 값이 할당되지 않은 상태를 나타냅니다.

예: let x; // x는 undefined

 

심볼 (Symbol): 고유하고 변경 불가능한 값으로, 

주로 객체의 프로퍼티 키로 사용됩니다. 

ES6에서 도입되었습니다.

예: const sym = Symbol('설명');

 

 

빅인트 (BigInt): 아주 큰 정수를 표현하기 위해 ES11에서 도입된 타입으로, n을 붙여서 정의합니다.

예: const bigInt = 1234567890123456789012345678901234567890n;

 

스택 메모리

숫자, 문자열, 불리언, null, undefined, 심볼, 빅인트와 같은 원시 타입 데이터는 스택 메모리에 저장됩니다. 

이러한 데이터는 값이 직접 저장됩니다.

 

스택 메모리는 함수 호출과 관련된 지역 변수와 함수 매개 변수를 저장하는 구조입니다. 

메모리 관리가 간단하고, 할당과 해제가 빠릅니다.

let a = 10; // 숫자 10이 스택 메모리에 저장됨
let b = a;  // b는 a의 값을 복사

b = 20;     // b의 값이 변경되지만, a는 그대로 10
console.log(a); // 10
console.log(b); // 20

위 코드에서 a의 값은 스택 메모리에 저장되고, 

b는 a의 값을 복사하여 새로운 스택 메모리 공간에 저장됩니다. 

b의 값이 변경되어도 a의 값은 영향을 받지 않습니다.

 

 

 

 

참조 타입 (Reference Types)

객체 (Object): 키-값 쌍으로 데이터를 저장하는 데이터 구조입니다.

const person = {
    name: "홍길동",
    age: 30
};

 

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

const fruits = ["사과", "바나나", "오렌지"];

 

함수 (Function): 일급 객체로 취급되는 특별한 객체입니다. 

코드 블록을 실행할 수 있는 기능을 가집니다.

function greet() {
    console.log("안녕하세요");
}

 

 

날짜 (Date): 날짜와 시간을 다루기 위한 객체입니다.

const now = new Date();

 

예제

const now = new Date();

// 연도, 월, 일 추출
const year = now.getFullYear();
const month = now.getMonth() + 1; // 월은 0부터 시작하므로 1을 추가
const day = now.getDate();

// 시, 분, 초 추출
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

// 포맷팅된 날짜와 시간 출력
console.log(`현재 날짜: ${year}-${month}-${day}`);
console.log(`현재 시간: ${hours}:${minutes}:${seconds}`);

 

 

정규 표현식 (RegExp): 문자열 검색을 위한 패턴을 정의하는 객체입니다.

const regex = /abc/;

 

예제 를 보면 그냥 true false 반환 해주는 녀석이다.

const regex = /hello/;
console.log(regex.test("hello world")); // true
console.log(regex.test("hi there"));     // false

 

 

힙 메모리 (Heap Memory)

 

힙 메모리는 객체, 배열 등과 같은 참조 타입 데이터를 저장하는 메모리 영역입니다. 메모리 관리가 복잡하지만, 더 많은 메모리 공간을 제공합니다.

 

객체, 배열, 함수와 같은 참조 타입 데이터는 힙 메모리에 저장됩니다. 이 경우, 변수는 메모리의 주소(참조)를 저장합니다.

 

let obj1 = { name: "홍길동" }; // 객체가 힙 메모리에 저장됨
let obj2 = obj1;               // obj2는 obj1이 참조하는 주소를 가리킴

obj2.name = "김철수";          // obj2를 통해 name 속성을 변경

console.log(obj1.name); // "김철수"
console.log(obj2.name); // "김철수"

 

메모리 관리

 

스택 메모리 (Stack Memory)

원시 타입의 데이터는 스택 메모리에 저장됩니다. 

스택 메모리는 빠른 속도로 데이터를 저장하고 제거할 수 있는 구조입니다.
값이 할당될 때 메모리의 특정 위치에 직접 저장되며, 값이 사라지면 해당 메모리 공간이 즉시 해제됩니다.

 

힙 메모리 (Heap Memory)

참조 타입의 데이터는 힙 메모리에 저장됩니다. 

힙 메모리는 더 많은 메모리 공간을 제공하지만, 접근 속도가 느립니다.
객체가 생성될 때 메모리의 특정 위치에 저장되고, 

이 위치를 참조하는 변수가 스택에 저장됩니다. 

객체가 더 이상 참조되지 않으면 가비지 수집(Garbage Collection)에 의해 메모리가 해제됩니다.

 

가비지 수집 (Garbage Collection)

JavaScript는 자동으로 메모리를 관리하는 가비지 수집 기능을 제공합니다. 

사용되지 않는 객체나 참조가 없어진 객체는 자동으로 메모리에서 해제되어 메모리 누수를 방지합니다. 

이 과정은 주기적으로 이루어지며, 

개발자는 메모리 관리에 대해 직접 신경 쓸 필요가 없습니다.

 

 

 

관련자료

 

메모리에 올라가는 과정 스텍과 힙

https://www.youtube.com/watch?v=GIsr_r8XztQ

 

 

컴퓨터 메모리 설명

https://ko.khanacademy.org/computing/computer-science/cryptography/comp-number-theory/v/what-is-computer-memory-prime-adventure-part-7

 

Khan Academy

 

ko.khanacademy.org

 

자바스크립트의 메모리 관리

https://www.youtube.com/watch?v=1BoJZqxFYfQ

 

 

 

 

 

 

 

 

'개발' 카테고리의 다른 글

js null 과 undefined  (0) 2024.11.06
js 불변객체  (0) 2024.11.06
js Set  (0) 2024.11.05
js Map  (0) 2024.11.05
js 일급 객체로서의 함수  (0) 2024.11.05

댓글

💲 추천 글