JavaScript - 사용자 정의 객체 리터럴

사용자 정의 객체

• 사용자가 직접 필요한 객체를 생성해서 사용
• 사용자 정의 객체 생성 방법
  • 리터럴 이용
  • 생성자 함수(function()) 이용
  • new Object() 이용
  • class 정의하고 객체 생성

리터럴 이용

• 객체 선언 : 멤버 추가

  • 프로퍼티(속성) : 속성값
  • 멤버 메소드 추가

• 형식

  var 객체 = {
    // 변수 :프로퍼티(속성)
    프로퍼티명(속성명)1 : 값1,
    프로퍼티명(속성명)2 : 값2
  
    // 멤버 메소드
    메소드 명 : function() {
        수행 코드
    }
  };
  // 예시
  var person = {
    name : "홍길동",
    age : 20,
    getName = function() {
        return this.name;
    }
  };
  // 객체 사용
  객체.프로퍼티;
  객체.메소드();
  // 예시
  person.getName(); // 객체의 멤버 메소드 사용(호출);

리터럴 객체 이용 예제 - object-literal.html

        <script type="text/javascript">
            // 객체 생성
            var person = {
                name : "홍길동",
                age : 20,
                getName : function() {
                    return this.name;
                }
            };
            // 객체 사용
            console.log(person.name);
            console.log(person.age);
            console.log(person.getName());
            // 프로퍼티 존재 여부 확인
            console.log("name" in person);
            // @@출력문@@
            // 홍길동
            // 20
            // 홍길동
            // true

            // 객체 생성 : 프로퍼티만 존재
            let car = {
                no : "11가 1111",
                name : "소나타",
                maker : "현대",
                cc : 2000,
                year : 2021
            };
            // 전체 프로퍼티값 출력
            for(let i in car) {
                console.log(car[i]);
            }
            // @@출력문@@
            // 11가 1111
            // 소나타
            // 현대
            // 2000
            // 2021

            // 객체 생성 : 
            var circle = {
                center : {x:1.0, y:2.0},
                radius : 2.5,
                getArea : function() {
                    return this.radius * this.radius * 3.14;
                }
            };
            console.log(circle.center.x, circle.center.y);
            console.log(circle.getArea());
            // @@출력문@@
            // 1 2
            // 19.625

            // 호이스팅도 가능.
            // 두 점 사이의 거리를 구하는 예
            // 두 점 사이의 거리를 구해서 반환하는 함수
            var p1 = {x:1, y:2};
            var p2 = {x:4, y:5};
            var distance = getDistance(p1, p2);
            console.log(distance.toFixed(2)); // 4.24

            function getDistance(p1, p2) {
                var dx = p2.x - p1.x;
                var dy = p2.y - p1.y;
                return Math.sqrt(dx*dx + dy*dy); // 두 점 사이의 거리 구해서 반환
            }