• Q&A
  • 회원가입
  • 로그인

[Basic] JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형식)

3,552  
목차
  1. JS 자료형 (= 데이터타입) 종류
  2. JS 변수에 할당 가능한 자료형
  3. JS 변수 자료형의 중요성
  4. JS 변수 자료형 결정 방식
  5. JS 자료형 - string (문자열)
  6. JS 자료형 - number (숫자)
  7. JS 자료형 - boolean (참거짓)
  8. JS 자료형 - Array (배열) ★
  9. JS 자료형 - object (객체)
  10. JS 자료형 확인 방법 (typeof 연산자)
  11. undefined - 변수에 데이터 값 할당 안 된 상태 표시
  12. null - 명시적으로 값이 비어있음 표시
  13. Symbol (고유 식별자 생성)
  14. Dynamic typing : dynamically typed language
  15. JS 자료형 관련 주소
 

JS 자료형 (= 데이터타입) 종류

primitive type (원시 타입) 6개

더 이상 쪼갤 수 없는 하나의 값. 

 

  • string (문자열)
  • number (숫자)
  • boolean (참거짓)
  • null (값이 없음을 명시적으로 표현)
  • undefined, (변수가 정의되었으나, 값이 정의 안 된 상태)
  • symbol (유일한 식별자 생성)

 


object type (객체 타입) 1개

원시 타입을 묶어 관리 가능한 상자 역할.

Array (배열)・Function(함수) 경우, 객체에 포함됨. 

 

  • object (객체) 

 


PS.

JS는 function(함수)도 변수에 할당 가능. (= first-class function 지원.)

 

※ first-class function 의미:

  1. 변수에 할당 가능.
  2. 매개변수로 전달 가능. 
  3. 함수의 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 데이터 유형 중 문자열은 따옴표로 묶어야 함. 

  1. 따옴표는 큰따옴표든 작은따옴표든 상관 없음.
  2. 문자열 묶는 따옴표는 처음과 끝이 동일해야함. 


var Name = "홈짱닷컴"; // (O)

var Name = '홈짱닷컴'; // (O)

var Name = "홈짱닷컴'; // (X)

var Name = '홈짱닷컴"; // (X)

 


2. 문자열 안에 따옴표 들어간 경우, 감싼 따옴표와 다른 따옴표 사용. 

  1. 문자열을 큰따옴표로 감쌌으면 문자열 내엔 작은따옴표 사용.
  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

  1. 소수 붙여 표기 여부는 자유.
  2. 숫자가 너무 크거나 작으면 지수 표기 가능.

 


[예제]

 

<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 강의
 

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 (한국어)

 



찾아주셔서 감사합니다. Since 2012