[JavaScript]데이터 타입 - 자료형

윤지·2024년 10월 21일

목록 보기

3/30

기본 자료형(문자, 숫자, 논리, undefined, null, symbol)

1. 문자: 큰따옴표 또는 작은 따옴표로 둘러쌓여진 값

이스케이프 문자

// 이스케이프 없이 사용할 경우 (오류 발생)
const errorString = 'He said, "I'm going home."';

// 이스케이프를 사용한 올바른 방법
const correctString = 'He said, "I\'m going home."';
const alternativeString = "He said, \"I'm going home.\"";

위 예제에서 볼 수 있듯이, 이스케이프 문자()를 사용하면 문자열 내에서 따옴표를 문자 그대로 표현 가능. 이는 문자열의 시작과 끝을 나타내는 따옴표와 문자열 내용의 일부인 따옴표를 구분하는 데 도움이 됨

템플릿 문자열 (Template Literals)

ES6에서 도입된 문자열 표기법. 백틱(`)을 사용하여 문자열을 감쌈. 다음과 같은 특징이 있음:

여러 줄 문자열을 쉽게 작성 가능
문자열 내에 표현식을 삽입 가능 (${expression} 형태로)
특수 문자를 이스케이프하지 않고도 사용 가능

// 여러 줄 문자열
const multiLine = `
  This is a
  multi-line
  string.
`;

// 표현식 삽입
const name = "John";
console.log(`Hello, ${name}!`);

// 특수 문자 사용
const quote = `He said, "I'm going home."`;

템플릿 문자열을 사용하면 문자열 연결이나 이스케이프 문자 사용을 줄일 수 있어, 코드의 가독성과 유지보수성 향상

문자열 연산자

JavaScript의 주요 문자열 연산자:

연결 연산자(+): 두 개 이상의 문자열을 하나로 결합
+= 연산자: 기존 문자열에 새로운 문자열을 추가

let str1 = "Hello";
let str2 = "World";
let result = str1 + " " + str2; // "Hello World"

str1 += " JavaScript"; // str1은 이제 "Hello JavaScript"

2. 숫자: 정수와 실수를 포함한 모든 숫자 (예: 42, 3.14)

숫자의 표현:
- 양수: 0보다 큰 숫자 (예: 1, 42, 100)
- 0: 양수도 음수도 아닌 숫자
- 음수: 0보다 작은 숫자 (예: -1, -42, -100)
- 지수 표기법: 매우 크거나 작은 숫자를 표현 (예: 1e6 = 1000000, 2.5e-3 = 0.0025)
- 16진수: 0x로 시작하는 16진법 숫자 (예: 0xFF = 255, 0x1A = 26)

3. 논리: true 또는 false 값

참과 거짓을 표현하는 데이터

const bool1 = 10 > 0; //true
const bool2 = 10< 0; //false
console.log(bool1, bool2)

4. undefined: 값이 할당되지 않은 변수의 기본값

정의되지 않음

5. null

의도적으로 값을 비워둘 때 사용

6. Symbol

ES6에서 도입된 새로운 원시 데이터 타입. 각 Symbol 값은 고유하며, 객체 속성의 식별자로 사용 가능

실무에서 잘 사용되지 않음

const sym1 = Symbol();
const sym2 = Symbol('foo');
const sym3 = Symbol('foo');

console.log(sym2 === sym3); // false

참조 자료형(배열, 객체, 함수)

1. 배열

순서가 있는 데이터 집합
모든 데이터 타입의 값 포함 가능. 문자열, 숫자, 불리언, 객체, 다른 배열, 함수까지 모든 타입의 요소 저장 가능
예: [1, 2, 3, 4, 5]
배열 접근법
- 각 요소는 0부터 시작하는 인덱스를 가짐. 이를 사용하여 특정 위치의 값 가져옴

const fruits = ['apple', 'banana', 'orange', 'grape'];

console.log(fruits[0]); // 'apple'
console.log(fruits[2]); // 'orange'

// 배열의 마지막 요소에 접근
console.log(fruits[fruits.length - 1]); // 'grape'

// 존재하지 않는 인덱스에 접근하면 undefined를 반환
console.log(fruits[10]); // undefined

이 방법을 사용하여 배열의 특정 위치에 있는 요소에 직접 접근하거나 수정 가능. 또한, 배열의 길이(length)를 이용하여 마지막 요소에 쉽게 접근 가능

2. 객체

키-값 쌍으로 구성된 데이터 구조
예: {name: 'John', age: 30}
객체 접근법
- 점 표기법 (Dot notation): 객체명.속성명
- 대괄호 표기법 (Bracket notation): 객체명['속성명']
- 일반적으로 점 표기법 사용. 속성 이름에 특수 문자 포함 또는 속성 이름을 변수로 사용 시 대괄호 표기법이 유용함
- JavaScript 객체의 키는 기본적으로 문자열로 취급됨. 숫자나 다른 타입을 키로 사용하면 자동으로 문자열로 변환됨

const person = {
  name: 'John',
  age: 30,
  'job-title': 'Developer'
};

// 점 표기법
console.log(person.name);  // 'John'

// 대괄호 표기법
console.log(person['age']);  // 30
console.log(person['job-title']);  // 'Developer'

const obj = {
  42: "The answer",
  true: "A boolean key"
};

console.log(obj[42]);  // "The answer"
console.log(obj["42"]);  // "The answer"
console.log(obj.true);  // "A boolean key"
console.log(obj["true"]);  // "A boolean key"