자바스크립트 데이터 타입 심화

기본 데이터 타입 (Primitive Data Types)

값 자체를 직접 저장하는 데이터 타입으로 불변(immutable)하며 스택 메모리에 저장

• 숫자 (Number): 정수 및 부동 소수점 숫자
• 문자열 (String): 텍스트 데이터
• 불리언 (Boolean): true 또는 false와 같은 논리적인 값
• undefined: 변수가 정의되지 않았더나 값을 할당하지 않았을 때 나타나는 값
• null: 아무 값도 없음을 나타내며, 변수가 비어 있음을 나타내는 데 사용
• 심볼(Symbol): 유일한 값으로 주로 객체 프로퍼티 키로 사용
• BigInt: 큰 정수 값을 나타냄

// 숫자
let age = 30;
let price = 19.99;

// 문자열
let name = "John";
let message = 'Hello, World!';

// 불리언
let isStudent = true;
let isWorking = false;

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

// null
let emptyValue = null;

// 심볼
let emptyValue = null;

// BigInt
let bigIntValue = 1234567890123456789012345678901234567890n;

 

참조 데이터 타입 (Reference Data Types)

객체를 나타내며 변수는 실제 데이터가 아닌 데이터에 대한 참조를 힙 메모리에 저장
변수에는 해당 데이터의 참조 주소가 저장돼서 여러 변수가 같은 데이터를 참조할 수 있음

값의 변경이 가능하며 얕은 복사(shallow copy)로 처리됨

• 객체 (Object): 여러 개의 키-값 쌍으로 이루어진 복합 데이터 구조를 나타냄
  함수, 배열, 날짜 등 모든 객체는 여기에 속함
• 배열 (Array): 여러 값의 리스트를 나타내며, 순서가 있고 각 항목에 인덱스로 접근 가능
• 함수(Function): 재사용 가능한 코드 블록을 나타내며, 작업을 수행하거나 값을 반환할 수 있음
• 날짜 (Date): 날짜와 시간 정보를 다루는 데 사용되는 객체
• RegExp (정규표현식): 문자열 검색 및 대체를 위한 패턴을 정의하는 객체

// 객체
let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
};

// 배열
let colors = ["red", "green", "blue"];

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

// 날짜
let currentDate = new Date();

// 정규 표현식
let pattern = /ab+c/;

// 사용자 정의 객체
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

let user = new Person("Alice", "Johnson");

 

스택 메모리 (Stack Memory)

프로그램의 실행 컨텍스트와 함수 호출을 관리하기 위한 목적으로 사용

• 데이터 저장 방식: 선입선출(FIFO)의 데이터 구조로 데이터를 저장하고 제거하는 데 사용
• 데이터 타입: 기본 데이터 타입 값들, 함수 호출 정보, 지역 변수 등을 저장
• 데이터 라이프사이클: 데이터는 스택 프레임(Stack Frame)에 저장
  함수가 호출될 때 마다 새로운 스택 프레임이 생성되며, 함수가 실행을 마치면 해당 스택 프레임은 제거됨
• 메모리 할당 및 헤제: 자동으로 할당 및 해제되며 정적 메모리 관리를 따름

function foo(x) {
  let y = x + 10; // y는 스택 메모리에 저장됨
  return y;
}

let a = 5; // a는 스택 메모리에 저장됨
let result = foo(a); // 함수 호출을 위한 스택 프레임이 생성됨
console.log(result); // 결과: 15

 

힙 메모리 (Heap Memory)

동적으로 크기가 가변적인 데이터를 저장하기 위한 목적으로 사용

• 데이터 저장 방식: 데이터를 임의의 순서로 저장하는 동적 데이터 구조를 사용
• 데이터 타입: 참조 데이터 타입, 객체, 배열, 함수 등 동적으로 생성되는 데이터가 저장됨
• 데이터 라이프사이클: 데이터는 메모리를 직접 할당하고 해제해야 하며 메모리 누수를 방지하기 위한 주의가 필요
• 메모리 할당 및 해제: 프로그래머가 메모리 할당 및 해제를 관리해야 하며, 동적 메모리 관리를 따름

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
};

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

 

불변값 (Immutable Value)

한 번 생겅되면 변경할 수 없는 값을 나타나며, 해당 값을 수정하려고 할 때 새로운 값을 생성해야 됨

자바스크립트의 숫자, 문자열, 불리언 등의 기본 데이터 값은 불변값이며, 한 번 생성된 숫자 5를 변경하지 못하고

대신 새로운 값을 할당할 수 있음

 

불변성 (Immutability)

데이터 구조나 객체가 불변값으로 구성되어 변경 불가능한 특성을 가질 때를 나타냄

불변성을 가진 데이터 구조는 데이터가 변경되는 것을 방지함

함수형 프로그래밍 언어에서 많이 사용되는 리스트나 배열의 불변성은 리스트 내용을 직접 수정하는 대신

새로운 리스트를 생성하고 반환하는 방식으로 동작하며, 부작용을 줄이고 프로그램의 예측 가능성을 높이는 데 도움 됨

// 문자열은 불변값이다. 문자열을 변경하면 새로운 문자열이 생성된다.
let name = "Alice";
let modifiedName = name + " Johnson"; // "Alice Johnson"을 새로운 문자열로 생성
console.log(name); // 원래 문자열 "Alice"는 그대로 유지

// 배열을 변경하지 않고 새로운 배열을 생성하여 불변성 유지
let numbers = [1, 2, 3];
let newNumbers = [...numbers, 4]; // 새로운 배열 생성
console.log(numbers); // 원래 배열 [1, 2, 3]은 그대로 유지

 

가변값 (Mutable Value)

한 번 생성된 후에도 값을 변경할 수 있는 값으로 데이터를 수정할 수 있음

자바스크립트에서 객체와 배열은 가변값으로, 객체의 속성이나 배열의 요소를 변경할 수 있음

 

가변성 (Mutability)

데이터 구조나 객체가 가변값으로 구성되어 데이터가 언제든지 변경될 수 있는 특성

가변성을 가진 데이터 구조는 데이터가 변경될 때 부작용을 발생시킬 수 있으며, 예측하기 어렵게 만들 수 있음

// 객체는 가변값이다. 객체 내용을 직접 변경할 수 있다.
let person = { name: "John", age: 30 };
person.age = 31; // 객체 내용 변경
console.log(person); // { name: "John", age: 31 }

// 배열을 변경하면 기존 배열도 영향을 받는다.
let colors = ["red", "green", "blue"];
let favoriteColors = colors; // 참조를 공유
favoriteColors.push("yellow"); // 배열 변경
console.log(colors); // 변경된 배열 출력: ["red", "green", "blue", "yellow"]

 

불변성을 유지하면 코드가 예측 가능하고 디버그 하기에 쉬움
가변성은 부작용과 버그를 발생시킬 가능성을 높일 수 있으므로 주의가 필요함

 

불변 객체(Immutable Object)

생성 후에 내부 상태(값)를 변경할 수 없는 객체

불변 객체의 내부 상태는 일단 설정되면 수정할 수 없으며, 수정을 시도하면 새로운 객체가 생성되어 이전 객체를 변경하지 않음

 

불변 객체의 필요성

• 예측 가능성: 불변 객체를 사용하면 객체의 상태가 변경되지 않으므로 코드의 동작을 예측하기 쉬움
• 스레드 안정성: 멀티스레딩 환경에서 불변 객체를 사용하면 동기화 문제를 줄이고 스레드 안정성을 높일 수 있음
• 부작용 방지: 불변 객체는 부작용을 최소화하고 예상치 못한 동작을 방지할 수 있음
• 캐싱 및 메모리 최적화: 불변 객체는 캐싱 및 메모리 최적화에 유용하며 동일한 데이터를 여러 번 생성하지 않도록 도와줌

 

얕은 복사(Shallow Copy)

객체를 복사할 때, 내부 객체(속성)는 참조 주소만 복사

즉, 내부 객체 자체는 복사되지 않고 원본 객체와 복사본이 같은 내부 객체를 가리킴

얕은 복사를 사용해서 복사본의 내부 객체를 수정하면 원본 객체의 내부 객체도 변경될 수 있으므로 주의가 필요

const original = { a: 1, b: { c: 2 } };
const copy = { ...original }; // 얕은 복사

// 내부 객체 변경
copy.a = 3;
copy.b.c = 4;

console.log(original.a); // 결과: 1 (원본은 변경되지 않음)
console.log(original.b.c); // 결과: 4 (원본의 내부 객체도 변경됨)

 

깊은 복사(Deep Copy)

객체를 복사할 때, 객체까지 모두 새로 복사해서, 원본 객체와 복사본은 완전히 독립된 객체

깊은 복사는 불변 객체를 유지하기 위해 보다 안전한 방법이며, 복사본을 수정해도 원본 객체는 영향을 받지 않음

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original)); // 깊은 복사

// 내부 객체 변경
copy.a = 3;
copy.b.c = 4;

console.log(original.a); // 결과: 1 (원본은 변경되지 않음)
console.log(original.b.c); // 결과: 2 (원본의 내부 객체도 변경되지 않음)

 

얕은 복사와 깊은 복사를 구현하기 위해 언어나 라이브러리마다 다양한 방법이 제공됨
자바스크립트에선 얕은 복사를 Object.assign() 또는 전개 연산자(...)를 사용하여 수행할 수 있으며,
깊은 복사를 수행하려면 라이브러리나 반복문을 사용하여 직접 구현해야 됨

 

undefined

변수가 선언되었지만 초기화되지 않았을 때의 값이며, 변수가 아무 값도 가지지 않음을 나타냄

함수에서 반환값이 명시적으로 설정되지 않은 경우 함수도 undefined를 반환

객체의 속성에 접근하려고 할 때, 해당 속성이 존재하지 않는 경우도 undefined가 반환

자바스크립트 엔진이 변수를 처리할 때 자동으로 할당하는 값으로, 개발자가 명시적으로 변수에 값을 할당하지 않은 경우 자동으로 설정

let x; // x는 undefined입니다.
function foo() {}
console.log(foo()); // foo() 함수는 undefined를 반환합니다.
let obj = {};
console.log(obj.propertyThatDoesNotExist); // obj 객체의 존재하지 않는 속성은 undefined입니다.

 

null

의도적으로 값이 없음을 나타내는 특별한 값으로 변수가 값이 없음을 나타내거나 객체 속성을 초기화할 때 사용

개발자가 변수를 초기화하여 나중에 값을 할당할 때 사용

변수에 값을 할당하는 것이 아니라, 변수가 아무 값도 가지고 있지 않음을 나타냄

let y = null; // y는 null입니다.
let person = null; // 객체를 초기화할 때 null을 사용할 수 있습니다.

 

undefined는 변수가 초기화되지 않거나 속성이 존재하지 않을 때 자동으로 설정되는 값
null은 개발자가 의도적으로 변수에 값이 없음을 나타내는 데 사용하는 값