[자바스크립트] 자바스크립트 데이터 타입 이해하기

자바스크립트에서 데이터 타입은 변수가 저장할 수 있는 값의 종류를 정의합니다. 데이터 타입을 이해하는 것은 변수를 효과적으로 사용하고 코드 오류를 방지하는 데 중요합니다.

자바스크립트에는 크게 두 가지 종류의 데이터 타입이 있습니다.

1. 기본형 (Primitive Type) / 원시 타입

기본형은 자바스크립트에서 가장 단순한 데이터 타입이며, 값 자체를 직접 저장합니다. 기본형은 다음과 같습니다.

• Number: 정수와 실수를 모두 포함하는 숫자 데이터입니다.
  • 예시: 10, 3.14, -200
• String: 텍스트 데이터를 나타냅니다. 큰따옴표(") 또는 작은따옴표(')로 둘러싸인 문자의 시퀀스입니다.
  • 예시: "Hello, world!", '안녕하세요', This is a string literal.
• Boolean: 참 또는 거짓을 나타냅니다.
  • 예시: true, false
• Null: 값이 없는 것을 나타냅니다.
  • 예시: null
• Undefined: 변수가 선언되었지만 아직 값이 할당되지 않은 것을 나타냅니다.
  • 예시: let x;
• Symbol: ES6에서 도입된 새로운 데이터 타입으로, 고유한 식별자를 제공합니다. 주로 객체의 속성 이름으로 사용됩니다.
  • 예시: let symbol = Symbol('unique identifier');

2. 참조형 (Reference Type)

참조형은 값 자체가 아니라 다른 데이터를 가리키는 참조를 저장합니다. 참조형은 다음과 같습니다.

• Object: 속성과 메서드를 가지고 있는 데이터 구조입니다.
  • 예시: let person = { name: 'John Doe', age: 30 };
• Array: 순서대로 배열된 값들의 그룹입니다.
  • 예시: let numbers = [1, 2, 3, 4, 5];
• Function: 코드 블록과 매개변수를 포함하여 특정 작업을 수행하도록 설계된 코드 조각입니다.
  • 예시: function greet(name) { console.log('Hello, ' + name + '!'); }
• Date: 특정 시점을 나타내는 데이터 타입입니다.
  • 예시: let now = new Date();
• RegExp: 문자열 패턴을 검색하는 데 사용되는 특수 문자 시퀀스입니다.
  • 예시: let pattern = /pattern to match/;

데이터 타입 확인하기

변수의 데이터 타입을 확인하려면 typeof 연산자를 사용할 수 있습니다.

let num = 10;
console.log(typeof num); // Number
let str = "Hello";
console.log(typeof str); // String
let bool = true;
console.log(typeof bool); // Boolean
let obj = {};
console.log(typeof obj); // Object
let arr = [1, 2, 3];
console.log(typeof arr); // Object (배열은 객체로 취급됩니다.)
let func = function() {};
console.log(typeof func); // Function

자바스크립트는 동적 타입 언어이기 때문에 변수를 선언할 때 데이터 타입을 명시적으로 지정할 필요가 없습니다. 변수에 값을 할당하면 변수의 데이터 타입이 자동으로 결정됩니다. 하지만, 명확한 코드 작성을 위해 데이터 타입을 명시적으로 지정하는 것이 좋습니다.

데이터 타입 예제

1. 기본형 (Primitive Type)

숫자형 (Number)

• 정수 연산:

  let num1 = 10;
  let num2 = 20;
  console.log(num1 + num2); // 30
  console.log(num1 - num2); // -10
  console.log(num1 * num2); // 200
  console.log(num1 / num2); // 0.5
  console.log(num1 % num2); // 0
  

• 실수 연산:

  let num1 = 3.14;
  let num2 = 2.71;
  console.log(num1 + num2); // 5.85
  console.log(num1 - num2); // 0.43
  console.log(num1 * num2); // 8.5294
  console.log(num1 / num2); // 1.16237
  console.log(num1 % num2); // 0.43
  

• 제곱근, 거듭제곱 연산:

  let num = 5;
  console.log(Math.sqrt(num)); // 2.2360679774997896
  console.log(Math.pow(num, 2)); // 25
  

• 문자열 변환:

  let num = 123;
  let str = num.toString();
  console.log(typeof str); // string
  console.log(str); // "123"
  

문자열형 (String)

• 문자열 선언:

  let str1 = "Hello";
  let str2 = 'World!';
  console.log(str1); // Hello
  console.log(str2); // World!
  

• 문자열 연결:

  let str1 = "Hello";
  let str2 = "World!";
  let greeting = str1 + " " + str2;
  console.log(greeting); // Hello World!
  

• 문자열 길이:

  let str = "JavaScript";
  console.log(str.length); // 10
  

• 문자열 추출:

  let str = "Hello, world!";
  console.log(str[0]); // H
  console.log(str.charAt(5)); // o
  console.log(str.substring(6, 11)); // world
  

• 문자열 치환:

  let str = "Welcome to JavaScript!";
  let newStr = str.replace("JavaScript", "TypeScript");
  console.log(newStr); // Welcome to TypeScript!
  

• 문자열 비교:

  let str1 = "Hello";
  let str2 = "Hello";
  let str3 = "World";
  console.log(str1 === str2); // true
  console.log(str1 === str3); // false
  console.log(str1 !== str3); // true
  

불리언형 (Boolean)

• 논리 연산:

  let bool1 = true;
  let bool2 = false;
  console.log(bool1 && bool2); // false
  console.log(bool1 || bool2); // true
  console.log(!bool1); // false
  console.log(!bool2); // true
  

• 조건문:

  let num = 10;
  if (num > 5) {
      console.log("숫자는 5보다 큽니다.");
  } else {
      console.log("숫자는 5보다 작거나 같습니다.");
  }
  

널형 (Null)

• 널 값 확인:

  let variable = null;
  console.log(variable === null); // true
  console.log(typeof variable); // object (놀랍게도 null은 객체로 취급됩니다.)
  

언디파인드형 (Undefined)

• 선언되지 않은 변수:

  let variable;
  console.log(variable); // undefined
  console.typeof(variable); // undefined
  

• 함수의 인자 미 제공:

  function greet(name) {
      console.log("Hello, " + name + "!");
  }
  greet(); // Hello, undefined!
  

심볼형 (Symbol)

• 고유 식별자 생성:

  let symbol1 = Symbol('unique identifier1');
  let symbol2 = Symbol('unique identifier2');
  console.log(symbol1 === symbol2); // false
  

• 객체 속성 이름으로 사용:

  let obj = {};
  let symbol = Symbol('property name');
  obj[symbol] = 'Symbol value';
  console.log(obj[symbol]); // Symbol value
  

2. 참조형 (Reference Type)

객체형 (Object)

• 객체 생성:

  let person = {
      name: 'John Doe',
      age: 30,
      occupation: 'Software Engineer'
  };
  console.log(person.name); // John Doe
  console.log(person['age']); // 30
  

• 객체 속성 추가 및 삭제:

  let person = { name: 'Jane Doe' };
  person.age = 35;
  console.log(person); // { name: 'Jane Doe', age: 35 }
  delete person.age;
  console.log(person); // { name: 'Jane Doe' }
  

• 객체 메서드:

  let person = {
      name: 'John Doe',
      greet: function() {
          console.log("Hello, my name is " + this.name + ".");
      }
  };
  person.greet(); // Hello, my name is John Doe.
  

배열형 (Array)

• 배열 생성:

  let numbers = [1, 2, 3, 4, 5];
  let names = ['John', 'Jane', 'Peter'];
  console.log(numbers[0]); // 1
  console.log(names[2]); // Peter
  

• 배열 요소 추가 및 삭제:

  let numbers = [1, 2, 3];
  numbers.push(4, 5);
  console.log(numbers); // [1, 2, 3, 4, 5]
  numbers.pop();
  console.log(numbers); // [1, 2, 3, 4]

• 배열 순회:

  let numbers = [10, 20, 30];
  for (let i = 0; i < numbers.length; i++) {
      console.log(numbers[i]);
  }

함수형 (Function)

• 함수 선언:

  function greet(name) {
      console.log("Hello, " + name + "!");
  }
  greet('Bard'); // Hello, Bard!
  

• 함수 매개변수:

  function sum(num1, num2) {
      return num1 + num2;
  }
  let result = sum(10, 20);
  console.log(result); // 30
  

• 화살표 함수:

  let greet = (name) => {
      console.log("Hello, " + name + "!");
  };
  greet('Arrow'); // Hello, Arrow!
  

날짜형 (Date)

• 현재 날짜 및 시간:

  let now = new Date();
  console.log(now); // 2024-07-23T09:49:23.000Z
  

• 날짜 및 시간 조작:

  let date = new Date(2024, 6, 23, 12, 30,

 

정규 표현식형 (RegExp)

• 문자열 패턴 검색:

  let text = "Hello, world! This is a string.";
  let pattern = /world/;
  let match = text.match(pattern);
  console.log(match); // ['world']
  

• 문자열 치환:

  let text = "JavaScript programming language";
  let pattern = /Script/g;
  let newText = text.replace(pattern, "TypeScript");
  console.log(newText); // JavaTypeScript programming language
  

이 외에도 다양한 예제가 있습니다.

• 데이터 타입 변환:

  let num = 10;
  let str = num.toString(); // 문자열로 변환
  let newNum = parseInt(str); // 문자열을 숫자로 변환
  

• 객체 복사:

  let person1 = { name: 'John Doe', age: 30 };
  let person2 = Object.assign({}, person1); // 객체 복사
  console.log(person2); // { name: 'John Doe', age: 30 }
  

• JSON 데이터 처리:

  let jsonData = '{"name": "Jane Doe", "age": 35}';
  let person = JSON.parse(jsonData); // JSON 문자열을 객체로 변환
  console.log(person.name); // Jane Doe