[JavaScript] 자바스크립트 자료형: Primitive & Reference

자바스크립트의 자료형(Data type)은 크게 원시 타입(Primitive type)과 참조 타입(Reference type)으로 나뉜다.

1. 원시 타입(Primitive type)

원시 타입의 변수는 대입하는 값, 데이터 자체를 저장한다.

• 원시 타입 종류
  • Boolean: true와 false 값을 가진다.
  • Number: 숫자 값을 가진다.
  • String: 문자(열) 값을 가진다.
  • Null: null 값을 가진다.
  • Undefined: undefined 값을 가진다.
  • Symbol: 변경이 불가능한 값을 가진다. (ES6에서 새롭게 추가된 타입이다.)

아래 예시를 통해 원시 타입의 특징을 살펴보자.

• 예시 1

let a = 10;
let b = 10;

console.log(a === b); // 10 === 10


// Expected Output:
// true

• 예시 2

let a = 10;
let b = a; // let b = 10;
a = 30;

console.log(a);
console.log(b);
console.log(a === b); // 30 === 10


// Expected Output:
// 30
// 10
// false

2. 참조 타입(Reference type)

참조 타입의 변수는 데이터가 아닌 데이터가 저장된 메모리의 주소값을 저장한다.

• 참조 타입 종류
  • Object: 모든 타입의 값들을 담을 수 있으며, 이 데이터가 저장되어 있는 주소값을 가진다.

    객체는 물론이고 배열, 함수, 정규식도 모두 Object에 포함된다.

아래 예시를 통해 참조 타입의 특징을 살펴보자.

• 예시 1

const arr = [1, 2, 3];
const arr2 = [1, 2, 3];

console.log(arr === arr2); // arr의 주소값 === arr2의 주소값


// Expected Output:
// false

• 예시 2

let arr = [1, 2, 3];
const arr2 = [4, 5, 6];

arr = arr2; // arr에 arr2 주소값을 대입 

console.log(arr); // arr2를 가리킴 
console.log(arr2); 
console.log(arr === arr2); // arr2의 주소값 === arr2의 주소값


// Expected Output:
// [4, 5, 6]
// [4, 5, 6]
// true

• 예시 3

const obj = {
  name: 'Jane'
};

const obj2 = obj; // obj2에 obj 주소값 대입

obj.name = "John"; // obj의 속성값 수정(주소값 변경 X)

console.log(obj2); // obj을 가리킴
console.log(obj === obj2); // obj 주소값 === obj 주소값


// Expected Output:
// [object Object] {
//   name: "John"
// }
// true

• 예시 4

let obj = {
  name: 'Jane'
};

const obj2 = obj; // obj2에 obj 주소값 대입, obj와 obj2 모두 같은 데이터를 가리킴

obj = {
  name: 'John'
}; // 변수 obj에 값을 재할당
   // 참고: 참조형 변수를 재선언하거나 값을 재할당할 경우 새로운 주소값이 생성되어 저장됨 

console.log(obj); // 새로운 주소값을 가진 obj, 새로운 주소값이 가리키는 데이터 출력
console.log(obj2); // 기존 obj의 주소값을 가진 obj2, 기존의 obj가 가리키고 있던 데이터 출력
console.log(obj === obj2); // 새로운 obj 주소값 === 기존의 obj(현 obj2) 주소값


// Expected Output:
// [object Object] {
//   name: "John"
// }
// [object Object] {
//   name: "Jane"
// }
// false

• 예시 5

let jane = {
  name: 'Jane',
  age: 10
};

const john = {
  name: 'John',
  age: 15
};

const people = [jane, john]; // jane, john 변수의 주소값을 가진 people 배열

jane = {
  name: 'Jane',
  age: 13
}; // 변수 jane에 값을 재할당, 새로운 주소값 저장

console.log(jane); // 새로운 주소값이 가리키는 데이터 출력
console.log(people); // 기존의 주소값이 가리키는 데이터 출력
console.log(jane === people[0]); // 새로운 jane 주소값 === 기존 jane 주소값


// Expecte Output:
// [object Object] {
//   age: 13,
//   name: "Jane"
// }
// [[object Object] {
//   age: 10,
//   name: "Jane"
// }, [object Object] {
//   age: 15,
//   name: "John"
// }]
// false

위의 예시들은 JS Bin에서 테스트한 것이다.