-
자바 스크립트의 데이터 타입프론트엔드/JavaScript 2020. 9. 5. 11:43
자바 스크립트의 자료형
자바스크립트에는 'Number', 'String', 'Boolean', 'Object' 등 다양한 데이터 타입이 있다.
이러한 데이터 타입은 크게 기본자료형(primitive)와 객체(Object)로 나뉜다.
기본자료형(Primitive value)
오브젝트를 제외한 모든 값은 변경 불가능한 값(immutable value)다. 그리고 이러한 값들을 "primitive values"라고 말한다.
1. Boolean 타입
'Boolean'은 논리적 요소를 나타내며, 'true'와 'false' 두 개의 값을 갖는다.
일반적으로 '0', 'null', 'undifiend', 'NaN'은 false 그 외 값은 true.
<body> <h1> 테스트입니다. </h1> <p id="test"> 테스트용 문장입니다. </p> <script> document.getElementById("test").innerHTML = (1==2); // 숫자 1,2를 비교해서 true 또는 false 값이 // "test"를 id값으로 갖는 html 문서에 출력되도록 설정함. // 이 경우 1과 2가 같지 않기 때문에 "false"가 문서에 출력됨. </script> </body> </html>2. Number 타입
자바스크립트에서 숫자는 다른 언어와 달리 정수, 실수 구분없이 사용할 수 있다.
즉 모든 수를 실수로서 표현현다.
<body> <h1> 테스트입니다. </h1> <p id="test"> 테스트용 문장입니다. </p> <script> var num1 = 10; // 소수점을 사용하지 않은 표현 var num2 = 10.00; // 소수점을 사용한 표현 var num3 = 10e6; // 10000000 var num4 = 10e-6; // 0.00001 document.getElementById("test").innerHTML = num1+"<br>"+num2+"<br>"+num3+"<br>"+num4; </script> </body> </html>숫자 타입에서는 단순한 숫자 표현 이외에도 무한대를 나타내는 'infinite'와 'Nan'이 있다.
'infinite'는 연산한 결과값이 무한대일 경우 표시된다.
양의 무한대일 경우 'infinite', 음의 무한대일 경우 '-infinite'로 표현된다.
<body> <h1> 테스트입니다. </h1> <p id="test"> 테스트용 문장입니다. </p> <script> console.log(1/0); // 콘솔창에 Infinity 출력 console.log(-1/0); // 콘솔창에 -Infinity 출력 </script> </body>그 외에도 'Not A Number'의 약자인 'Nan'이 있다. 이는 연산 결과시 숫자가 필요한데 숫자가 아닌 다른 자료형이 들어올 경우 화면에 표시되는 표현이다.
아래와 같은 경우 숫자로 이뤄진 문자열의 자료형을 숫자로 바꿔주는 'parseInt()' 메서드를 사용할 때 안에 문장으로 이뤄진 문자열이 있어서 'NaN'이 표시된 것이다.
<body> <h1> 테스트입니다. </h1> <p id="test"> 테스트용 문장입니다. </p> <script> console.log(parseInt("hello")) // 이 경우 'NaN'이 출력됨 // parseInt의 경우 숫자로 이뤄진 문자열을 정수형 자료로 바꿔주는 명령어 // 하지만 문자열 그 자체를 정수형 자료로 바꿀 수 없음 // 그래서 'NaN'이 출력됨 </script> </body> </html>3. String 타입
'String' 타입은 말 그대로 문자열을 나타내는 타입이다.
'String'의 경우 큰 따옴표 ("") 혹은 작은 따옴표 ('') 안에 들어있는 내용을 넣어서 표현해준다.
자바스크립트는 해당 따옴표 안에 있는 내용을 'String' 타입으로서 인식한다.
<body> <h1> 테스트입니다. </h1> <p id="test"> 테스트용 문장입니다. </p> <script> console.log("this is String") </script> </body>4. null과 undefined 타입
'null'과 'undefined' 자료 타입은 굉장히 독특한 자료형인데, 둘 다 변수에 값이 없음을 나타내는 자료형이다.
이렇게만 표현하면 둘은 같아보이지만 엄밀히 말하면 둘은 이러한 차이가 있다.
'underfined'는 변수가 초기화되지 않거나 존재하지 변수의 값이자 자료타입.
'null'은 명시적으로 해당 변수의 값이 비어있음을 나타내는데 쓰이는 변수의 값이자 자료타입.
즉 'underfined'는 변수를 생성든 생성하지 않든 변수에 별도의 값을 지정하지 않거나 초기화하지 않으면 자동 부여되는 자료 타입이자 값이다.
반면 'null'은 명시적으로 프로그래머가 해당 변수는 특이한 값이 없다는 'null'을 선언해줘야 비로소 'null'자료 타입이 될 수 있다.
<body> <h1> 테스트입니다. </h1> <p id="test"> 테스트용 문장입니다. </p> <script> console.log("선언하지 않은 변수의 자료 타입 확인"); console.log((A)===null); // false 출력 console.log((A)===undefined); // true 출력 console.log("선언은 했으나 초기화 하지 않은 변수 자료타입 확인"); var A; console.log((A)===null); // false 출력 console.log((A)===undefined); // true 출력 console.log("변수를 'null'값으로 준 변수 자료타입 확인"); var A = null; console.log((A)===null); // true 출력 console.log((A)===undefined); // false 출력 </script> </body>5. 심볼(Symbol)
고유한 식별자가 필요할 때 사용함. 객체의 프로퍼티를 작성할 때 키 값을 심볼로 작성하면 충돌의 위험이 없어진다.
<script> var key = Symbol("key"); console.log(typeof key); // Symbol 출력 var obj = {} obj[key] = 'value'; // Symbol화된 키 값에 value 부여 console.log(obj[key]); // value 출력 </script>객체(Object)
자바스크립트에서 기본 자료형(Primitive type)을 제외한 나머지 자료형을 모두 객체 자료형이라 한다.
일반적으로 여러 기본 자료형을 묶어서 하나의 덩어리를 만들어낸 것을 객체라고 한다.
우리가 흔히 보는 배열이나 함수들도 전부 객체에 속한다.
모든 객체는 기본적으로 변경 가능 값 (mutable value)이다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
for...of / for...in 에 대해서 (0) 2020.09.09 자료형 변환(type conversion) (0) 2020.09.09 Var vs let vs Const (0) 2020.09.09 자바 스크립트 적용하기 (0) 2020.09.05 자바스크립트(Java Script)란? (0) 2020.08.25