[JAVASCRIPT] 데이터 타입-기본타입&참조타입(객체 프로퍼티)

자바스크립트의 데이터 타입은 기본타입과 참조타입으로 나뉜다.

 

기본 타입

숫자, 문자열, 불린 값을 포함해 null, undefined라는 타입이 있다.

이 타입의 특징은 그 자체로 하나의 값을 나타낸다는 점이다.

 

자바는 다소 느슨한 타입 체크 언어인데. 변수를 선언할 때 타입을 미리 정하지 않고 

var이라는 한가지 키워드로 변수를 선언한다. 이렇게 선언된 변수에는 어떤 형태의 테이터를 저장하느냐에 따라 해당 변수의 타입이 정해진다.

 

 

//숫자 타입 number
var intNum =10;
var floatNum = 0.1;
 
//문자열 타입 : 작은/큰 따옴표 string
var singleQuoteStr = 'single quote string';
var doubleQuoteStr = "double quote string";
var singleQuoteStr = 'a';
 
//boolean 타입
var boolVar = true;
 
//undefined 타입
var emptyVar;
 
//null 타입
var nullVar = null;

숫자형 데이터 타입

자바나 C언어와 달리 자바스크립트는 number이라는 숫자형 한가지만 가지고 있다.

그 이유는 64비트의 부동 소수점 형태로 숫자를 저장하기 때문이다.

자바스크립트에는 또한 정수형이 따로 없으며 모두 실수로 처리하므로 연산할 때 주의해야한다.

 

 

문자열 타입

문자열은 작은 따옴표나 큰 따옴표로 생성한다. 

자바스크립트에서는 문자 하나만 취급하는 char 문자형이 존재하지 않는다. 

주의할 점은 한번 정의된 문자열은 변하지 않는다.
한번 생성된 문자열은 읽기만 가능하고 수정은 불가능하다.

 

//str 문자열 생성
var str = 'test';
console.log(str[0],str[1],str[2],str[3]);
 
//문자열은 수정되지 않는다.
str[0]= 'T';
console.log(str);

null과 undefined 타입

이 두 타입은 자바스크립트에서값이 비어있음을 나타낸다.

자바스크립트에서 undefined 타입이자 값을 나타낸다.

null 타입 변수의 경우, 값을 확인할 시 typeof로 확인시 object이다. 

null값은 ===일치 연산자를 사용하여 변수값을 직접 비교 확인해야한다.

 

//null 타입 변수 생성
var nullVar = null;
 
//null 타입인 경우 변수값을 확일할시 typeof로 비교하면 안되고 ===일치 연산자를 통해 직접 비교해야한다.
console.log(typeof nullVar ===  null); // false
 
console.log(nullVar === null); // true

 

참조타입

자바스크립트에서 숫자, 문자열, 불린, null, undefined같은 기본 타입을 제외한 모든 값은 객체이다.

따라서 배열, 함수 ,정규식도 자바스크립트의 객체로 표현된다.

자바스크립트에서 객체란 이름(key):값(value) 형태의 프로퍼티들을 저장하는 컨테이너로서 HASH와 개념이 유사하다.

기본형이 하나의 값을 가지는 반면 , 참조타입은 여러개의 프로퍼티들을 포함할 수 있다는 특징이 있다.

 

자바스크립트의 객체 생성

자바스크립트의 객체 개념은 일반적인 C++이나 자바의 객체 지향 언어와는 다르다.

자바스크립트의 객체에서는 클래스라는 개념이 없고, 리터널이나 생성자 함수등 별도 생성방식이 존재하지 않는다.

 

자바스크립트에서 객체를 생성하는 방법에는 3가지 방법이 있다.

1) 기본 제공 Object() 객체 생성자 함수를 사용

2) 객체 리터널 이용

※리터럴이란? : 표기법을 의미한다.

3) 생성자 함수 사용

 

//object()를 이용해서 foo 빈 객체 생성
var foo = new Object();
 
//foo 객체프로퍼티 생성
foo.name='foo';
foo.age=30;
foo.gender="남자";
 
console.log(typeof foo); // object
console.log(foo); // {name: 'foo', age: 30, gender: 'male'}

//객체 리터널 방식으로 객체 생성
var foo = {
        name : 'foo',
        age : 30,
        gender: 'male'
};
 
console.log(typeof foo); // object
console.log(foo); // {name: 'foo', age: 30, gender: 'male'}

객체 프로퍼티 읽기/쓰기/갱신

존재하지 않는 프로퍼티를 읽을 경우 = undefined가 출력된다.

존재하지 않는 프로퍼티를 생성한 경우 해당 프로퍼티가 생성이 된다.

때에따라 대괄호 표기법을 사용해야한다. (표현식/예약어인 경우 , 연산자가 들어간 표현식)

※가령 표현식이 잘못 들어간 경우 NaN가 출력된다. 

//객체 리터널 방식을 통한 foo 객체 생성
var foo = {
        name :'foo',
        major : 'advertising'
};
 
//객체 프로퍼티 읽기 : foo
console.log(foo.name);
// [ ]대 괄호 안에 문자열을 넣는 방식으로도 읽을 수 있다. : foo
console.log(foo.['name']); 
 
 
//객체 프로퍼티 동적 갱신
foo.major = "programming";
console.log(foo.major); // programming
 
//객체 프로퍼티 동적 생성
foo.gender = 'male';
console.log(foo.gender); // male
 
//대괄호 표기법만 사용해야하는 경우
foo['full-name'] = 'foo bar';
console.log(foo['full-name']);//foo bar
console.log(foo.full-name);//NaN
console.log(foo.full); // undefined

for in 문과 객체 프로퍼티 출력

for in문을 통하여 객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.

//객체 리터널을 통한 foo 객체 생성
var foo={
        name: 'foo',
        age: 30,
        major : 'scientist'
};
 
 
//for in문을 통한 객체 프로퍼티 출력
var prop;
for(prop in foo){
    console.log(prop, foo[prop]);
}
//출력값
/*
name foo
age 30
major scientist
*/

객체 프로퍼티 삭제

객체의 프로퍼티는 delete 연산자를 이용해 즉시 삭제 가능하다.

delete 연산자는 객체의 프로퍼티를 삭제할뿐 객체 자체를 삭제는 불가능하다.

//객체 리터널을 통한 foo 객체 생성
var foo={
        name: 'foo',
        age: 30,
        major : 'scientist'
};
 
console.log(foo.name);
delete foo.name; //foo 의 name 프로퍼티 삭제
console.log(foo.name); // undefined : 삭제됨
 
delete foo; //foo 객체 삭제 시도
cosole.log(foo.age); // 삭제 되지 않음 // 30