본문 바로가기
[study]이론정리/HTML & CSS & JavaScript

js 3일차 - 객체(3) JSON

by yoon9i 2024. 5. 7.

5. JSON 객체

1> 문법
  {key:value, key1:value1, ...}

 

2> 특징
  - value 는 함수도 가능하다.
    만약 함수인 경우에 일반 key 접근시 this 사용해야 된다.
  - 속성접근은 .(dot) 이용하거나 ["key값"] 형식의 연관배열 사용가능
    연관배열의 특징은 "key값" 을 변수로 사용할 수 있다.

<!DOCTYPE html>
<html>

<head>
    <title>js07_객체1_데이터관련_JSON</title>
    <script>
        // JSON 객체
        var person = {
            // 속성
            username: "홍길동",
            age: 20,

            // 메서드(method)
            setUsername: function (name) { this.username = name; },
            setAge: function (age) { this.age = age; },
            getUsername: function () { return this.username; },
            getAge: function () { return this.age; }
        };

        var xxx = "username";
        var yyy = "age";

        // 연관배열을 변수로 사용 가능.
        console.log("이름: ", person.username, person["username"], person[xxx]);
        console.log("나이: ", person.age, person["age"], person[yyy]);

        person.setUsername("이순신");
        person.setAge(30);
        console.log("변경값 출력: ", person.username, person.age,
            person.getUsername(), person.getAge());
    </script>
</head>

<body>

</body>

</html>


  - value 값은 변수로 사용가능.
    만약 key 와 value 가 동일하면 key만 지정가능.
    ex> 
        {username:username} ==> {username}
  - value 가 함수인 경우에는 function 생략가능해서 자바의 메서드처럼 사용가능.
    ex>
        setUsername:function(n) {this.username=n}
        ==> setUsername(n){this.username=n}
 

<!DOCTYPE html>
<html>

<head>
    <title>js07_객체1_데이터관련_JSON2</title>
    <script>
        // JSON 객체

        var username = "홍길동";
        var userage = 20;

        var person = {
            // 속성
            username, // username:username 동일. key 와 value 가 동일하면 key 만 지정가능.
            age: userage, // key 와 value 가 다르다면 key 와 value 둘다 사용해야함.

            // 메서드(method)
            // setUsername: function (name) { this.username = name; },
            // setAge: function (age) { this.age = age; },
            // getUsername: function () { return this.username; },
            // getAge: function () { return this.age; }

            // value 가 함수인 경우에는 function 생략가능해서 자바의 메서드처럼 사용가능.

            setUsername(name) { this.username = name; },
            setAge(age) { this.age = age; },
            getUsername() { return this.username; },
            getAge() { return this.age; }
        };

        var xxx = "username";
        var yyy = "age";

        // 연관배열을 변수로 사용 가능.
        console.log("이름: ", person.username, person["username"], person[xxx]);
        console.log("나이: ", person.age, person["age"], person[yyy]);

        person.setUsername("이순신");
        person.setAge(30);
        console.log("변경값 출력: ", person.username, person.age,
            person.getUsername(), person.getAge());
    </script>
</head>

<body>

</body>

</html>


  - 함수정의 앞에 set/get 키워드 지정 가능
    기존 메서드처럼 사용하면 안되고 ( person.setUsername("이순신"), person.getUsername() )
    속성처럼 사용해야 된다. ( person.setUsername = "이순신", person.getUsername )
    ex>
        set setUsername(n) {this.username = n;}
        get getUsername() {return this.username;} 

<!DOCTYPE html>
<html>

<head>
    <title>js07_객체1_데이터관련_JSON3</title>
    <script>
        // JSON 객체

        var username = "홍길동";
        var userage = 20;

        var person = {
            // 속성
            username, // username:username 동일. key 와 value 가 동일하면 key 만 지정가능.
            age: userage, // key 와 value 가 다르다면 key 와 value 둘다 사용해야함.

            // set 지정하면 setUsername 은 더이상 메서드가 아니고 속성이다.
            set setUsername(name) { this.username = name; },
            set setAge(age) { this.age = age; },
            get getUsername() { return this.username; },
            get getAge() { return this.age; }
        };

        var xxx = "username";
        var yyy = "age";

        // 연관배열을 변수로 사용 가능.
        console.log("이름: ", person.username, person["username"], person[xxx]);
        console.log("나이: ", person.age, person["age"], person[yyy]);


        //person.getUsername is not a function, person.getAge is not a function 
        // 라서 () 없이 호출해야함.

        // person.setUsername("이순신");
        person.setUsername = "이순신";
        // person.setAge(30);
        person.setAge = 30;
        // console.log("변경값 출력: ", person.username, person.age,
        //     person.getUsername(), person.getAge());
        console.log("변경값 출력: ", person.username, person.age,
            person.getUsername, person.getAge);
    </script>
</head>

<body>

</body>

</html>


  - key 값도 변수로 사용가능. [변수명]
    ex>
        var xxx = "username";
        { [xxx]: "홍길동" }; ==> { "username":"홍길동" };
    
    + 이용해서 연결해서 사용가능.
    ex>
        { [xxx+"01"]: "홍길동" }; ==> { "username01":"홍길동" };

  - 중첩가능
  - "{key:value}" --------> {key:value}
    "[10,20]"  --------> [10,20]
    JSON.parse("{key:value}");
       
    {key:value} ----> "{key:value}"
    [10,20] ----> "[10,20]"
    JSON.stringify({key:value})

    "10" --------> 10
    Number.parseInt("10");

  10 ----------->"10"
  String(10)

<!DOCTYPE html>
<html>

<head>
    <title>js07_객체1_데이터관련_JSON4</title>
    <script>
        // JSON 객체
        var xxx = "username";
        var yyy = "age";

        var person = {
            [xxx]: "홍길동",
            [yyy]: 30,
            [yyy + "01"]: 30
        };

        console.log(person);
        console.log(person.username, person.age, person.age01);
        console.log(person[xxx], person[yyy]); // 연관배열(중요, 많이사용됨.)

        // 중첩가능
        var person2 = {
            username: "이순신",
            age: 44,
            email: ["admin@admin.com", "test@admin.com"],
            phone: {
                tel: '02',
                mobile: '010'
            }
        }

        var personList = [{
            username: "이순신",
            age: 44,
            email: ["admin@admin.com", "test@admin.com"],
            phone: {
                tel: '02',
                mobile: '010'
            }
        }, {
            username: "유관순",
            age: 18,
            email: ["admin2@admin.com", "test2@admin.com"],
            phone: {
                tel: '02',
                mobile: '010'
            }
        }];

        personList.forEach(function (data, idx) {
            console.log(data.username, data.phone.mobile);
        });

        // 문제: 이름이 '순' 으로 끝나는 데이터만 출력
        console.log("문제) 이름이 '순' 으로 끝나는 데이터만 출력: ");
        let new_array = personList.filter(function (data, idx) {
            return data.username.endsWith("순");
        });
        console.log(new_array);
    </script>
</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <title>js07_객체1_데이터관련_JSON5</title>
    <script>
        // JSON 객체

        // 문자열 ---> JSON 객체
        var str1 = "[10,20]";
        var json1 = JSON.parse(str1);
        console.log(str1, " ---> ", json1, json1[0]);

        // JSON 객체 ---> 문자열
        var json2 = { username: "홍길동" }
        var str2 = JSON.stringify(json2);
        console.log(json2, " ---> ", str2, json2.username, json2["username"]);
    </script>
</head>

<body>

</body>

</html>

'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글

js 3일차 - 객체(3) 함수(1)  (0) 2024.05.07
js 3일차 - 2일차 정리  (0) 2024.05.07
js 3일차 - 객체(3) Window객체  (0) 2024.05.07
js 2일차 -객체(2) _ BOM (Browser Object Model)  (0) 2024.05.03
js 2일차 - 객체(1) _ 데이터관련, spread 연산자 + 얕은복사, 깊은복사  (0) 2024.05.03

관련글

티스토리툴바