JS의 데이터 타입 (자료형)

 

 

 

 

 

 

 

 

 

 

▶▶   JS의 데이터타입

 

 

 

1.  객체 타입

–  Object
–  Reference Type(참조형)
    → 참조형타입은 첫글자 대문자 사용함.

 

2.  원시 타입  

–  숫자형 (Number)
–  문자형 (String)
–  논리형 (Boolean)
–  null
–  undefined

 

⇒   객체 타입의 데이터들은 객체 파트에서 자세히 다뤄보고,  지금은 원시 타입에 대해서만 다뤄보겠음.

 

 

 

 

 

 

 

 

 

 

▶   숫자형 데이터 (Number)

–  프로그래밍의 숫자는 우리가 일반적으로 알고 있는 숫자와 사실상 동일하며, 산술 연산 등이 가능함.

–  JAVA에서는 정수 타입과 실수 타입이 나뉘지만 JS에서는 정수와 실수 둘 다 숫자형으로 취급함.

---

EX1   )   문자(숫자형)  →  숫자로 변경

var strNum = "1000";
var chNum = Number(strNum);
document.write(chNum+1);

→   변수 strNum에 String "1000"의 값을 저장함.

→   변수 strNum을 괄호로 감싸 좌측에 변경하고자 하는 데이터 타입을  적어 변수 chNum에 저장함.

→   chNum에는 String "1000" 에서 Number 1000으로 바뀐 데이터 값이 저장됨. 

✓   1000 + 1 = 1000이므로, 1000의 결과값이 출력됨.

 

 

 

EX2   )   프롬프트창에 입력받은 값을 연산하여 출력

var result = prompt("숫자를 입력하세요. 100을 더해드립니다.");
document.write("결과 : "+(Number(result)+100));

→   result라는 변수에 사용자로부터 숫자를 입력받아 저장함.

→   사용자로부터 받은 값은 String타입이므로 좌측에 Number을 명시함으로써 숫자형 타입으로 바꿔주고 100을 더함.

✓   실행 결과

프롬프트 창에 100을 입력함. (String타입)

+100을 연산하여 200이 출력됨.

 

 

 

 

 

 

 

 

 

 

▶   문자형 데이터 (String)

–   " "(큰 따옴표)나 ' '(작은 따옴표)로 묶은 데이터를 의미함.

–  숫자도 큰 따옴표나 작은 따옴표로 묶으면 문자열로 인식함.

–  작은 따옴표로 문자열을 시작했으면 끝맺음도 작은 따옴표로 해야 하고, 큰따옴표도 동일함. 

–  만약 문자열 안에 따옴표를 쓰고 싶다면 큰 따옴표와 작은 따옴표가 서로 중복되지 않게 사용하면 됨.

    ex )  var color = "내가 좋아하는 컬러는 'blue'이다."

---

EX   )   문자형 데이터 출력

var str = "안녕하세요";
var str = "안녕하세요!" + "오늘 저녁 치킨 어때요?";	// 변수의 재사용
document.write(str);
document.write("<hr>");					// 출력문 구분을 위한 수평선
var str2 = "<h1>맛있겠죠?</h1>";
document.write(str2);

✓   실행 결과

 

 

 

 

 

 

 

 

 

 

▶   논리형 데이터 (Boolean)

–  불린유형이라고도 하며, 참(true)과 거짓(false)  두가지 값만 가짐. 

–  어떤 조건을 확인해서 그 조건이 참이면 true,  거짓이면 false값을 나타냄.

–  true와 false는 소문자로만 표시함.

document.write( Boolean(0) + "<br>" );	// false
document.write( Boolean(1) + "<br>" );	// true
document.write( Boolean(2) + "<br>" );	// true
document.write( Boolean(3) + "<br>" );	// true

→  Boolean( 0 / null / undefinded / "" )
     사실상 0, null, undefinded, 공백은 데이터가 없다라는 뜻이라서 모두 결과가 false로 나옴. 그 외는 모두 true.

 

var num1 = 100;
var num2 = 200;
 
document.write(num1 > num2);

→   간단하게 숫자를 비교할 때, num > num2라는 조건을 확인하여 맞으면 true, 틀리면 false를 출력함.

✓   실행 결과

false

 

 

 

 

 

 

 

 

 

 

▶   undefinded & null 데이터

 

 

 

•   undefinded

–  자료형이 정의되지 않았을 때의 데이터 상태를 나타냄.

–  JS에서는 변수를 선언할 때, 자료형을 미리 지정하지 않고 값을 할당할 때 결정함.

    그래서 변수 선언만 하고 값이 할당되지 않은 자료형을 undefinded라고 함.

     → 즉,  undefinded는 단순히 '변수를 선언한 상태에서 값이 할당되지 않았다'라는 의미.

 

 

•   null

–  '데이터의 값이 유효하지 않은 상태'를 나타냄.

–  변수에 할당된 값이 유효하지 않다는 의미.

---

EX   )

var data1;
var data2 = null;
 
console.log("data1 : " + data1);	
console.log("data2 : " + data2);

→   변수 data1은 선언만 된 상태에서 값이 할당되지 않았음. 즉,  undefinded 타입의 데이터

→   변수 data2는 변수에 할당된 값이 null값이므로 유효하지 않음. 즉,  null타입의 데이터

→   위의 두 변수를 콘솔창에 출력하여 확인해보겠음.

✓   실행 결과

 

 

 

 

 

 

 

 

 

 

---

참조 : Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석