목차
- JS 자료형 (= 데이터타입) 종류
- JS 변수에 할당 가능한 자료형
- JS 변수 자료형의 중요성
- JS 변수 자료형 결정 방식
- JS 자료형 - string (문자열)
- JS 자료형 - number (숫자)
- JS 자료형 - boolean (참거짓)
- JS 자료형 - Array (배열) ★
- JS 자료형 - object (객체)
- JS 자료형 확인 방법 (typeof 연산자)
- undefined - 변수에 데이터 값 할당 안 된 상태 표시
- null - 명시적으로 값이 비어있음 표시
- Symbol (고유 식별자 생성)
- Dynamic typing : dynamically typed language
- JS 자료형 관련 주소
JS 자료형 (= 데이터타입) 종류
primitive type (원시 타입) 6개
더 이상 쪼갤 수 없는 하나의 값.
- string (문자열)
- number (숫자)
- boolean (참거짓)
- null (값이 없음을 명시적으로 표현)
- undefined, (변수가 정의되었으나, 값이 정의 안 된 상태)
- symbol (유일한 식별자 생성)
object type (객체 타입) 1개
원시 타입을 묶어 관리 가능한 상자 역할.
Array (배열)・Function(함수) 경우, 객체에 포함됨.
PS.
JS는 function(함수)도 변수에 할당 가능. (= first-class function 지원.)
※ first-class function 의미:
- 변수에 할당 가능.
- 매개변수로 전달 가능.
- 함수의 return 값으로 가능.
※ 엘리 님 (JS 3. data-type 강의) https://youtu.be/OCCpGh4ujb8
JS 변수에 할당 가능한 자료형
JS 변수는 문자열, 숫자, 배열, 객체 등 많은 데이터 값 담을 수 있음.
(단, 문자와 숫자가 함께 담기면, 숫자 역시 문자로 간주해 버림.)
[예제1] 변수에 할당 가능한 여러 자료형.
var year = 2012; // 숫자
var siteName = "homzzang"; // 문자열
var class = ["HTML", "CSS", "JavaScript"]; // 배열
var x = {name:"홈짱닷컴", host:"Homzzang.com"}; // 객체
[예제2] 문자와 숫자를 함께 변수에 할당한 경우, 숫자로 문자로 간주.
<p id="homzzang"></p>
<script>
var x = "홈짱닷컴" + 2012;
document.getElementById("homzzang").innerHTML = x;
</script>
결과보기 (결과값: 홈짱닷컴2012)
JS 변수 자료형의 중요성
JS가 제대로 작동하는데 있어서 데이터 유형은 매우 중요.
데이터 유형이 제대로 정해지지 않으면, JS가 정상 작동 X.
(예) "3" + 4 경우, JS는 7이 아닌 34 출력.
JS 변수 자료형 결정 방식
JS는 Loose type (느슨한 타입), Dynamic type (동적 타입) 언어임.
(즉, JS 변수는 할당되는 데이터 유형에 따라 그 유형이 자동 결정됨.)
[예제]
var x; // undefined 상태.
var x = 3; // number 상태.
var x = "홈짱닷컴"; // string 상태.
[참고]
1. 보통 다른 언어는 변수 타입 선언 후 그에 맞게 값을 넣어 사용함.
2. JS의 이런 문제를 해결 위해, TypeScript 언어 등장함. 꼭 학습!
JS 자료형 - string (문자열)
1. JS 데이터 유형 중 문자열은 따옴표로 묶어야 함.
- 따옴표는 큰따옴표든 작은따옴표든 상관 없음.
- 문자열 묶는 따옴표는 처음과 끝이 동일해야함.
var Name = "홈짱닷컴"; // (O)
var Name = '홈짱닷컴'; // (O)
var Name = "홈짱닷컴'; // (X)
var Name = '홈짱닷컴"; // (X)
2. 문자열 안에 따옴표 들어간 경우, 감싼 따옴표와 다른 따옴표 사용.
- 문자열을 큰따옴표로 감쌌으면 문자열 내엔 작은따옴표 사용.
- 문자열을 작은따옴표로 감쌌으면 문자열 내엔 큰따옴표 사용.
var Name = "홈짱닷컴 'Homzzang.com'"; // (O)
var Name = '홈짱닷컴 "Homzzang.com"'; // (O)
var Name = "홈짱닷컴 "Homzzang.com""; // (X)
var Name = '홈짱닷컴 'Homzzang.com''; // (X)
[예제]
<p id="homzzang"></p>
<script>
var kName = "홈짱닷컴"; // (O)
var eName = 'homzzang.com'; // (O)
var hello = "Hello, I'm Homzzang."; // (O)
var classl = "'HTML', 'CSS', 'JavaScript'"; // (O)
var class2 = '"PHP", "SQL", "Server"'; // (O)
document.getElementById("homzzang").innerHTML =
kName + "<br>" +
eName + "<br>" +
hello + "<br>" +
classl + "<br>" +
class2;
</script>
결과보기
3. 문자열은 typeof 연산자로 자료형 확인하면 string 찍힘.
<p id="homzzang"></p>
<script>
var site = "홈짱닷컴 Homzzang.com";
var hz = document.getElementById("homzzang");
hz.innerHTML = typeof site; // string
</script>
결과보기
JS 자료형 - number (숫자)
JS는 숫자 자료형은 오직 number 자료형 하나만 존재.
※ 타 언어는 여러 숫자 자료형 갖음: Java, C++, C#, Python, PHP
- 소수 붙여 표기 여부는 자유.
- 숫자가 너무 크거나 작으면 지수 표기 가능.
[예제]
<p id="homzzang"></p>
<script>
var a = 34.00; // 34
var b = 34; // 34
var c = 34e5; // 3400000
var d = 34e-5; // 0.00034
var res = a + "/" + typeof a + "<br>" + // 34/number
b + "/" + typeof b + "<br>" + // 34/number
c + "/" + typeof c + "<br>" + // 3400000/number
d + "/" + typeof d + "<br>"; // 0.00034/number
document.getElementById("homzzang").innerHTML = res;
</script>
결과보기
JS 자료형 - boolean (참거짓)
※ false(거짓) / true (참) 값만 갖으며, 조건문 테스트 시 유용.
※ false / true 경우, typeof 연산자로 확인하면 boolean 찍힘.
false (거짓) 경우
0, -0, null, undefined, NaN, '', "", false (※ '' 또는 "": 빈 문자열)
(예)
Nan == Nan / 1 === '1' / 1 != '1' / null === undefined
true (참) 경우
-1, [], 'homzzang', 'false', 그외 다른 값. (예) 1, 특정 값
(예)
NaN != NaN / 1 == '1' / 1 !== '1' / null == undefined
[예제]
1. true, false를 직접 변수에 할당
var x = true;
var y = false;
2. 연산식을 변수에 할당
const z = 3 < 1; // false
JS 자료형 - Array (배열) ★
※ JS는 배열을 객체로 간주. (typeof 연산자로 확인 시, object 찍힘.)
1.
JS 배열은 대괄호인 [ ]로 묶고, 배열되는 항목들은 ,(콤마)로 구분.
2.
배열되는 항목들의 색인은 0부터 시작.
즉, 가장 처음은 [0], 두 번째는 [1], 세 번째는 [2] ....
<p id="homzzang"></p>
<script>
var guide = ["HTML ","CSS ","JavaScript"];
document.getElementById("homzzang").innerHTML = guide[0] + guide[1] ;
</script>
[주의1] 하나의 대괄호 안에 여러 색인번호 적으면 마지막 것만 출력.
<p id="homzzang"></p>
<script>
var guide = ["HTML ","CSS ","JavaScript"]; // 3개 항목 문자 배열. 즉, HTML, CSS, JavaScript 를 변수 guide에 할당
document.getElementById("homzzang").innerHTML = guide[0, 1] ; // 두 번째 항목인 CSS만 출력
</script>
[주의2] 변수명에 JS 예약어 (예: var, class, ...) 사용하면 출력 X
<p id="homzzang"></p>
<script>
var class = ["HTML ","CSS ","JavaScript"];
document.getElementById("homzzang").innerHTML = class[0] + class[1] ;
</script>
결과보기 (※ 아무 것도 출력 X)
JS 자료형 - object (객체)
1. JS에서 typeof 연산자로 객체 자료형 확인하면, object 찍힘.
<p id="homzzang"></p>
<script>
var site = {siteName:"홈짱닷컴", url:"homzzang.com"}
var hz = document.getElementById("homzzang");
hz.innerHTML = typeof site; // object
</script>
결과보기
2. JS 객체는 중괄호 ({ })로 묶인 데이터 묶음 의미.
※ 객체의 각 속성은 콤마 ( , )로 구분.
객체명 = {속성명:값, 속성명:값, 속성명:값, ....}
(예)
var site = {siteName:"홈짱닷컴", url:"homzzang.com", guide:"'HTML', 'CSS', 'JavaScript'"}
3. 객체 속성 출력하려면, 「객체명.속성명」 형식으로 접근.
(예) site의 guide 속성 출력하려면, siite.guide 형식 사용.
<p id="homzzang"></p>
<script>
var site = {
siteName : "홈짱닷컴",
url : " (homzzang.com) ",
guide :"'HTML', 'CSS', 'JavaScript'"
};
document.getElementById("homzzang").innerHTML =
site.siteName + site.url + site.guide;
</script>
결과보기
JS 자료형 확인 방법 (typeof 연산자)
typeof 연산자는 데이터 유형 확인 위한 연산자로 데이터 앞에 기재.
[주의] JS는 array(배열)을 object(객체)로 간주.
[예제]
<p id="homzzang"></p>
<script>
document.getElementById("homzzang").innerHTML =
typeof "HTML" + "<br>" + //string
typeof 3.14 + "<br>" + // number
typeof true + "<br>" + // boolean
typeof [1,2,3,4] + "<br>" + // object (∵ 배열은 객체로 취급)
typeof {sName:'홈짱닷컴', year:2012}; // object
</script>
결과보기
undefined - 변수에 데이터 값 할당 안 된 상태 표시
1. 변수에 데이터 할당 안 하면, 변수는 undefined 출력함.
또한, typeof 연산자로 확인한 값 역시 undefined 출력함.
<p id="homzzang"></p>
<script>
var site;
var hz = document.getElementById("homzzang");
hz.innerHTML = site + "/" + typeof site;
</script>
결과보기 (결과값:undefined/undefined)
2. JS는 따옴표로 묶인 빈 문자열은 string으로 간주. (undefined와 무관)
<p id="homzzang"></p>
<script>
var site = "";
var hz = document.getElementById("homzzang");
hz.innerHTML = site + "/" + typeof site;
</script>
결과보기 (결과값:/string)
3. undefined의 데이터 타입: undefined
// undefined
let hz;
console.log(`value: ${hz}, type: ${typeof hz}`); // "value: undefined, type: undefined"
결과보기 ※ 좌측 맨 하단 console 버튼 클릭 후 확인
null - 명시적으로 값이 비어있음 표시
null의 데이터 타입 : object (객체)
// null
let hz = null;
console.log(`value: ${hz}, type: ${typeof hz}`); // "value: null, type: object"
결과보기 ※ 좌측 맨 하단 console 버튼 클릭 후 확인
Symbol (고유 식별자 생성)
※ ECMAScript 2015 (6th Edition, ECMA-262)이라, IE는 지원 X
Symbol() : 동일 문자열이더라도 고유 식별자 생성.
// symbol()
const a = Symbol('id');
const b = Symbol('id');
console.log(a === b); // false
결과보기 ※ 좌측 맨 하단 console 버튼 클릭 후 확인
Symbol.for() : 동일 문자열 경우 동일 식별자 생성.
// symbol.for()
const a = Symbol.for('id');
const b = Symbol.for('id');
console.log(a === b); // true
결과보기 ※ 좌측 맨 하단 console 버튼 클릭 후 확인
PS. symbol 안 문자열(예: id)은 description 객체 이용해 출력.
// symbol.for()
const a = Symbol.for('id');
console.log(`value:${a.description}, type:${typeof a}`); // "value:id, type:symbol"
console.log(`value: ${a} type:${typeof a}`); // 에러 발생
결과보기
PS. mdn symbol 강의
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol (영어)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol (한국어)
Dynamic typing : dynamically typed language
let text = 'hello';
console.log(text.charAt(0)); // h
console.log(`value: ${text}, type: ${typeof text}`); // "value: hello, type: string"
text = 1;
console.log(`value: ${text}, type: ${typeof text}`); // "value: 1, type: number"
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`); // "value: 75, type: string"
text = '8' / '2';
console.log(`value: ${text}, type: ${typeof text}`); // "value: 4, type: number"
console.log(text.charAt(0)); // 에러 발생. (∵ 위에서 text 변수의 타입이 number로 바뀌었기 때문)
PS. let 경우 중간에 데이터값이 바뀐 경우 type도 바뀌는데, 그 결과 코드 결과값도 바뀔 수 있음.
JS 자료형 관련 주소
엘리 님 (JS 3. 데이터타입) 강의
https://youtu.be/OCCpGh4ujb8
엘리 님 JS 3. 연산자 | boolean의 모든것 && 연산자
https://youtu.be/SswrP0JLNGY
mdn datatype
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures (영어)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures (한국어)
mdn typeof
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof (영어)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/typeof (한국어)