오늘은 JavaScript의 데이터 타입의 종류 및 각각의 특징에 대해 알아보고자 합니다.
💡JavaScript의 특징
JavaScript의 데이터 타입에 대해 공부하기 전에 알아두어야 할
JavaScript는 기본적으로 타입 체크가 느슨한 언어입니다.
타입 체크가 엄격한 언어인 C, Java의 경우를 떠올려 볼까요?
이러한 언어에서 우리는 변수 선언 시 예약어(int, float, …)를 이용하여 데이터 타입을 명시해준 후 이를 사용합니다. 이후 해당 변수에는 명시한 데이터 타입만 삽입할 수 있습니다.
int a = 1; // a의 타입은 int
char b = ‘a’; // b의 타입은 char하지만 JavaScript에서는 변수 선언 시 저장할 데이터 타입과 상관없이 var 등의 키워드를 이용합니다. 그리고 해당 변수의 데이터 타입은 이후 저장될 데이터에 따라 결정됩니다.
var a = 1; // a의 타입은 number
var b = “Hello”; // b의 타입은 string💡데이터 타입의 분류
JavaScript의 데이터 타입은 프로퍼티를 여러 개 가질 수 있는지 여부에 따라 기본 타입과 객체 타입으로 분류할 수 있습니다.
기본 타입은 하나의 값만을 지니며, 값에 의한 호출(Call by Value) 방식으로 동작합니다. 기본 타입에 포함되는 타입으로는 number, string, boolean, undefined, null이 있습니다. 각 타입에 대한 설명은 아래에서 해보도록 하겠습니다.
Call by Value란?
함수 호출 방식 중 하나입니다.
Call by Value인 변수를 함수에 인자로 전달할 때, 함수에는 해당 변수의 복사된 값이 전달되기 때문에 함수 내 변수의 변경 사항이 실제 변수에 영향을 주지 않습니다.
객체 타입은 여러 개의 프로퍼티를 가질 수 있으며, 참조에 의한 호출(Call by Reference) 방식으로 동작합니다. 객체 타입에 포함되는 타입으로는 배열(Array), 함수(function) 등이 있습니다.
Call by Reference란?
함수 호출 방식 중 하나입니다.
Call by Reference인 변수는 어떠한 객체에 대한 참조값을 지니고 있고, 함수의 인자로 전달될 때 이러한 참조값을 전달합니다. 따라서 함수 내에서 해당 값에 변경을 가하면, 참조값이 달라지기 때문에 변수의 값도 달라집니다.
💡기본 타입
숫자(number)
JavaScript에서 숫자 타입인 number는 C, Java등과 같은 언어와 달리 정수형(int)과 실수형(float)을 모두 포괄하는 타입입니다. 이는 JavaScript에서 숫자 데이터는 정수 실수 상관없이 64비트 부동소수점 형태로 저장하기 때문입니다.
이러한 특성 때문에 다른 언어에서 정수형을 사용해본 경험이 있는 사람이라면 JavaScript에서 정수형을 다룰 때 아래 예시와 같은 실수를 하지 않도록 조심해야 합니다.
var a = 5/2 // int형이라면 2가 나오겠지?
console.log(a) // 출력 : 2.5
// 원하는 결과를 얻으려면
console.log(Math.floor(a)) // 출력 : 2문자열(string)
문자열은 작은 따옴표(‘) 또는 큰 따옴표(“)로 나타낼 수 있습니다. JavaScript에서는 char 타입과 같이 하나의 문자를 위한 데이터 타입은 없습니다.
JavaScript의 문자열 사용에 유의해야하는 점은 한 번 정의된 문자열은 변하지 않는다는 점입니다. 한 번 정의된 문자열은 읽기만 가능합니다. 이에 대한 예제는 다음과 같습니다.
var str = ‘test’;
console.log(str[0], str[1], str[2], str[3]); // 출력 : test
// 첫 글자를 대문자로 바꾸고 싶다!
str[0] = ‘T’;
console.log(str); // 출력 : test불린값(boolean)
불린값은 참(true)와 거짓(false)을 나타내는 타입입니다.
undefined와 null
undefined와 null은 모두 값이 없음을 의미합니다. 그러나 undefined의 경우 JavaScript 내 기본적으로 값이 할당되지 않았을 때 적용되는 값이고, null은 개발자가 명시적으로 빈 값임을 나타낼 때 사용하는 값입니다.
이때 undefined는 typeof 함수를 이용해 타입 변수를 확인하면 undefined가 나오는 반면, null은 object가 반환됩니다. 따라서 데이터에 null이 들어있는지 확인하고자 한다면 일치 연산자(===)를 이용해 값을 확인해야 합니다.
var nullVar = null;
// null 확인 방법
console.log(nullVar === null); // 출력 : true💡객체 타입
앞서 이야기한 기본 타입(number, string, boolean, …)을 제외한 모든 값은 JavaScript에서 객체로 표현됩니다. 따라서 배열, 함수, 정규표현식이 이에 해당합니다.
JavaScript에서 객체는 단순하게 이름(key):값(value) 형태의 프로퍼티들을 저장하는 컨테이너입니다. 이는 자료구조 중 해시와 유사합니다.
객체 타입은 여러 개의 프로퍼티를 가질 수 있으며, 기본 타입 뿐만 아니라 다른 객체도 프로퍼티가 될 수 있습니다.
1. 객체 생성
객체를 생성하는 방법은 크게 세 가지로 나뉩니다.
- Object() 생성자 함수 이용
- 객체 리터럴 방식 사용
- 생성자 함수 이용
이번 글에서는 Object() 생성자 함수 사용과 객체 리터럴 방식 사용에 대해서만 우선적으로 알아보고자 합니다.
- Object() 생성자 함수 사용
Object() 생성자 함수는 JavaScript에서 객제 생성을 위해 제공해주는 함수입니다. 아래와 같이 사용할 수 있습니다.
// 새로운 객체 생성
var foo = new Object();
// 객체의 프로퍼티 추가
foo.name = ‘begachu’;
foo.age = 23;
// 만든 객체를 출력해보면?
console.log(foo); // 출력 : { name: ‘begachu’, age: 23 }- 객체 리터럴 방식 사용
객체 리터럴 방식은 객체 생성 표기법을 의미합니다. 우리는 간단한 표기법으로 JavaScript에서 객체를 생성할 수 있습니다.
먼저 중괄호({}) 내에 각각의 프로퍼티를 “프로퍼티 명”: “프로퍼티 값”으로 추가합니다. 예시는 다음과 같습니다.
var foo = {
name: ‘begachu’,
age: 23
};
// 만든 객체를 출력해보면?
console.log(foo); // 출력 : { name: ‘begachu’, age: 23 }2. 객체 프로퍼티 읽기, 쓰기, 갱신하기
객체의 프로퍼티에 접근하기 위한 방법은 다음과 같습니다.
- 대괄호([]) 표기법
- 마침표(.) 표기법
두 접근 방식의 예는 다음과 같습니다.
var foo = {
name: ‘begachu’,
age: 23
};
console.log(foo.name) // 출력 : begachu
console.log(foo[“name”]) // 출력 : begachu
// 잘못된 접근 방법
console.log(foo[name]) // 출력 : undefined대괄호 표기법의 주의사항
위에 예시처럼 대괄호 내 프로퍼티 명을 문자열 형태(“”로 감싸기)로 하지 않은 경우 문제가 발생할 수 있습니다. 이는 대괄호 내 프로퍼티 명이 문자열이 아닌 경우 JavaScript가 모든 객체에서 toString() 메서드를 자동으로 호출하여 문자열로 대체하려고 하기 때문입니다.
또한 아래와 같은 방법으로 새로운 프로퍼티를 추가하고, 기존의 프로퍼티를 수정할 수 있습니다.
var foo = {
name: ‘begachu’,
age: 23
};
foo.name = ‘bega’; // 프로퍼티 값 수정
foo.gender = ‘female’; // 프로퍼티 추가3. 객체 프로퍼티 삭제
객체의 프로퍼티는 delete 연산자를 이용하여 삭제할 수 있습니다. 이때 delete 연산자는 객체의 프로퍼티만 삭제할 수 있으며, 객체 자체는 삭제할 수 없음에 유의해야합니다.
var foo = {
name: ‘begachu’,
age: 23
};
delete foo.name;
console.log(foo.name); // 출력 : undefined
// 객체 자체를 삭제하려고 하면?
delete foo;
console.log(foo); // 출력 : { age: 23 }