JavaScript_객체

내장 객체 

: 미리 정의되어 있는 객체 

→ 문서 객체 모델(DOM) : 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트, 필드 등 모두 객체로 관리된다.

→ 브라우저 객체 모델(BOM) : 웹 브라우저에 정보를 객체로 관리

 

DOM은 HTML, XML 등의 웹 문서의 내용과 구조를 객체로 관리하는 반면에 BOM은 웹 브라우저의 창, 화면, URL 등과 같은 브라우저 정보를 객체로 관리한다. DOM과 BOM은 역할이 다르며 둘 다 사용해야 한다.

 

 

사용자 정의 객체 (스스로 생성)

<script>
    // 사용자 정의 객체
    // 관례상 객체를 대문자로 표기함.
    function Person(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    
    const personKim = new Person("킴", 30, "male");
    console.log(personKim);
    console.log(personKim.name);
</script>

<script>
    // 일반 함수의 형태
    function calc(n1, n2) {
        return n1 + n2;
    }
    
    let result = calc(200, 200);
    console.log(result);
</script>

<script>
    // 모던 자바 스크립트 객체 프로토 타입
    class Student {
        constructor(name) {
            this.name = name;
        }
        
        sayHo() {
            alert(this.name);
        }
    }
    
    let person = new Student("John");
    person.sayHo();
</script>

 

 

객체 리터럴 타입 예제

<script>
    // let
    // let과 const는 변수를 선언하는 방법 중 하나로
    // let을 사용하면, 변수 person을 선언하여 다시 재활용 할 수 있다.
    // person에 새로운 객체 리터럴을 넣을 수 있다.
    let book = {
        title : "플러터 UI 실전",
        author : "김쌤",
        pages : 200,
        price : 18000,
        info : function() {
            // 백틱 `과 ${}으로 사용 가능
            alert(this.title + "은 " + this.pages + "쪽입니다.");
        }
    };
    
    console.log(book);
    console.log(book.title);
    book.info();
    
    // const
    // const book2 = {새로운 객체 리터럴을 담을 수 없다.} 재정의 안됨.
    const book2 = {
        title : "플러터 UI 실전", 
        author : "김쌤", 
        pages : 200,
        price : 18000,
        info : function() {
            alert(`${this.title}의 작가는 ${this.author}입니다.`);
        }
        // hi : "hi";
    };
    
    console.log(book2);
    console.log(book2.hi); // undefined -> const라 새로운 객체 리터럴을 담을 수 없다.
    console.log(book2.hi);
</script>