JavaScript 데이터 타입: 기본 타입과 참조 타입 완벽 이해하기

댓글 달기 / 글쓴이 /

JavaScript 데이터 타입(Data Type)

저번 시간에 아주 열심히 정리한 변수 키워드 이어 오늘 정리해 보고자 하는 것은 변수에 담기는 JavaScript 데이터의 타입 입니다.

데이터 타입이란 용어는 변수나 변수에 담기는 값에 대한 종류를 말합니다. 쉽게 생각하면 이 변수가 숫자인지 문자인지 표시하는 것이죠.

JavaScript 데이터 타입은 크게 기본형(Primitive)과 참조형(Reference) 두 가지로 나뉩니다.

typeof 함수

변수가 지금 어떤 타입을 지니는지는 typeof 함수를 이용해 알 수 있습니다.

let x = 'hello, world!';
console.log(typeof(x)); //string 출력
JavaScript

typeof 함수의 한계

단, 이 typeof 함수는 이후 다룰 참조 타입의 변수들의 경우 대부분 ‘object’ 로 출력 됩니다. 그 변수가 배열(Array) 인 경우도 그래요. 그 이유는 배열도 객체의 일종이기 때문입니다.

기본 타입(Primitive Types)

기본 타입(Primitive Types) 은 JavaScript 데이터 타입 중 숫자, 문자와 같은 간단한 단일 값을 나타내는 가장 기본적인 변수 타입입니다.

이 기본 타입의 값은 더 이상 단순하게 표현할 수 없는 가장 최소의 값이고 원시 값(Primitive Value) 이라 불립니다. 또 다른 말로는 한 번 생성된 후에 변경할 수 없는 값 이란 의미로 불변값(immutable values) 이라고도 불립니다.

이런 기본 타입의 변수엔 직접 값이 저장됩니다. 다음 코드를 한번 보겠습니다.

let a = 10;
let b = a;
b = 20;
console.log(a); // 10
console.log(b); // 20
JavaScript

변수 b는 a를 할당 하였지만 이는 같은 메모리 공간을 바라보지 않고 a의 값인 10을 복사해 b에 저장 합니다.

그래서 b 에 값 20을 할당해도 a 는 변화하지 않습니다.

그럼 여기서 참조 타입은 반대로 동작 할 것을 예상해 볼 수 있겠죠? 이 내용은 참조 타입 영역에서 다시 다뤄보도록 하겠습니다.

기본 타입의 종류

기본 타입의 종류는 다음과 같습니다.

  • Number: 정수와 실수 등의 데이터를 이야기 합니다. 예:1234
  • String: 일반적인 문자열, 텍스트를 말합니다. 예:Hello, world!
  • Boolean: ‘true’ or ‘false’ 값을 지닙니다.
  • Undefined: 변수가 선언 되었으나 아직 값이 없을 때를 뜻합니다. (초기화 되지 않음)
  • Null: 없음, 비어있음을 뜻합니다.
  • Symbol: ES6 에서 추가된 변경 불가능한 데이터 타입입니다.
  • BigInt: ES2020 에서 추가된 표준 숫자 타입으로 표현 할 수 있는 범위를 초과하는 큰 정수를 다루기 위해 사용 됩니다.

변경 불가 값 (immutable values)

이는 기본 타입의 값이 생성 된 후에 그 값을 직접적으로 변경할 수 없다는 의미를 뜻합니다.

예를 들면 ‘Hello, world’ 를 x란 변수에 할당한 다음 문자열의 특정 부분을 변경하려 해도 불가능하다는 의미입니다.

let str = 'Hello, world!';
str[0] = 'Y';
console.log(str) // 똑같이 Hello, world! 출력
JavaScript

참조 타입(Reference Types)

J이전 변수 키워드 포스트에서 const 는 값을 재할당 할 수 없는데 ‘참조 타입의 변수들의 내부의 속성, 값을 변경하는 것은 가능하다’는 내용을 정리를 했었습니다.

참조 타입은 용어에서도 알 수 있듯이 변수에 실제 데이터의 값이 저장 되는 것이 아니라 메모리에서 데이터의 위치를 가리키는 참조가 할당됩니다. 

let obj1 = { value: 10 };
let obj2 = obj1;
obj2.value = 20;

console.log(obj1.value); // 20
console.log(obj2.value); // 20
JavaScript

위의 코드는 참조 타입인 객체(Object) 타입의 참조 동작 예시 입니다. 참조 타입 변수는 값을 지니는 것이 아니라 메모리 주소(참조)를 지니고 있어 obj2 에 obj1 을 할당하면 이 참조를 가져가게 됩니다. 즉, 같은 메모리 공간을 바라보고 있죠.

그래서 obj2가 참조하고 있는 객체 내 키인 value의 값을 20으로 변경하면 같은 참조를 가리키는 obj1 도 함께 변경 되어 동일하게 20 값을 출력하고 있습니다.

참조 타입의 종류

  • 객체(Object): 가장 기본적인 참조 타입으로, 키-값 쌍의 집합. 예: {key: value}
  • 배열(Array): 순서가 있는 데이터 집합. 예: [1,2,3,4,5]
  • 함수(Function): 실행 가능한 코드 블록을 나타내며, 일급 객체(First-Class Object)로 취급.

여기서 함수는 다룰 만한 내용이 많아 보여 객체와 배열에만 우선 정리해 보겠습니다.

객체(Object)

JavaScript 프로그래밍을 하면 이 참조 타입 변수 타입을 정말 많이 사용하게 되는 타입입니다.

객체는 키와 값이 한 쌍을 이루는 구조로 되어 있고 기본적인 선언 예시는 다음과 같습니다.

let man = {
	age: 19,
	name: 'minitKIM'
}
console.log(man); //{age: 19, name: 'minitKIM'} 출력
JavaScript

이렇게 선언하면 변수에서 key 를 이용해 다음과 같이 크게 두 가지 방법으로 값을 출력할 수 있습니다.

let man = {
	age: 19,
	name: 'minitKIM'
}
console.log(man.age); //19
console.log(man['age']); //19
JavaScript

둘의 주요 차이는 대괄호([]) 를 사용할 때 key 부분에 변수를 사용할 수 있다는 점 입니다.

let man = {
	age: 19,
	name: 'minitKIM'
}
const ageStr = 'age';
console.log(man[ageStr]); //19
JavaScript

Object.keys()

Object.keys() 함수는 객체가 지닌 key 목록을 가져옵니다. 이렇게 가져온 키는 배열(Array) 의 형태로 반환 됩니다.

let man = {
	age: 19,
	name: 'minitKIM'
}
console.log(Object.keys(man)); //(2) ['age', 'name'] 출력
JavaScript
let man = {
	age: 19,
	name: 'minitKIM'
}
let keys = Object.keys(man);
console.log(keys); //(2) ['age', 'name'] 출력
JavaScript

객체(Object)에 키, 값 추가

새로운 키와 값을 추가하고 싶다면 변수명.키 = 값; 혹은 변수명[키] = 값; 으로 손쉽게 추가할 수 있습니다.

let man = {
	age: 19,
	name: 'minitKIM'
}
console.log(man); //{age: 19, name: 'minitKIM'} 출력

man.phoneNumber = '010-9999-9999';
console.log(man); //{age: 19, name: 'minitKIM', phoneNumber: '010-9999-9999'} 출력
JavaScript

배열(Array)

배열은 많은 프로그래밍 언어에서 사용 되는 형태의 타입입니다. 순서대로 여러 개의 값을 담습니다.

위에 객체를 다룰 때 사용한 Object.Key() 함수가 반환 하는 키 목록은 배열 타입으로 반환 됩니다.

다음은 기본적인 선언 예시 코드 입니다.

let numberArr = [1,2,3];
console.log(numberArr); //(3) [1, 2, 3]
JavaScript

위의 toypeof 함수의 한계에서도 언급 했지만 배열은 Object 타입으로 출력 됩니다.

let numberArr = [1,2,3];
console.log(typeof(numberArr)); //object
JavaScript

배열은 순서대로 값이 부여되어 값은 숫자 0 부터 시작하는 위치 번호를 가지게 됩니다. 그래서 위치를 지정해 그 위치의 값을 접근해 사용 합니다.

값이 부여되지 않은 위치 번호에 접근하면 undefined 가 출력됩니다.

let numberArr = [1,2,3];
console.log(numberArr[0]); // 1
console.log(numberArr[1]); // 2
console.log(numberArr[2]); // 3
console.log(numberArr[3]); // undefined
JavaScript

배열(Array) 에 값 추가

배열에 값을 추가할 땐 push 메소드를 이용합니다. 기본 형태는 배열.push(값); 입니다.

let numberArr = [1,2,3];
console.log(numberArr); //(3) [1, 2, 3]

numberArr.push(5);
console.log(numberArr); //(4) [1, 2, 3, 5]
JavaScript

배열(Array) 길이, 값의 개수

지금 몇 번째 위치 까지 값이 부여되어 있는지는 length 메소드로 확인 가능합니다.

만약 값이 하나도 없다면 length 는 0 이 됩니다.

let numberArr = [1,2,3];
console.log(numberArr.length); //3

numberArr.push(5);
console.log(numberArr.length); //4
JavaScript

오늘은 변수 타입의 기본적인 내용을 다루면서 왜 객체(Object) 가 참조 타입이란 명칭으로 이야기 되는지 알게 되는 시간 이였습니다. 프로그래밍을 하다 보면 어떻게 동작할지는 몰라도 왜 이렇게 동작하지? 라는 점에선 부족할 수 있는데 블로그를 시작해 글을 작성하다 보니 이 부분이 해소되고 있어 좋습니다. 😊

관련 게시물

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

콘텐츠

→ 목차
위로 스크롤