[자바스크립트]초보자를 위한 자바스크립트 자료형 가이드

자바스크립트 자료형을 이해하는 것은 자바스크립트 프로그래밍의 기초이자 필수입니다. 이 글에서는 자바스크립트의 다양한 자료형을 기초부터 심화까지 자세히 다룹니다.

≣ 목차

• 자료형의 종류📚
• 기본 자료형 상세 설명🔍
• 참조 자료형 상세 설명🧩
• 자료형 변환🔄
• 자료형 확인 방법🔍
• 심화 내용📘
• 핵심 내용👀

---

자료형의 종류📚

• 기본 자료형 (Primitive Types)
  • 숫자(Number): 정수와 실수를 모두 포함합니다. ex) let age = 25;
  • 문자열(String): 문자열 데이터를 저장합니다. ex) let name = "John";
  • 불리언(Boolean): 참(true) 또는 거짓(false)을 나타냅니다. ex) let isStudent = true;
  • null: 의도적으로 값이 없음을 나타냅니다. ex) let car = null;
  • undefined: 값이 할당되지 않음을 나타냅니다. ex) let job;
  • 심볼(Symbol) (ES6): 고유하고 변경 불가능한 값을 생성합니다. ex) let sym = Symbol("id");
• 참조 자료형 (Reference Types)
  • 객체(Object): 여러 값을 키-값 쌍으로 저장합니다. ex) let person = { name: "John", age: 30 };
  • 배열(Array): 순서가 있는 리스트를 저장합니다. ex) let colors = ["red", "green", "blue"];
  • 함수(Function): 코드를 캡슐화하고 호출할 수 있는 객체입니다. ex) function greet() { console.log("Hello!"); }
  • 기타: 날짜(Date), 정규 표현식(RegExp) 등

---

기본 자료형 상세 설명🔍

자바스크립트에는 여섯 가지 기본 자료형(Primitive Types)이 있습니다. 이 자료형들은 값 자체를 나타내며, 불변성(Immutable)을 가집니다. 각 자료형에 대해 자세히 알아보겠습니다.

1. 숫자(Number)

• 정의: 숫자는 정수와 실수를 포함한 모든 숫자 값을 나타냅니다.
• 특징: 자바스크립트의 숫자는 모두 64비트 부동 소수점 형식입니다.
• 예제

let age = 25;
let price = 19.99;

• 주의사항: NaN(Not a Number)과 Infinity 같은 특별한 숫자 값도 포함됩니다.

let invalidNumber = NaN;
let infiniteNumber = Infinity;

---

2. 문자열(String)

• 정의: 문자열은 텍스트 데이터를 나타냅니다.
• 특징: 큰따옴표(" "), 작은따옴표(' '), 백틱(` `)으로 문자열을 감쌀 수 있습니다.
• 예제

let name = "John";
let greeting = 'Hello, world!';
let multiline = `This is a
multiline string.`;

• 이스케이프 시퀀스: 문자열 내에서 특수 문자를 표현할 때 사용됩니다.
  • \' : 작은따옴표
  • \" : 큰따옴표
  • \\ : 백슬래시
  • \n : 줄바꿈
  • \t : 탭
• 예제

let text = "She said, \"Hello!\"";
let path = "C:\\Users\\John";
let multilineText = "This is line 1.\nThis is line 2.";

• 주의사항: 백틱(` `)을 사용하면 템플릿 리터럴을 통해 다중 행 문자열과 문자열 보간을 사용할 수 있습니다.

let age = 25;
let message = `I am ${age} years old.`;

---

3. 불리언(Boolean)

• 정의: 불리언은 논리적 참(true)과 거짓(false)을 나타냅니다.
• 특징: 조건문에서 주로 사용됩니다.
• 예제

let isStudent = true;
let isTeacher = false;

---

4. null

• 정의: null은 값이 없음을 나타내는 자료형입니다.
• 특징: 의도적으로 "비어 있음"을 나타낼 때 사용됩니다.
• 예제

let car = null;

---

5. undefined

• 정의: undefined는 값이 할당되지 않은 변수를 나타냅니다.
• 특징: 변수가 선언되었지만 값이 설정되지 않은 상태입니다.
• 예제

let job;

---

6. 심볼(Symbol) (ES6)

• 정의: 심볼은 고유하고 변경 불가능한 값을 생성하는 데 사용됩니다.
• 특징: 주로 객체의 유일한 속성 키를 만들기 위해 사용됩니다.
• 예제

let sym = Symbol("id");
let obj = { [sym]: 123 };

---

참조 자료형 상세 설명🧩

자바스크립트 참조 자료형(Reference Types)은 객체(Object)와 배열(Array), 함수(Function) 등의 자료형을 포함하며, 값이 아닌 메모리 주소를 참조합니다. 참조 자료형은 가변성(Mutability)을 가집니다.

1. 객체(Object)

• 정의: 객체는 여러 값을 키-값 쌍으로 저장하는 데이터 구조입니다.
• 특징: 중괄호 { }를 사용하여 생성합니다. 키는 문자열, 값은 모든 자료형이 될 수 있습니다.
• 예제

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

• 주의사항: 객체의 속성에 접근하는 방법은 점 표기법 . 과 대괄호 표기법 [ ]이 있습니다.

console.log(person.name); // John
console.log(person["age"]); // 30

---

2. 배열(Array)

• 정의: 배열은 순서가 있는 리스트를 저장하는 데이터 구조입니다.
• 특징: 대괄호 [ ] 를 사용하여 생성하며, 인덱스는 0부터 시작합니다.
• 예제

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

• 주의사항: 배열 메서드를 활용하여 데이터를 조작할 수 있습니다.

colors.push("yellow"); // ["red", "green", "blue", "yellow"]
let firstColor = colors.pop(); // "yellow", colors는 ["red", "green", "blue"]

---

3. 함수(Function)

• 정의: 함수는 특정 작업을 수행하는 코드를 캡슐화하고 호출할 수 있는 객체입니다.
• 특징: 함수 선언식과 함수 표현식으로 정의할 수 있습니다.
• 예제

// 함수 선언식
function greet() {
  console.log("Hello!");
}

// 함수 표현식
let greet = function() {
  console.log("Hello!");
};

• 주의사항: 함수는 일급 객체로, 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다.

function executeFunc(func) {
  func();
}

executeFunc(greet); // "Hello!"

---

4. 날짜(Date)

• 정의: 자바스크립트에서 날짜와 시간을 다루기 위해서는 Date 객체를 사용합니다.
• 특징: Date 객체는 날짜와 시간을 기반으로 다양한 작업을 수행할 수 있도록 도와줍니다.
• 예제

// 현재 날짜와 시간
let now = new Date();
console.log(now);

// 특정 날짜와 시간
let specificDate = new Date('2023-12-31T23:59:59');
console.log(specificDate);

// 연도, 월(0-11), 일, 시간, 분, 초, 밀리초
let anotherDate = new Date(2023, 11, 31, 23, 59, 59, 999);
console.log(anotherDate);

---

5. 정규 표현식(Regular Expressions)

• 정의: 정규 표현식은 문자열에서 패턴을 찾고, 일치시키고, 치환하는 데 사용되는 강력한 도구입니다.
• 특징: 자바스크립트에서는 RegExp 객체와 정규 표현식 리터럴을 사용하여 정규 표현식을 다룰 수 있습니다.
• 예제
• 리터럴 방식

let regex = /pattern/flags;

• RegExp 객체 생성자

let regex = new RegExp('pattern', 'flags');

---

자료형 변환🔄

자바스크립트에서는 자료형 변환이 매우 중요합니다. 변환 방법은 명시적 변환(Explicit Conversion)과 암시적 변환(Implicit Conversion)으로 나뉩니다.

명시적 변환

• 정의: 명시적 변환은 개발자가 의도적으로 자료형을 변환하는 것입니다.
• 방법 및 예제
• 문자열로 변환

let num = 123;
let str = String(num); // "123"

• 숫자로 변환

let str = "123";
let num = Number(str); // 123

• 불리언으로 변환

let str = "Hello";
let bool = Boolean(str); // true

---

암시적 변환

• 정의: 암시적 변환은 자바스크립트가 자동으로 자료형을 변환하는 것입니다.
• 예제

let result = "5" + 2; // "52"
let result2 = "5" - 2; // 3
let result3 = 5 * "2"; // 10

• 주의사항: 암시적 변환은 예기치 않은 결과를 초래할 수 있으므로 주의가 필요합니다.

---

자료형 확인 방법🔍

자바스크립트에서는 자료형을 확인하는 여러 가지 방법이 있습니다.

typeof 연산자

• 정의: 변수의 자료형을 문자열로 반환합니다.
• 예제

console.log(typeof 123); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (버그로 인해 객체로 반환)
console.log(typeof Symbol("id")); // "symbol"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function() {}); // "function"

---

instanceof 연산자

• 정의: 객체가 특정 클래스의 인스턴스인지 확인합니다.
• 예제

let arr = [];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true

---

Object.prototype.toString.call()

• 정의: 보다 정확한 자료형을 반환합니다.
• 예제

console.log(Object.prototype.toString.call(123)); // "[object Number]"
console.log(Object.prototype.toString.call("Hello")); // "[object String]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
console.log(Object.prototype.toString.call(Symbol("id"))); // "[object Symbol]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call(function() {})); // "[object Function]"

---

심화 내용📘

자바스크립트 자료형에 대한 심화 내용을 다루어 보겠습니다.

불변성(immutability)과 가변성(mutability)

• 정의:
  • 불변성: 기본 자료형(원시 값)은 불변성(Immutable)을 가집니다.
  • 가변성: 참조 자료형은 가변성(Mutable)을 가집니다.
• 예제

let str = "Hello";
str[0] = "h"; // 불변성으로 인해 변경되지 않음
console.log(str); // "Hello"

let arr = [1, 2, 3];
arr[0] = 0; // 가변성으로 인해 변경됨
console.log(arr); // [0, 2, 3]

---

원시값과 참조값의 차이

• 정의:
  • 원시값: 값 자체를 저장합니다.
  • 참조값: 메모리 주소를 저장합니다.

let a = 10;
let b = a;
a = 20;
console.log(b); // 10 (원시값은 값 복사)

let obj1 = { name: "John" };
let obj2 = obj1;
obj1.name = "Doe";
console.log(obj2.name); // "Doe" (참조값은 주소 복사)

---

클로저(Closure)

• 정의: 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합으로, 내부 함수에서 외부 함수의 변수를 참조할 수 있습니다.
• 예제

function outer() {
  let counter = 0;
  function inner() {
    counter++;
    console.log(counter);
  }
  return inner;
}

const increment = outer();
increment(); // 1
increment(); // 2
increment(); // 3

---

핵심 내용👀