데이터 타입
원시 데이터 타입(primitive type)
기본 데이터 타입 이라고도 한다.
- 숫자
- 문자열
- 불리언
- null
- undefined
Wrapper Object
- JavaScript에서 제공하는 편의성
- 원시 데이터 타입을 마치 객체 데이터 타입으로 사용하기 위해 Wrapper Object를 제공한다.
- JavaScript에서는 Wrapper Object가 자동으로 적용되기 때문에 편리하다.
제공되는 Wrapper Object
| 원시 데이터 타입 | Wrapper Object |
|---|---|
| 숫자 | Number |
| 문자열 | String |
| 불리언 | Boolean |
| null | 없음 |
| undefined | 없음 |
코드 예시
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var str = 'code';
document.write(str.length());
//출력 : code
//str.length() 형태는 마치 str이 객체이고 그 속성안에 메소드가 들어있어서 객체 속의 메소드를 사용하는 형태이다.
// String 이라는 Wrapper Object를 통해 마치 객체처럼 사용하는 것이 가능한 것이다.
</script>
</body>
</html>여기서 변수 str은 원시 데이터 타입의 변수이다. 하지만 str.length() 형태처럼 객체의 속성에 메소드가 존재하여 그 메소드를 사용하는 형태는 str을 객체 데이터 타입 변수처럼 사용하는 형태이다.
이것이 가능한 이유는 JavaScript에서 자동으로 문자열에 String Wrapper Object를 적용시켜주었기 때문에 그 순간 객체 데이터 타입처럼 사용할 수 있는 것이다.
그리고 이 순간이 지나면 다시 원시 데이터 타입으로 돌아온다.
이것은 var str = 'code';가 str new String('code');로 Wrapper Object 처리된 것이다.
객체 데이터 타입
참조 데이터 타입 이라고도 한다.
- 원시 데이터 타입 이외의 모든 것
복제
원시 데이터 타입에서 일어나는 것으로 복제를 통해 다른 값에 전달되기 때문에 원본에는 영향을 미치지 않는다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var a = 1;
var b = a;
b = 2;
document.write(a); //출력 : 1
</script>
</body>
</html>참조
객체 데이터 타입에서 일어나는 것으로 참조를 통해 다른 값에 전달되기 때문에 원본에도 영향을 미친다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var a = {'name' : 'dong'};
var b = a;
b.name = 'hyeon';
document.write(a.name); //출력 : hyeon
</script>
</body>
</html>주의사향
다음 경우에는 참조로 데이터를 객체를 이용하는 것이 아니라 새로운 객체를 생성하여 할당하는 것이기 때문에 별개의 데이터를 만든 것이 되는 것이라서 원본에는 영향을 주지 않는다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var a = {'name' : 'dong'};
var b = a;
b = {'name' : 'hyeon'}; //새로운 객체를 생성하여 할당
document.write(a.name); //출력 : dong
</script>
</body>
</html>함수에서의 복제와 참조
함수에서도 복제를 사용하는지 참조를 사용하는 지에 따라 원본에 영향을 미치는 여부가 다르기 때문에 이를 고려하여 함수를 만들어야 한다.
함수에서 복제가 일어나는 경우(원본에 변화 없음)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var a = 1;
function func(b){
b = 2; //원시 데이터 타입이기 때문에 참조
}
func(a);
document.write(a); //출력 : 1
</script>
</body>
</html>함수에서 참조가 일어나는 경우(원본에 변화 있음)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var a = {'name' : 'dong'};
function func(b){
b.name = 'hyeon'; //객체 데이터 타입이기 때문에 참조
}
func(a);
document.write(a.name); //출력 : dong
</script>
</body>
</html>