[자바스크립트] 자바스크립트의 데이터 종류 6가지 (원시타입과 참조타입)

자바스크립트에서 데이터가 저장되는 2가지 방식

1. 원시타입 (Primitive Type)

• 더 이상 작은 단위로 나눠질 수 없는 싱글 타입
• 값(value) 자체가 메모리에 저장
• 종류: string, number, boolean, null, undefined, symbol

원시타입이 메모리에 저장되는 방식

1. 변수 a에 숫자형 데이터 1이 할당되었다

메모리 주소 M1에 숫자형 데이터 1이 저장되고 변수 a는 메모리 주소 M1을 가리킨다

2. 변수 b에 변수 a를 할당하였다

변수 a가 가리키는 메모리 주소를 변수 b도 가리키게된다

결과적으로 변수 b에는 숫자형 데이터 1이 할당된다

3. 변수 b에 새로운 값 7을 다시할당하였다

메모리 주소 M2에 숫자형 데이터 7이 저장되고 변수 b는 메모리 주소 M2을 가리킨다

2. 참조타입 (Reference Type, Objective Type)

• 여러개의 싱글 타입을 묶어서 한 단위로 관리
• 값(value)이 레퍼런스 넘버에 저장
• array, object, function

참조타입이 메모리에 저장되는 방식

1. 변수 a에 객체 데이터 { x: 1 }이 할당된다

x의 value는 1이므로 메모리 M2에 1을 저장한뒤 key값 x가 해당 메모리 주소를 가리킨다

2. 변수 b에 변수 a를 할당한다

변수 b도 a가 가리키고 있는 같은 메모리 주소를 가리키게 된다

3. 변수 b 안에 들어 있는 키 x의 값을 8로 바꿔준다

새로운 메모리 M3에 8이라는 값이 저장된다

키 x는 M3을 가리키게 된다

 

Primitive type의 데이터 종류

1. string (문자 데이터)

큰따옴표(""), 작은따옴표('') 또는 백틱(``)으로 감싸져 있는 데이터 타입

백틱으로 감싸진 데이터는 ${} 기호로 자바스크립트의 변수를 넣을 수 있다

let myName = "maple";
let email = 'maple@gmail.com';
let hello = `Hello ${myName}`;

console.log(myName); // maple
console.log(email); // maple@gmail.com
console.log(hello); // Hello maple

 

2. number (숫자 데이터)

정수 및 부동소수점 숫자를 나타내는 데이터 타입

let number = 123;
let pie = 3.14;

console.log(number); // 123 
console.log(pie); // 3.14

 

3. boolean (불린 데이터)

true 또는 false 두가지 값밖에 없는 논리형 데이터 타입

let checked = true;
let isShow = false;

console.log(checked); // true
console.log(isShow); // false

• true를 리턴하는 값: false 값을 제외한 모든 값
• false를 리턴하는 값: 0, null, undefined, NaN, ''(비어있는 string)

 

4. undefined

선언은 되었지만 값이 할당되지 않은 상태를 나타내는 데이터 타입

let x; // 변수 x에 변수값이 지정되어있지 않다

console.log(x); // undefined

let obj = { abc: 123 };

console.log(obj.xyz); // undefined

 

5. null

어떤 값이 의도적으로 값이 없다는 것을 명시하는 데이터 타입

let empty = null;

console.log(empty); // null

 

 

6. symbol

맵이나 다른 자료구조에서 고유한 식별자가 필요할때 사용하는 데이터 타입

const symbol = Symbol("Hello");

console.log(symbol); // [object Symbol] { ... }

심볼에 있는 값을 출력할때는 .description을 추가해 string으로 변환 후 출력한다

const symbol = Symbol("Hello");

console.log(symbol.description); // Hello

Symbol의 특징

• 동일한 스트링을 작성했어도 다른 심볼로 만들어진다
• 주어진 스트링에 관계없이 고유한 식별자를 만든다

const symbol1 = Symbol("id");
const symbol2 = Symbol("id");
console.log(symbol1 === symbol2); // false

 

7. object (객체 데이터)

key: value 형태로 이루어진 여러 데이터의 집합을 중괄호 { } 안에 저장시키는 데이터 형태

let user = {
  name: 'maple';
  age: '1';
  isValid: true;
}

console.log(user.name) // maple
console.log(user.age) // 1
console.log(user.isValid) // true

 

8. array (배열)

여러 데이터를 순차적으로 대괄호 [ ] 안에 저장시키는 데이터 형태

let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]) // Apple
console.log(fruits[1]) // Banana
console.log(fruits[2]) // Cherry