[JS] 자바스크립트

[모던 자바스크립트] 객체 리터럴

sweetychocoding 2023. 7. 29. 15:37
728x90

객체란?

변경 가능한 값으로 프로퍼티와 메서드의 집합체

 

프로퍼티(property) : 객체의 상태를 나타내는 값(data)

메서드(method) : 프로퍼티(상태데이터)를 참조하고 조작할 수 있는 동작(behavior)

 

인스턴스(instance): 클래스에 의해 생성되어 메모리에 저장된 실체, 객체가 메모리에 저장되어 실제로 존재하는 것에 초점을 맞춘 용어.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        "use strict"

        let obj = {};
        let key = "Hello";

        obj[key] = "world";

        console.log (obj);
       
        let person = {
            name: "pororo",
            age: 100,

            introduce: function() {
                console.log (`Hello, my name is ${this.name}, age is ${this.age}. Nice to meet you. :)`);
            }
        };

        console.log (typeof person);
        console.log (person);
        console.log (person.age);
        console.log (person["name"]);
        person.introduce();

        person.name = "maerong";
        console.log (person.name);

        person.height = 180;
        console.log (person);

        delete person.age;
        delete person.height;
        console.log (person);

        let x = 1, y = 2;

        let obj2 = {
            one: x,
            two: y
        };
        console.log (obj2);

        const prefix = "prop";
        let i = 0;

        let obj3 = {
            [`${prefix}-${++i}`]: i,
            [`${prefix}-${++i}`]: i,
            [`${prefix}-${++i}`]: i
        };
        console.log (obj3);

        i = 0;
        let obj4 = {};

        obj4[`${prefix}-${++i}`] = i;
        obj4[`${prefix}-${++i}`] = i;
        obj4[`${prefix}-${++i}`] = i;
        console.log (obj4);
       
        let obj5 = {
            sub: "수학",
            sub2: "과학",
            sub3: "영어",

/*             subjects: function() {
                console.log (`과목은 ${this.sub}, ${this.sub2}, ${this.sub3}입니다.`);
            } */

            subjects() {
                console.log (`과목은 ${this.sub}, ${this.sub2}, ${this.sub3}입니다.`);
            }
        };
        obj5.subjects();



    </script>
</head>

<body>
    <h2>연습중</h2>
</body>

</html>

 

728x90