✏️ [JavaScript] - 3. 데이터 타입

데이터 타입 (Data Types)

프로그래밍에서 데이터는 다양한 형태와 종류로 나타낼 수 있습니다. 데이터 타입은 이러한 데이터의 특성과 처리 방법을 정의합니다. 이번 포스팅에서는 데이터 타입을 크게 두 가지로 나눠 설명하겠습니다: 원시 타입과 객체 타입.

원시 타입 (Primitive Types)

✏️ 원시 타입은 데이터를 단일 값으로 나타내는 가장 기본적인 데이터 타입입니다. 이들은 불변하며, 메모리에 직접 값을 저장합니다.

1. 숫자(Number)

숫자 데이터 타입은 정수와 실수를 포함합니다.

let integerNumber = 42;
let floatingPointNumber = 3.14;

2. 문자열(String)

문자열은 텍스트 데이터를 나타냅니다. 문자열은 작은 따옴표('')나 큰 따옴표("")로 묶어서 표현합니다.

let greeting = "Hello, World!";

3. 리터럴 방식

3.1. 일반 리터럴 (Literal):

• 값 자체를 나타내는 고정된 표기법.
• 변수나 표현식을 사용하지 않고, 고정된 값만을 나타냅니다.
• 예시: 42 (정수 리터럴), "Hello" (문자열 리터럴), True (불리언 리터럴).

3.2. 템플릿 리터럴 (Template Literal):

• 문자열을 동적으로 구성하기 위한 방법.
• 주로 백틱을 사용하며, 예시: `Hello, ${name}!`
• 멀티라인 문자열 과 표현식 삽입 을 가능하게 합니다.

✏️ 멀티라인 문자열

템플릿 리터럴을 사용하면 여러 줄에 걸친 문자열을 표현할 때 더 간편하게 사용할 수 있습니다. 기존의 문자열에서는 줄 바꿈을 나타내기 위해 백슬래시(\n)를 사용해야 했지만, 템플릿 리터럴에서는 그런 번거로움이 없습니다.

const multiLineString = `
  첫 번째 줄
  두 번째 줄
  세 번째 줄
`;

console.log(multiLineString);

위의 예제에서처럼 백틱(`)으로 문자열을 감싸면 자동으로 줄 바꿈이 적용되어 멀티라인 문자열을 만들 수 있습니다.

✏️ 표현식 삽입

템플릿 리터럴은 변수나 표현식을 문자열 안에 삽입할 수 있는 기능을 제공합니다. ${} 안에 변수나 표현식을 넣으면 해당 부분이 실제 값으로 치환됩니다.

const name = "Chloe";
const greeting = `안녕하세요, ${name}님!`;

console.log(greeting);

위의 예제에서 ${name}은 변수 name의 값으로 치환되어 최종적으로 "안녕하세요, Chloe님!"이라는 문자열이 만들어집니다.

💡 간단하게 말하면, 일반 리터럴은 값 표현에 중점을 두고, 템플릿 리터럴은 문자열을 다룰 때 좀 더 유연하게 변수를 사용할 수 있는 특별한 형태입니다.

4. 불리언(Boolean)

불리언 데이터 타입은 true 또는 false 값만을 가집니다. 주로 조건문에서 사용됩니다.

let isJavaScriptFun = true;

5. null과 undefined

null과 undefined는 값이 없음을 나타내는 특별한 원시 타입입니다.

• null: 명시적으로 값이 없음을 나타냅니다.
  • 함수가 유효한 값을 반환할 수 없는 경우 에러 대신 명시적으로 null을 반환하기도 한다.
• undefined: 암시적으로 값이 할당되지 않았음을 나타냅니다.
  • var 키워드로 선언한 변수는 undefined로 초기화된다.

6. 심볼(Symbol)

심볼(Symbol)은 자바스크립트에서 특별한 종류의 값으로, 주로 객체 속성의 이름(키)으로 사용됩니다. 여기서 '특별한'이라 함은 각각의 심볼 값이 서로 다르고 유일하다는 것을 의미합니다. 즉, 한 심볼 값은 다른 심볼 값과 완전히 다릅니다.

• 심볼을 사용하면 객체 속성을 만들 때 충돌을 피할 수 있습니다. 이는 마치 각각의 집에 주소가 있듯이, 객체 속성에 각기 다른 주소(심볼)를 부여하여 충돌을 방지하는 것과 비슷합니다.

const user = {
  [Symbol("username")]: "john_doe",
  age: 25,
};

→ 여기서 [Symbol("username")]은 'username'이라는 고유한 주소를 갖는 심볼입니다.

• 또한, 심볼은 자바스크립트에서 어떤 객체가 특정 동작을 할 때(예: 반복 가능한(iterable) 객체를 만들 때) 사용되기도 합니다. 이런 경우에는 자바스크립트에서 이미 약속된 몇 가지 특별한 심볼들이 사용됩니다.

---

객체 타입 (Object Types)

💡 자바스크립트를 이루고 있는 거의 모든 것이 객체인만큼 원시 타입 이외의 값은 모두 객체 타입입니다.

✏️ 객체 타입은 여러 개의 값을 하나의 변수에 저장할 수 있는 자료구조를 나타냅니다. 여러 속성과 메서드를 포함할 수 있습니다.

1. 배열(Array)

• 배열은 여러 아이템을 담는 자료 구조입니다.
• 인덱싱을 통해 배열의 특정 아이템에 접근할 수 있습니다.
• length 속성을 사용해 배열의 길이를 확인할 수 있습니다.

let numbers = [1, 2, 3, 4, 5];

2. 객체(Object)

• 객체는 키-값 쌍의 집합으로, 각 값에는 고유한 키가 할당됩니다.
• 객체는 다양한 형태의 데이터를 표현할 수 있습니다.

let person = {
  name: "John",
  age: 30,
  isStudent: false
};

3. 함수(Function)

• 함수는 데이터로 취급될 수 있으며, 함수 호출은 괄호 ()를 사용합니다.
• 함수의 종류를 확인할 때는 typeof를 사용합니다.
• 함수는 호출과 정의를 분리해서 생각해야 합니다.

function add(a, b) { 
  return a + b;
}

---

✏️ 데이터 타입의 필요성

그렇다면, 데이터 타입은 왜 필요할까요?

1. 메모리 공간 확보: 값을 저장하기 위해서는 얼마나 많은 메모리가 필요한지 알아야 합니다.
2. 메모리에서 읽기: 값을 사용하려면 저장된 메모리에서 읽어와야 합니다.
3. 데이터를 올바르게 해석: 읽어온 2진수를 어떻게 이해하고 처리할지 결정해야 합니다.

💡 간단하게 말하면, 데이터 타입은 메모리에 저장하고 읽어오며, 올바르게 이해하고 처리하기 위해 필요합니다.

✏️ 데이터 타입 확인

• typeof를 사용하여 데이터의 타입을 확인할 수 있습니다.
• 배열, 객체, null 등은 typeof로만으로는 명확히 구분이 어려울 수 있습니다.
• Object.prototype.toString.call()을 사용하여 타입을 더 정확하게 확인할 수 있습니다.

✏️ Truthy & Falsy

• 대부분의 데이터는 Truthy로 간주됩니다.
• Falsy는 false, 0, null, undefined, NaN, ''(빈 문자열), 0n과 같은 경우입니다.

📌 참고: [ 모던 자바스크립트 ]