• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Type Conversion - 데이터타입변환 (= 데이터유형변환 = 데이터타입변경 = 데이터유형변경 = 데이터형식변환 = 데이터형식변경) ※ typeof 연산자 - 데이터타입 확인

Number()는 숫자로, String()은 문자열로, Boolean()은 참거짓으로 변환.

 

JS 데이터형식

[값 포함 가능 5가지 데이터유형]

 

string

number

boolean

object

function

 


[6가지 객체]

 

Object

Date

Array

String

Number

Boolean

 


[값 포함 불가 2가지 데이터유형]

 

null

undefined

 

 

typeof 연산자

 

JS 변수의 데이터타입 알아내는데 사용.

 


 

<p id="hz"></p>


<script>

document.getElementById("hz").innerHTML = 

  typeof "Homzzang" + "<br>" + // string

  typeof 3.14 + "<br>" + // number

  typeof NaN + "<br>" + // number

  typeof false + "<br>" + // boolean

  typeof [1,2,3,4] + "<br>" + // object

  typeof {site:'Homzzang.com', open:2012} + "<br>" + // object

  typeof new Date() + "<br>" + // object

  typeof function () {} + "<br>" + // function

  typeof mySite + "<br>" + // undefined

  typeof null; // object

</script>

 

결과보기


[명심]

 

NaN 데이터 유형 : number (숫자)

array 데이터 유형 : object (객체)

date 데이터 유형 : object

null 데이터유형 : object

undefined 변수 데이터 유형 : undefined

값이 할당 안 된 변수의 데이터 유형 : undefined

 

typeof 연산자는 JS 객체가 배열 (또는 날짜)인지 확인하는 데는 사용할 수 없음.

 

 

typeof 연산자의 데이터타입

 

1.

typeof 연산자는 변수 아니라, 연산자임

 

2.

연산자 (+ - *  /)는 데이터유형이 존재 안하는데,

typeof 연산자는 항상 문자열 (피연산자의 유형 포함) 반환.

 

 

constructor 속성

1. constructor 속성은 모든 JS 변수에 대한 생성자 함수 반환.

  

<p id="hz"></p>


<script>

document.getElementById("hz").innerHTML = 

  "Homzzang".constructor + "<br>" + // function String() { [native code] }

  (3.14).constructor + "<br>" + // function Number() { [native code] }

  false.constructor + "<br>" + // function Boolean() { [native code] }

  [1,2,3,4].constructor + "<br>" + // function Array() { [native code] }

  {site:'Homzzang.com', open:2012}.constructor + "<br>" + // function Object() { [native code] }

  new Date().constructor + "<br>" + // function Date() { [native code] }

  function () {}.constructor; // function Function() { [native code] }

</script>

 

결과보기


2-1. constructor 속성 사용해 객체가 배열인지 (= Array 문자열 포함 유무) 확인 가능.

 

 

<p id="hz"></p>


<script>

var code = ["HTML", "CSS", "JS", "JQ"];

document.getElementById("hz").innerHTML = isArray(code);


function isArray(hzArray) {

  return hzArray.constructor.toString().indexOf("Array") > -1;

}

</script>

 

결과보기


2-2. constructor 속성 사용해 객체가 Array 함수인지 확인 가능.

 

<p id="hz"></p>


<script>

var code = ["HTML", "CSS", "JS", "JQ"];

document.getElementById("hz").innerHTML = isArray(code);


function isArray(hzArray) {

  return hzArray.constructor === Array;

}

</script>

 

결과보기


3-1. constructor 속성 사용해 객체가 Date인지 (= Date 문자열 포함 유무) 확인 가능.

 

<p id="hz"></p>


<script>

var hzDate = new Date();

document.getElementById("hz").innerHTML = isDate(hzDate);


function isDate(myDate) {

  return myDate.constructor.toString().indexOf("Date") > -1;

}

</script>

 

결과보기


3-2. constructor 속성 사용해 객체가 Date 함수인지 확인 가능.

 

<p id="hz"></p>


<script>

var hzDate = new Date();

document.getElementById("hz").innerHTML = isDate(hzDate);


function isDate(myDate) {

  return myDate.constructor === Date;

}

</script>

 

결과보기

 

JS 타입 변환

 

JS 변수는 새 변수 및 다른 데이터 유형으로 변환 가능.

  • JS 함수 사용해서.
  • JS 자체에 의해 자동으로.

 

 

 

 

JS 타입변환 : Number → String 변환

 

1.

전역 메소드 String()는 숫자를 문자열로 변환 가능. 

모든 유형의 숫자, 리터럴, 변수, 표현식에 사용 가능.

 

<p id="hz"></p>


<script>

var x = 123;

document.getElementById("hz").innerHTML =

  String(x) + "<br>" + // 123

  String(123) + "<br>" + // 123

  String(100 + 23); // 123

</script>

 

결과보기


 

2.

Number 메서드인 toString()도 동일.

 

<p id="hz"></p>


<script>

var x = 123;

document.getElementById("hz").innerHTML =

  x.toString() + "<br>" + // 123

   (123).toString() + "<br>" + // 123

   (100 + 23).toString(); // 123

</script>

 

결과보기

 


 

3.

Number를 Sring으로 변환하는 다양한 Number Method 소개.


 

 

toExponential()

숫자 반올림 및 지수 표기법을 사용하여 작성된 문자열 반환.

 

toFixed()

지정된 소수 자릿수로 작성되고 반올림된 숫자로 작성된 문자열 반환.

 

toPrecision()

지정된 길이의 숫자로 쓰여진 문자열 반환.


 

 

JS 타입변환 : Boolean→ String 변환

 

1.

 

전역 메소드 String()는 Boolean을 Sring으로 변환.


String(false)      // "false"

String(true)       // "true"

 


 

2.

Boolean 메서드 toString()도 동일.


false.toString()   // "false"

true.toString()    // "true"

 

 

 

JS 타입변환 : Date → String 변환

 

1.

 

 

 

JS 타입변환 : String → Number 변환

 

1.

 

 

 

JS 타입변환 : Unary + Operator (단항 + 연산자)

 

1.

 

 

 

JS 타입변환 : Boolean → Number 변환

 

1.

 

 

 

JS 타입변환 : Date → Number 변환

 

1.

 

 

 

JS 타입변환 : Automatic Type Conversion (자동 타입 변환)

 

1.

 

 

 

JS 타입변환 : Automatic String Conversion (자동 문자열 변환)

 

1.

 

 

 

JS 타입변환표

 


 


 

 

 

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★ document.write() = 다큐먼트라이트
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012