[JS] Javascript 타입(type)

<자료형 타입>

 

* Primitive type

  : String, Number(double, short 등 이런 구분 X), Boolean, Null, Undefined

    변수에 할당할 때 데이터가 담기는 type -> 데이터를 복사할 때 값이 복사된다.

 

* reference type 

  : Object

  : 변수에 할당 할 때 주소가 담기는 type -> 데이터를 복사할 때 주소값이 복사되어 얕은 복사가 이루어진다,

 

** 자바에서는 변수의 타입을 따로 설정하지 않아도 되는데 그이유는,

     자바스크리트는 리터럴 값을 보고 타입추론을 통해 변수의 타입을 결정하기 때문이다.

 

(*querySelector   : document Object에 접근하게 해주는 메소드

                                     _사용할 때 window.document.querySelector에서 window는 생략가능하다.)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<div id = "type_note" class="note" ></div>         <script type="text/javascript">             function typeTest(){                                  // 자바스크립트는 리터럴 값을 보고 타입추론을 통해 변수의 타입을 결정한다.                 let name = '박미영'; // String                 let age = 20; // Number                 let check = true; // Boolean                 let empty = null; // Null                 let undefinedVal; // Undefined => 정의된 적 없는, 변수를 선언했으나 초기화 하지 않을 경우 저장되는 값                                                    let obj = {                             name:'박미영',                             age: 20,                             id: 'miyoung' };                                  // 변수에 익명함수 담기    // 한번 부르고 말 함수이기 때문에 함수명도 짓지 않고 익명함수로 사용                             let add = function(num1, num2){                                              let sum = num1 + num2;                     };                                  let hobby = ['축구','농구','야구'];                                                                    let typeNote = window.document.querySelector('#type_note');                 // documnet Object의 backgroundColor를 변경할 것                 typeNote.style.backgroundColor = 'lightpink';                 // innerHTML : 해당 element의 후손 HTML Element를 작성할 수 있다.                 // <div class="type_note"> 의 후손 HTML Element를 쓸 수 있는 것 !                 typeNote.innerHTML += name + ':' + typeof(name)+ '<br>';                 typeNote.innerHTML += '<h1>'+ name + ':' + typeof(name)+ '</h1><br>';                 typeNote.innerHTML += age + ':' + typeof(age)+ '<br>';                 typeNote.innerHTML += check + ':' + typeof(check)+ '<br>';                 typeNote.innerHTML += empty + ':' + typeof(empty)+ '<br>';                 typeNote.innerHTML += undefinedVal + ':' + typeof(undefinedVal)+ '<br>';                 typeNote.innerHTML += obj+ ':' + typeof(obj)+ '<br>';                 typeNote.innerHTML += add+ ':' + typeof(add)+ '<br>';                 typeNote.innerHTML += hobby+ ':' + typeof(hobby)+ '<br>';                                   }                      </script> Colored by Color Scripter

cs

 

 

<자료형 관련 함수>

1. String

   : 자바에서와 달리 자바스크립트에서의 String(문자열)은 " " , ' ' 둘 다 로 표현 가능하다.

     또한 이 String은 자바스크립트의 내장객체로 문자열을 다루기 위한 메서드가 제공된다.

 

  (1) toUpperCase() : 모든 문자열을 대문자로 반환하는 메소드

  (2) toLowerCase(): 모든 문자열을 대문자로 반환하는 메소드

  (3) split() : 문자열을 구분하는 메소드 / split(',') : 문자열을 ','를 기준으로 구분해서 반환

  (4) substring() : 문자열의 일부만 반환하는 메소드 / substring(0,3) : 인덱스 0번째 부터 3번째 전(2번째)까지 반환

 

function stringTest(){
            //window.documnet.querySelector() 에서 window는 생략가능
            let stringNote = document.querySelector('#string-note'); 
            stringNote.style.backgroundColor= 'thistle';
            let testStr = 'PClass';
        
            // * toUpperCase() : 대문자로 변환
                stringNote.innerHTML += 'toUpperCase() : ' + testStr.toUpperCase() + '<br>';
            
            // * toLowerCase() : 소문자로 변환
                stringNote.innerHTML += 'toLowerCase() : ' + testStr.toLowerCase() + '<br>';
            
            // * split() : 문자열 구분
                let fruitsName = '사과, 바나나, 복숭아, 키위, 파인애플';
                let fruitArr = fruitsName.split(',');
                for(let i = 0; i < fruitArr.length; i++){
                    
                    stringNote.innerHTML += 'split('+ i + ') : ' + fruitArr[i] + '<br>';
                }
            
            // * substring() : 문자열의 일부만 반환//0번째부터 3번째 전(2번째)까지 자르기
                stringNote.innerHTML += 'substring() : ' + testStr.substring(0,3) + '<br>'; 
            
            // * 자바스크립트의 String은 문자배열처럼 인덱스로 접근이 가능하다. *****
                stringNote.innerHTML += 'teatStr의 3번째 인덱스 값 : ' + testStr[3]+ '<br>';
                
                for(let i = 0; i < testStr.length; i++){
                    stringNote.innerHTML += 'teatStr의 인덱스 :' + testStr[i] + '<br>';
                                }
                            
            }
        </script>

 

<script type="text/javascript">
            function mathTest(){
            
                let mathNote = document.querySelector('#math-note'); 
                mathNote.style.backgroundColor = 'Lightsteelblue';
            
                // * abs() : 절대값
                mathNote.innerHTML += 'abs: ' + Math.abs(-123) + '<br>';
                
                // * random()
                mathNote.innerHTML += 'random: ' + Math.random() + '<br>';
                
                // * round()
                mathNote.innerHTML += 'round: ' + Math.round(123.456) + '<br>'; //반올림
                
                // * floor()
                mathNote.innerHTML += 'floor: ' + Math.floor(123.456) + '<br>'; //버림
                
                // * ceil()
                mathNote.innerHTML += 'ceil: ' + Math.ceil(123.456) + '<br>'; //올림
                
                // * toFixed()
                mathNote.innerHTML += 'toFixed: ' + 123.456.toFixed(2) + '<br>'; //해당 소수점에서 올림처리
 
            }
            
            </script>
    

 -> Math 메소드 사용결과