[JavaScript] 데이터타입(DataType) 기능확인

1) ArrayDataType

 

function ArrayDataType() {
    var cars = ["BMW", "Volvo", "Audi", "Toyota", "Tesla"]
 
    console.log("ArrayDataType : " + cars)
 
    return (
        <div className="ArrayDataType">
            <p>
 
                {cars[0]}, {cars[1]}, {cars[2]}, {cars[3]}, {cars[4]}
 
            </p>
 
        </div>
    )
}
 
export default ArrayDataType

출력

 

 

 

 

 

 

 

 

2) BoolDataType

 

function BoolDataType() {
 
    var num1 = 3, num2 = 3, num3 = 7
 
    var boolRes1 = (num1 === num2)
    var boolRes2 = (num1 === num3)
 
    console.log("BoolDataType : " + boolRes1)
    console.log("BoolDataType : " + boolRes2)
 
    var testNum = 0
    var testStr = "0"
 
 
    // '=='의 경우 데이터만 확인한다.
    // '==='의 경우 데이터와 해당 데이터의 타입을 함께 확인한다.
    // 즉, 데이터 타입이 다르다면 false가 된다.
 
    // 결론 : 결국 자바스크립트는 데이터타입이 없는 것이 아니라
    //       실행중에 동적으로 데이터타입이 생성되는 것이다.
    //       데이터타입이 없다고 얘기하는 것은 잘못 된 개념이다.
    var boolRes3 = (testNum == testStr)
    var boolRes4 = (testNum === testStr)
 
    console.log("BoolDataType : " + boolRes3)
    console.log("BoolDataType : " + boolRes4)
 
    return (
 
        <div className="BoolDataType">
            <p>
                {boolRes1.toString()}, {boolRes2.toString()}
                {boolRes3.toString()}, {boolRes4.toString()}
            </p>
        </div>
    )
}
 
export default BoolDataType

출력값

3) DataType

 

 

 

 

 

 

 

 

function DataType() {
    // 숫자 + 문자열은 숫자를 강제로 문자열로 바꿈
    var test1 = 7 + "Test"
    var test2 = "7" + "test"
    // 숫자 + 숫자는 숫자로 계산하고
    // 이후에 숫자 + 문자열로 인해 숫자를 문자열로 바꿈
    var numTest = 3 + 7 + "Test"
    // 하지만 문자열이 앞에 있으면 문자열로만 출력
    var numTest2 = "9" + "Test" + 3 + 7
    var numTest3 = "Test" + 3 + 7
 
    console.log("DataType: " + test1)
    console.log("DataType: " + test2)
    console.log("DataType: " + numTest)
    console.log("DataType: " + numTest2)
    console.log("DataType: " + numTest3)
 
    return (
        <div className="DataType">
            <p>
                {test1}, {test2}, {numTest}. {numTest2}, {numTest3}
            </p>
        </div>
    )
}
 
export default DataType

출력값

 

 

 

 

 

 

 

 

4) DataTypeBasic

 

function DataTypeBasic(){
    
    // var는 변수 선언할 때 사용한다. 
    var length = 7 // 정수형도 var
    var lastname = "Gogosing" // 문자열도 var
    var x = {firstName : "Rust", lastname : "Golang"} // 묶음 형식도 var
    
 
 
    // console.log()를 통해서
    // 웹 페이지에서 F12를 누르고 콘솔을 눌러
    // 콘솔 메시지를 확인할 수 있다.
    // 즉, 브라우저용 디버깅에 유용하게 활용할 수 있다. 
    console.log(length)
        
    console.log(lastname)
    
    console.log(x.lastname) 
 
    console.log(x.firstName)
    
 
    // div의 약자는 Division으로
    // 웹 사이트의 레이아웃(전체적인 툴)을 만들 때 사용 함
 
    // p는 paragraph 태그로 하나의 문단을 만들때 사용된다.
 
    return(
 
    <div className ="DataTypeBasic">
        <p>
    {length}, {lastname}, {x.toString()}.
    </p>
    </div>
    )
 
}
 
export default DataTypeBasic

5) ExpDataType

 

 

 

 

 

 

 

 

function ExpDataType() {
    // 123 x 10^5
    // 예상 결과 : 12300000
    var expNum1 = 123e5
    // 123 x 10^-5
    // 예상결과 0.00123
    var expNum2 = 123e-5
 
 
    console.log("ExpDataType:" + expNum1)
    console.log("ExpDataType:" + expNum2)
 
    return (
        <div className="ExpDataType">
            <p>
                {expNum1}, {expNum2}
            </p>
        </div>
 
    )
}
 
export default ExpDataType

 

출력

 

 

 

 

 

 

 

 

 

 

 

 

6) varTest

 

function LetVar() {
 
    let num = 77
 
    console.log("num77 = " + num)
    console.log("let은 Hoisting 되지 않으며 let 위에서 해당변수를 사용할수 있다.")
    //varTest는 선언된게 없으므로 undefind 
    console.log("var는 되나요? " + varTest + "는 되네?!")
 
    var varTest = "이거 되는거 맞냐?"
    console.log("varTest = " + varTest)
 
    const conNum = 33
 
    // 새로운 바테스트를 쓰면 덮어쓰여진다(오버라이트)
    // let varTest의 경우에는 불가능하다.
    varTest = "정말 되는거야?"
    console.log("varTest = " + varTest)
 
    console.log("conNum = " + conNum)
    console.log("const는 반드시 선언과 함께 값의 초기화가 이루어져야 한다.")
 
    return (
        <div className="LetVar">
            <p>
                let {num}<br/>
                const {conNum}<br/>
                var {varTest}<br/>
 
 
            </p>
 
        </div>
    )
 
}
 
export default LetVar

출력

function LetVar2() {
 
    // let 으로 할당해놓은것은 중복으로 할당이 불가능하다.
    let num = 77
 
    console.log("let test : num =  " + num)
 
    num = "뭐야?"
 
    console.log("let test : num =  " + num)
 
    num = 7 + 7 + "뭐게?"
 
    console.log("let test : num =  " + num)
 
    num = "뭐야? 그럼 이거는 ? " + 7 + 7
 
    console.log("let test : num =  " + num)
 
 
    return (
        <div className="LetVar2">
            <p>
                let {num}<br/>
            </p>
 
        </div>
    )
 
}
 
export default LetVar2

 

출력

 

 

 

 

 

 

 

 

function LetVar3() {
    var varNum = 33
 
    console.log("varNum test : " + varNum)
 
    var varNum = "뭐야?"
 
    console.log("varNum test :" + varNum ) // let과 var의 차이점 정리
 
    var varNum = 7 + 7 + "뭐게?"
 
    console.log("let test : varNum =  " + varNum)
 
    var varNum = "뭐야? 그럼 이거는 ? " + 7 + 7
 
    console.log("let test : varNum =  " + varNum)
 
    return (
        <div className="LetVar3">
            <p>
                var {varNum}<br/>
            </p>
 
        </div>
    )
 
}
 
export default LetVar3

 

출력

 

 

 

 

 

 

 

 

function LetVar4() {
    let letNum = 33
 
    console.log("let test: " + letNum)
 
    // LetVar3과 LetVar4의 차이점은 뭘까 ?
    // let 과 var의 차이점은 뭐지 ?
    // 호이스팅(Hoisting)
    letNum = "뭐야 ?"
 
    // 호이스팅은 모든 변수가 프로그램 시작시
    // 최선두에 선언하는 형식과 같이 동작하는 것을 의미한다.
    // 좀 더 쉽게 말하자면 var는 변수 선언과 값의 할당이 통합된다.
    // 반면 let은 변수 선언과 값의 할당이 분리되어 있다.
 
    // 그러다보니 var는 변수 생성시 이름이 같은게 있으면
    // Mangling 이라는 방식을 통해서 변수의 이름을 바꿔버린다.
    // 반면 let은 선언과 할당이 분리되어 있다보니
    // 왜 같은것을 선언하냐면서 문법 오류가 나는 것이다.
 
    // var 대신 let을 도입하여 좋아진점
    // 신입 개발자들이 var로 같은 변수를 도배하다보니
    // 이전에 중요한 정보가 있었는데 그 정보가 덮어쓰기 되는 일이 많았다.
    // 반면 중요 정보를 let 으로 만들어둠으로써
    // 신입 개발자들의 이와 같은 실수를 원천 차단할 수 있게 되었다.
 
    console.log("let test: " + letNum)
 
    return (
        <div className="LetVar4">
            <p>
                let {letNum}<br/>
            </p>
        </div>
    )
}
 
export default LetVar4

출력

 

 

 

 

 

 

 

 

7) RealDataType

 

function RealDataType() {
    // 소수점의 경우 .0의 경우 출력시 정수형과 별 다른 차이가 없음
    // 33.1 을 floatNum1 에 할당할 경우 33.1로 출력된다.
    var floatNum1 = 33.0
    var intNum = 33
    // 명확하게 0.1 형태의 숫자가 있을때는 출력한다.
    var floatNum2 = 37.1
    // .00 의 경우에는 소수점이라는 것을 알려주기 위해 . 을 표현해준다.
    var floatNum3 = 33.00
 
    var doubleNum1 = 33.0
 
    console.log("floatNum1: " + floatNum1)
    console.log("floatNum1: " + floatNum1)
    console.log("intNum: " + intNum)
    console.log("floatNum2: " + floatNum2)
    console.log("floatNum3: " + floatNum3)
    console.log("doubleNum1: " + doubleNum1)
 
    return (
        <div className="StringDataType">
            <p>
                {floatNum1}, {intNum}, {floatNum2}, {floatNum3}.
            </p>
        </div>
    )
}
 
export default RealDataType

출력

 

 

 

 

 

 

 

 

8) StringDataType

 

function StringDataType(){
 
// 자바스크립트는 아래와 같이
// 문자열 자체에 홑 따옴표, 쌍따옴표 작성이 문제가 되지 않는다.
// 적고 싶은 형태로 마음대로 작성해도 무방하다.
var strTest1 = "It's OK"
var strTest2 = "I can 'use' this"
var strTest3 = 'I can do "this" too'
 
console.log("StringDataType strTest1 : " + strTest1)
console.log("StringDataType strTest2 : " + strTest2)
console.log("StringDataType strTest3 : " + strTest3)
 
 
// <br/> 태그는 엔터와 유사한 역할 수행한다
return (
    <div className="StringDataType">
        <p>
            {strTest1}<br/>
            {strTest2}<br/>
            {strTest3}<br/>
        </p>
    </div>
)
}
 
export default StringDataType

출력

 

 

<

 

 

 

 

 

 

9) SymbolTest

 

function SymbolTest(){
    const LINE = Symbol()
    const SQUARE = Symbol()
 
    if(LINE === SQUARE){
        console.log("LINE === SQUARE")
    }else {
        console.log("LINE !==SQUARE")
    }
    // 자바로 생각하면 package 개념
    // C++에서는 namespace 개념
    // C에서는 __arrtibute__() GCC 확장 개념
    const VECTOR = Symbol("Tensor")
    const MATRIX = Symbol("Tensor")
 
    if(VECTOR === MATRIX){
        console.log("VECTOR === MATRIX")
    }else{
        console.log("VECTOR !== MATRIX")
    }
    // Symbol을 사용하고 toString()을 사용하면 Symbol 정보가 출력된다.
    const TEST = Symbol("TEST")
 
    console.log("TEST.toString : " + TEST.toString())
    console.log("MATRIX.toString : " + MATRIX.toString())
    console.log("VECTOR.toString : " + VECTOR.toString())
 
    return(
        <div className="SymbolTest">
            <p>
 
                Symbol() {LINE}<br/>
                Symbol() {SQUARE}<br/>
                VECTOR() {VECTOR}<br/>
                MATRIX() {MATRIX}<br/>
            </p>
 
        </div>
    )
}

출력

 

 

<

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어