[JavaScript] 자바스크립트의 데이터 타입에 대해.araboza

안녕하세요 웹파트 OB 김가연입니다.

 

사실 글이 날아가서 너무 우울해요.

 

2주차 아티클로 자바스크립트의 데이터 타입에 대해서 알아보려고 합니다.

 

저는 파이썬 말고는 C랑 java만 공부해봐서 항상 데이터 타입을 선언하는 언어에 익숙했는데요, 자바스크립트는 파이썬과 비슷하게 인터프리터 언어라서 데이터 타입을 선언할 필요가 없더라구요.

 

그렇다고 데이터 타입을 몰라서 되냐?!?

그건 절대 아니지요. 그래서 데이터 타입이 뭔지, 왜 필요한지, 그리고 자바스크립트에는 어떤 데이터 타입이 있는지 아티클로 알아봅시다!

 

---

데이터 타입이란?

데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말합니다. 데이터는 여러 형태를 가질 수 있으며, 각 데이터 타입은 그 데이터가 어떻게 저장되고 처리되는지를 결정합니다.

왜 잘 알아야할까요? 왜 필요하죠?

의문이 들 수 있습니다. 아니 데이터 타입 선언도 안하는데 내가 그렇게 자세히 알아야하나?

하지만 모든 CS 지식은 도움이 되지요...

 

데이터는, 메모리에 저장하고 참조할 수 있어야합니다.

메모리에 값을 저장하기 위해서는 먼저 메모리 공간을 확보해야할 메모리 크기를 알아야하는데, 모든 데이터 타입이 BigInt면 매우 비효율적이겠죠? 한정된 자원 내에서 효율적으로 메모리를 사용하기 위해서는 데이터 타입을 잘 알아야합니다.

 

아래는 데이터 타입이 중요한 이유를 세줄 요약해보았습니다.

 

1. 적절한 데이터 타입을 선택하여 메모리를 효율적으로 사용할 수 있습니다.

2. 데이터 타입을 명확하게 하여 값이 꼬이는 오류를 미연에 방지할 수 있습니다.

3. 코드 의도를 정확하게 전달하여 원활한 소통을 이끌어 낼 수 있습니다.

 

그러니까... 데이터 타입 잘 알아야 하겠죠?

자바스크립트에는 어떤 데이터 타입이 있는지 알아봅시다.

 

---

자바스크립트의 데이터 타입

자바스크립트는 크게 두 가지 카테고리의 데이터 타입을 가지고 있어요.

원시 타입(Primitive Data Types)과 객체(참조) 타입(Object/Reference Data Types)입니다.

1. 원시 타입

원시 타입을 한줄로 정의하자면... 불변(immutable)하며, 메모리에 직접 저장되는 타입입니다.

아래와 같은 타입들이 존재해요.

 

• 숫자 (Number) : 숫자 타입(정수, 소수점, NaN까지 포함)
• 문자열 (String) : 문자열
• 불리언 (Boolean) : 논리적 참 거짓
• 심볼 (Symbol) : 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용
• 빅인트 (BigInt) : Number의 안전 범위를 벗어나는 큰 숫자를 관리하기 위해 사용 
• undefined : 선언 되었지만 값 할당 전일 때, 아니면 존재하지 않는 객체 프로퍼티에 접근할 때
• null : 개발자가 의도적으로 변수에 값이 없음을 명시할 때 사용

근데 이런 값들.. 그냥 변경한적이 많으실 거예요. 불변이라고 했는데 대체 어떻게 변경되는거지?

이 내용은 객체 타입을 간단히 설명 한 뒤에 할당 과정에 대해 설명하면서 더 자세히 알아볼게요!

 

 

2. 객체 타입

객체 타입을 한줄로 정의하자면... 변경이 가능하고, 메모리에 주소를 통해 참조됩니다. 

사실 원시 타입 말고는 전부 객체 타입으로 생각하시면 되는데, 대표적인 세가지를 알아볼게요.

• 객체 (Object): 키-값 쌍으로 구성된 데이터 구조로, 다양한 속성과 메서드를 가질 수 있습니다.
• 배열 (Array): 여러 값을 순서대로 저장할 수 있는 객체의 일종입니다.
• 함수 (Function): 재사용 가능한 코드 블록으로, 일급 객체로 취급됩니다. 즉, 변수에 할당하거나 인자로 전달할 수 있습니다.

이런 객체 타입은 객체가 다른 객체에 할당될 때 새로운 공간을 생성하지 않고 실제 매개변수의 주소를 전달하게 됩니다!

 

사실 더 중요한 건 변수 할당이 어떻게 되고, 데이터를 어떻게 처리하는지를 잘 아는 것이 더 중요하다고 생각하여, 할당되는 과정 자체를 비교해보는 데 집중했습니다.

 

3. 원시 타입 vs 객체 타입, 할당이 뭔데?

원시 타입이 변수를 선언 -> 할당 -> 재할당 하는 과정

원시 타입에서 변수를 선언하고 할당할 때, 변수는 값 자체를 메모리에 저장합니다.

 

let a = 10;
let b = a;
a = 20;

 

해당 코드에서, a와 b를 콘솔에 찍으면 결과 값이 어떻게 나올까요?

바로 a는 20, b는 10입니다.

 

왜냐하면 값 자체를 복사하기 때문이죠.

처음 a는 10을 메모리에 저장하고, 해당 메모리를 가리키게 됩니다.

그 다음 b는, a에 저장되어있는 10을 보고 그 값을 복사하여 새로운 메모리 공간에 저장합니다.

 

즉, 값은 같지만 서로 다른 메모리를 가리키고 있는 것이죠!

 

그래서 a의 값을 재할당하게 되면 아까 a가 가리키던 10의 관계를 끊어버리고 새로 20을 메모리에 저장한 뒤에 가리키게 되는 것입니다. 이 과정에서 b와 b가 가리키고 있는 10과의 관계는 끊기지 않으니 서로 상관 없이 다른 값을 참조하게 되는 것이죠!

 

객체 타입이 변수를 선언 -> 할당 -> 재할당 하는 과정

객체 타입에서 변수를 선언하고 할당할 때, 변수는 실제 데이터가 아닌 데이터가 저장된 메모리의 주소를 저장합니다.

 

let obj1 = { name: "핫식스" };
let obj2 = obj1;

 

이렇게 되면 obj1에는 객체 타입의 배열이 저장되어있고, obj2는 obj1의 주소를 할당받게 됩니다.

즉 obj1도 obj2도 배열이 담겨있는 똑같은 메모리 주소를 가리키는 것이죠!

 

만약 제가 다음과 같이 변경을 하게 되면 어떨까요?

obj1 = { name: "몬스터" };

 

obj2를 콘솔에 찍으면 어떻게 나올까요?

바로 obj1과 똑같은 값이 나오게 됩니다.

obj2가 obj1과 똑같은 객체를 참조하고 있기 때문에 변경된 내용을 반영하게 되는 것이죠!

 

 

표 정리!

특징	원시 타입	객체 타입
할당 방식	값 자체를 저장	메모리 주소를 저장
불변성	불변(값 변경 시 새로운 메모리 할당)	가변(속성 변경 시 같은 메모리 참조)
메모리 관리	간단함	복잡함(가비지 컬렉션 등 필요)
복사 방식	값 복사	참조 복사(주소 복사)

 

 

결론

이렇게 각 특성을 알아보고 메모리 관리도 찍먹해보았습니다. (메모리 관리의 ㅁ만 말한 것 같지만요...)

복사 방식이 어떤지 잘 알았으니 왜 값이 제대로 안담기지?!? 싶을 때는 타입을 어떻게 선언하고 있는지 뜯어보면 좋을 것 같네요~~

 

저는 효율성을 굉장히 추구하는 사람이기 때문에, 다음주에는 객체 타입의 메모리 관리를 어떻게 효율적으로 하면 좋을 지 알아보려고 해요. 

 

그럼 다음주에 뵙겠습니다 안뇽