Java Script-사용자 정의 객체

변수는 데이터 값을 하나밖에 저장하지 못하지만, 객체는 데이터 값을 필요한 대로 만들어 사용할 수 있다.

객체의 데이터는 '이름: 값'의 쌍으로 이루어 있으며 이것을 속성(Properties)이라고 한다.

var 변수 = { name: '홍길동', age: 20, nationality: '한국', ... };

변수에 {이름: 값, 이름: 값,...}의 형태로 저장이 되면 변수는 객체가 된다.

객체의 분류	종류	설명
사용자 정의 객체	- 객체 리터럴  - 객체 생성자 함수  - 클래스( ECMAScript 2015(ES6) )	사용자가 직접 정의해서 사용하는 객체
내장 객체	- Number  - String  - Array  - Math  - Date  - RegExp	자바스크립트에서 제공해 주는 객체

< 사용자 정의 객체 >

객체는 '객체 리터럴 (object literal)'과 '객체 생성자 함수 (Object constructor function)'로 만들 수 있다.

 

1. 객체 리처럴(Object literal)

var 변수 = { 프로퍼티: 값, 프로퍼티: 값, 메서드: function( ) { }, ...};

var 변수 = {      프로퍼티 : 값,      프로퍼티 : 값,      메서드 : function( ) {      },      ...  }; console.log(변수.프로퍼티); console.log(변수.메서드( ));

2. 객체 생성자 함수(Object constructor function)

function 함수(매개 변수1, 매개 변수2) {      this.프로퍼티 = 매개 변수1;      this.프로퍼티 = 매개 변수2;      this.매서드 = function( ) {      };  }  var 변수 = new 함수(매개 변수1 값, 매개 변수2 값);

'생성자 함수'는 일반 함수와 차이를 두기 위해 함수 명의 첫 문자를 대문자로 표현한다.

    <script>
        // 객체 리터럴
        var circle = {
            color : 'yellow',
            diameter : 100,
            radius : function() {
                return this.diameter / 2;
            }
        };
        console.log(circle.color);
        console.log(circle.diameter);
        console.log(circle.radius());
        
        // 객체 생성자 함수
        function Triangle(b, h) {
            this.base = b;
            this.height = h;
            this.area = function(){
                return this.base * this.height / 2;
            };
        }
        var trigangle1 = new Triangle(15,15);
        console.log(trigangle1.base);
        console.log(trigangle1.height);
        console.log(trigangle1.area());
        var trigangle2 = new Triangle(25,10);
        console.log(trigangle2.base);
        console.log(trigangle2.height);
        console.log(trigangle2.area());
    </script>

출력 이미지

3. prototype

'생성자 함수'로 생성된 객체들은 '생성자 함수'에서 정의한 속성을 그대로 상속받는다. prototype을 이용하면 객체의 메서드를 '생성자 함수' 내에 정의하지 않고도 생성된 객체에서 호출하여 사용할 수 있다.

    <script>
        function Triangle(b, h) {
            this.base = b;
            this.height = h;
        }
        Triangle.prototype.area = function(){
            return this.base * this.height / 2;
        };
        Triangle.prototype.printOut = function(){
            return '밑변 : '+this.base+' 높이 : '+this.height+' 넓이 : '+this.area();
        };
        var triangle1 = new Triangle(30, 20);
        console.log(triangle1.area());
        var triangle2 = new Triangle(80, 40);
        console.log(triangle2.printOut());
    </script>

출력 이미지

4. for...in 문

for(var 변수 in 객체명) {      실행문;  }

    <script>
        var info = {
            subject: 'javascript',
            credit: 3,
            days: 2,
            tuition: 1000
        };
        for(var i in info){
            console.log(i+' : '+info[i]);
        }
    </script>

출력 이미지

5. class

class는 기존에 사용했던 객체 생성과 상속 구문을 체계적인 객체지향 구문으로 보완했다.

class 클래스명 {      constructor(매개변수1, 매개변수2, ...) {          this.이름 = 매개변수1;          this.이름 = 매개변수2;          . . .      }      메서드명( ) {      }      get 메서드명( ) {      }      set 메서드명(매개변수) {      }  }  var 변수1 = new 클래스명(매개변수1 값, 매개변수2 값, . . .);  var 변수2 = new 클래스명(매개변수1 값, 매개변수2 값, . . .);

    <script>
        class SubjectInfo{
            constructor(subject, credit) {
                this.subject = subject;
                this.credit = credit;
                this.days = [80, 120, 140];
                this.day = this.days[0];
            }
            printOut(){
                return '과목 : '+this.subject+', 학점 : '+this.credit+', 수업일 : '+this.day;
            }
            get lessonTime(){
                return this.day;
            }
            set lessonTime(num){
                this.day = this.days[num];
            }
        }
        var sub1 = new SubjectInfo('html', 1);
        console.log(sub1.subject);
        console.log(sub1.printOut());
        console.log(sub1.lessonTime); // get lessonTime() → this.days[0]
        sub1.lessonTime = 1; // set lessonTime(num) → this.days[1]
        console.log(sub1.lessonTime); 
        
        var sub2 = new SubjectInfo('css', 2);
        console.log(sub2.subject);
        sub2.lessonTime = 2; // this.days[2]
        console.log(sub2.printOut());
    </script>

출력 이미지