자바스크립트 - Object, JSON

자바스크립트 변수 vs 자바 변수

자바스립트는 기본 C나 JAVA와 달리 객체를 생성하고 정의하는 것이 아니라 맨 땅에 Object를 생성하고 뒤에 값들을 붙이는 개념을 가진다. 

 

문제점)

<script>
        //기본 C나 JAVA와 달리 객체를 생성하고 정의하고 쓰는것이 아닌
        // 맨 땅에 Object를 생성하고 뒤에 붙이는 개념
        var exam = new Object();
        exam.kor = 30;
        exam.eng = 40;
 
        exam.Kor = 60; //오류가 나지 않아 자바스크립트의 위험성
        //안정성을 추가한 것이 typescript임.
        // 자유도 react
        // 웹기반 기존 플랫폼 쓰면서 프론트엔드만 올리겠다 하면 vue
        console.log(exam.kor + exam.eng);
</script>
 

 

객체 뒤에 붙여사용하기 때문에 exam.kor(소문자)의 값을 60으로 변경하고자 하였으나 exam.Kor(대문자)에 값을 대입해준 것으로 원치않은 결과( 70 )가 나오지만 에러가 나지 않는 상황이 발생한다.

 

JSON

자바스크립트 변수를 객체로 좀 더 쉽게 표현 한 것이다.

<script>
       var exam2 = {
            kor2: 30,
            eng2: 40,
            mat2: 90
        };
 
        console.log(exam2.mat2 + exam2.eng2);
 
        var ar = [3,4,5,6,exam2,[7,8,9]];
 
        console.log(ar[4].eng2);
        console.log(ar[4]);
</script>
 

JSON 파일 형식도 자바스크립트 배열에 넣어 사용 할 수 있다.

 

출력결과)

 

JSON 파일을 외부 에서 받았을때 문자열 -> 객체형으로 변경하기

1) eval

<script>
    var notice = '{"id":1, "title":"hello"}';        //eval과 json.parse를 사용하여 객체로 변경할 수 있다.
 
    var data = '[ {"co":0.6, "so2":0.006}, {"co":0.6, "so2":0.006} ]';
    var con = 'var a = 18';
    eval(con+";");
    console.log(a); // 18이 출력된다.
 
    eval("var etest ="+data+";");
    console.log(etest[0].co);
</script>  
 

eval 함수를 이용했을때 함수 내 인자로 넣어주면 문자열이 아니라 실행코드로 인식되어 사용된다.

eval("var etest="+data+";") 처럼 JSON 데이터를 객체로 넣어 줄 수 있다.

 

2) JSON.parse

<script>
    //id, title 문자열로 묶어주어야함.
    var dataj = JSON.parse('{"id":1, "title":"aaa"}'); 
    console.log(dataj.title);
 
    //String객체를 문자열로 변경하기
    var data2 = {id:2, title:"bbb"}
    var json = JSON.stringify(data2);
    alert(json);
</script>  
 

JSON.parse 함수는 문자열 -> JSON 데이터로 변경해주고

JSON.stringify()은  JSON데이터 -> 문자열로 변경해준다.