예제로 배우는 자바스크립트 요약 및 코드 분석 5장 5.1~5.3

5장 객체

  자바스크립트는 객체 기반의 스크립트 언어이다. 자바스크립트를 이루고 있는 거의 모든 것들이 객체이다. 자바스크립트의 객체는 프로퍼티와 메서드로 구성된다. 자바스크립트에서 변수, 함수, 배열, 숫자, 문자열 등이 모두 객체에 기반하고 있다. 5장에서는 자바스크립트에서 객체를 생성하고 프로퍼티와 메서드에 접근하는 방법에 대해서 배운다. 또한 생성자 함수를 이용해서 객체를 생성하고 활용하는 방법에 대해 알아본다. 마지막으로는 자바스크립트 Es6 버전에서 추가된 클래스 기능과 활용법에 대해서 학습한다.

 

5.1 객체 생성

  객체(object)는 프로퍼티(property)와 메서드(method)의 집합이다. 객체의 프로퍼티는 변수와 같은 개념이다. 그리고 메서드는 함수와 거의 동일한 것이다. 특정 객체에 소속된 변수와 함수를 그 객체의 프로퍼티와 메서드라고 부른다. 자바스크립트에서 객체는 아주 중요한 개념이다.

  함수(Function), 배열(Array), 날짜(Date), 수학(Math) 등 모든 것이 객체이다. 자바스크립트의 숫자(Number)와 문자열(String)도 객체라고 할 수 있다. 자바스크립트에서는 숫자나 문자열도 객체의 특성인 프로퍼티와 메서드를 가지고 있다.

 

다음 코드에서는 아이디, 이름, 나이 세 개의 프로퍼티를 가진 member 객체를 생성한다.

예제 5-1. 객체의 생성 예

object1.html

코드 원문

<p id="show"><</p>
<script>
    const member = {
        id : "kdhong",
        name : "홍길동",
        age : 30
    };
    let text;
    text = member.id + " " + member.name + " " + member.age;
    document.getElementById("show").innerHTML = text;
</script>

예제 5-1. 객체의 생성 예

object1.html

코드 분석

<p id="show"><</p>
<script>
	// 객체 선언 시작
    const member = {
    // 객체 member 생성
        id : "kdhong",
        // 첫번째 프로퍼티 키는 id 값은 kdhong
        name : "홍길동",
        // 두번째 프로퍼티, 키는 name 값은 홍길동
        age : 30
        // 세번째 프로퍼티, 키는 age 값은 30
    };
    // 객체 선언 끝
    let text;
    // 변수 text 선언
    text = member.id + " " + member.name + " " + member.age;
    /* 문자열 연결 연산자로 객체의 데이터와 문자열 연결하고 그 값을
    text 변수에 저장 */
    document.getElementById("show").innerHTML = text;
    /* document.getElementById("show").innerHTML를 이용해서 id show가 가리키는
    곳에 text에 저장된 값 출력 */
</script>

  위 코드에서와 같이 객체에서 프로퍼티에 있는 값을 읽어오는 데 점(.) 연산자를 이용한다. 점(.) 연산자 대신 ㅏ음 예에서와 같이 대괄호([])를 이용하기도 한다.

 

예제 5-2. 대괄호([])릴 이용해서 프로퍼티 열기

object2.html

코드 원문

<p id="show"></p>
<script>
    const score = {
        kor : 80,
        eng : 90,
        math : 100
    };

    let sum,avg;
    sum = score["kor"] + score["eng"], score["math"];
    // sum = score.kor + score.eng + score.math;
    avg = sum/3;

    document.getElementById("show").innerHTML = "합계: " + sum +", 평균: " + avg;
</script>

예제 5-2. 대괄호([])릴 이용해서 프로퍼티 열기

object2.html

코드 분석

<p id="show"></p>
<script>
    const score = {
        kor : 80,
        eng : 90,
        math : 100
    };

    let sum, avg;
    sum = score["kor"] + score["eng"] + score["math"];
    // sum = score.kor + score.eng + score.math;
    avg = sum/3;

    document.getElementById("show").innerHTML = "합계: " + sum +", 평균: " + avg;
</script>

예제 5-2. 대괄호([])릴 이용해서 프로퍼티 열기

object2.html

코드 분석

<p id="show"></p>
<script>
    const score = {
    // 객체 score 선언
        kor : 80,
        // 객체 score의 첫번째 프로퍼티 키는 kor이고 값은 80이다 둘은 대응된다.
        eng : 90,
        math : 100
    };

    let sum, avg;
    sum = score["kor"] + score["eng"] + score["math"];
    /* score["kor"], score["eng"], score["math"]는 프로퍼티 kro, eng, mate의 값인
    80, 90, 100을 의미한다. 객체 score의 프로퍼티를 얻기 위해서 대괄호를 사용한다. *
    // sum = score.kor + score.eng + score.math;
    avg = sum/3;

    document.getElementById("show").innerHTML = "합계: " + sum +", 평균: " + avg;
</script>

5.2 프로퍼티

  객체는 프로터피와 메서드로 구성된다고 앞에서 설명했다. 여기서는 for in 문을 이용해서 객체의 프로퍼티를 반복적으로 읽어오는 방법과 객체에 프로퍼티를 추가하고 삭제하는 방법 등에 대해서 공부한다.

 

5.2.1 for in 문으로 프로퍼팊 읽기

  3장에서 배운 for in 문을 이용해서 객체에 존재하는 프로퍼티의 키와 값을 쉽게 반복적으로 읽어올 수 있다.

예제 5-3. for in 문으로 객체의 프로퍼티 읽기

property_for.html

코드 원문

<p id="show"></p>
<script>
    const member = {
        id : "kdhong",
        name : "홍길동",
        age : 30
    };

    let text = "";
    for(x in member) {
        text += member[x] + "<br>";
    }
    document.getElementById("show").innerHTML = text;
</script>

예제 5-3. for in 문으로 객체의 프로퍼티 읽기

property_for.html

코드 분석

<p id="show"></p>
// html 태그 p 선언하고 id값으로 show 지정
<script>
    const member = {
    // 객체 member 선언
        id : "kdhong",
        name : "홍길동",
        age : 30
    };

    let text = "";
    // 문자열 변수 text 선언하고 Null 값 지정
    for(x in member) {
        text += member[x] + "<br>";
    }
    document.getElementById("show").innerHTML = text;
    /* document.getElementById("show").innerHTML를 이용해서 변수 text에
    있는 값 출력 */
</script>

 

5.2.2 프로퍼티 추가하기

다음 예제에서와 같이 새로운 프로퍼티에 값을 할당함으로서 객체에 프로퍼티를 쉽게 추가할 수 있다.

예제 5-4. 객체에 프로퍼티 추가하기

property_add.html

코드 원문

<p id="show"></p>
<script>
    const member = {
        id : "kdhong",
        name : "홍길동",
        age : 30
    };
    member.email = "kdhong@korea.com";

    let text = "";
    for (x in member) {
        text += "키: "+ x + " , 값: " + member[x] + "<br>"
    }
    document.getElementById("show").innerHTML = text;
</script>

예제 5-4. 객체에 프로퍼티 추가하기

property_add.html

코드 분석

<p id="show"></p>
// html 태그 p 선언 id 값을 show로 한다.
<script>
    const member = {
    // member 객체 선언
        id : "kdhong",
        name : "홍길동",
        age : 30
    };
    member.email = "kdhong@korea.com";
    // 객체 member에 email 프로퍼티를 추가 값은 "kdhong@korea.com"로 한다.

    let text = "";
    // 문자열 변수 text 선언하고 값에 공백을 넣는다.
    for (x in member) {
    /* 객체의 요소들을 반복해서 읽어오는 for in문 선언
    키나 값이 차례대로 출력된다. */
        text += "키: "+ x + " , 값: " + member[x] + "<br>"
    }
    document.getElementById("show").innerHTML = text;
</script>

 

5.2.3 프로퍼티 삭제하기

  객체에서 특정 프로퍼티를 삭제하는 데에는 키워드 delete를 이용한다. 다음 예제를 통해서 프로퍼티를 삭제하는 방법에 대해 알아보자.

예제 5-5. 객체에서 프로퍼티 삭제하기

property_delete.html

코드 원문

<p id="show"></p>
<script>
    const member = {
        id : "kdhong",
        name : "홍길동",
        age : 30
    };

    delete member.id;

    let text = "";
    for(x in member) {
        text += "키: " + x + ", 값: " + member[x] + "<br>";
    }
    document.getElementById("show").innerHTML = text;
</script>

예제 5-5. 객체에서 프로퍼티 삭제하기

property_delete.html

코드 원문

<p id="show"></p>
<script>
    const member = {
    // member 객체 선언
        id : "kdhong",
        name : "홍길동",
        age : 30
    };

    delete member.id;
    // 객체 member의 속성 id 삭제

    let text = "";
    for(x in member) {
    // for in 문으로 객체의 요소 루프에서 차례대로 출력
        text += "키: " + x + ", 값: " + member[x] + "<br>";
        // 문자열 연결 연산자를 이용해서 변수 text에 값 차례대로 저장
    }
    document.getElementById("show").innerHTML = text;
    /* document.getElementById("show").innerHTML 속성을 이용해서
    웹 브라우저에 text에 저장된 값 출력 */
</script>

 

5.2.4 중첩 객체

  중첩된 객체(nested object)는 객체 안에 객체를 포함한다. 다음은 객체의 프로퍼티가 객체로 구성된 예이다.

5-6. 중첩된 객체의 예

object_nested.html

코드 원문

<p id="show"></p>
<script>
    const obj1 = {
        id : "kdhong",
        name : "홍길동",
        hobby: {
            hobby1: "게임",
            hobby2: "탁구",
            hobby3: "기타"
        }
    };

    let text = "";
    text += obj1.hobby.hobby1 + "<br>";
    text += obj1.hobby.hobby2 + "<br>";
    text += obj1.hobby.hobby3;
    // text += obj1["hobby"]["hobby1"] + "<br>"
    // text += obj1["hobby"]["hobby2"] + "<br>"
    // text += obj1["hobby"]["hobby3"];

    document.getElementById("show").innerHTML = text;
</script>

5-6. 중첩된 객체의 예

object_nested.html

코드 분석

<p id="show"></p>
// html p태그 선언하고 id 값으로 "show" 지정
<script>
    const obj1 = {
    // 객체 obj1 선언
        id : "kdhong",
        name : "홍길동",
        hobby: {
        // 중첩 객체 hobby 선언 obj1에 들어가있는 객체가 된다.
            hobby1: "게임",
            // 키 hobby1, 값으로 "게임"을 지정한다.
            hobby2: "탁구",
            hobby3: "기타"
        }
    };

    let text = "";
    text += obj1.hobby.hobby1 + "<br>";
    /* 문자열 연결 연산자를 이용해서 객체 obj1에 들어있는 중첩 객체
    hobby의 속성 hobby1의 값을 변수 text에 저장하고 개행한다. */
    text += obj1.hobby.hobby2 + "<br>";
    text += obj1.hobby.hobby3;
    // text += obj1["hobby"]["hobby1"] + "<br>"
    /* 중첩 객체 hobby의 hobby1의 속성 값을 나타나기 위해서 대괄호를 이중으로 사용해서
    표현할 수 있다. */
    // text += obj1["hobby"]["hobby2"] + "<br>"
    // text += obj1["hobby"]["hobby3"];

    document.getElementById("show").innerHTML = text;
    /* document.getElementById("show").innerHTML를 이용해서
    변수 text에 저장된 값을 출력한다. 변수 text에는 중첩 객체 hobby의
    속성의 값들이 저장되어 있으니 그 값들이 개행을 사이에 두고 출력된다. */
</script>

 

5.3 메서드

5.3.1 메서드란?

  앞에서 객체는 프로퍼티(property)와 메서드(method)로 구성된다고 설명했다. 프로퍼티는 객체에 소속된 변수(variable이며 메서드는 객체에 소속된 함수(function)이다. 달리 말하면 프로퍼티는 객체의 상태를 의미하고 메서드는 객체의 동작을 정의한다고 할 수 있다.

 

다음 예에서는 객체 cat에 intro() 메서드가 적용된다.

예제 5-7 객체에 메서드 사용 예

method1.html

코드 분석

<p id = "show"></p>
<script>
    const cat = {
        name: "로키",
        species: "랙돌",
        color: "흰색",
        age: 3,
        intro: function() {
            return "나의 이름은 "+ this.name + "입니다.";
        }
    }

    document.getElementById("show").innerHTML = cat.intro();
</script>

예제 5-7 객체에 메서드 사용 예

method1.html

코드 분석

<p id = "show"></p>
<script>
    const cat = {
    // 객체 cat 선언
        name: "로키",
        species: "랙돌",
        color: "흰색",
        age: 3,
        intro: function() {
        // 객체의 메서드 intro() 선언
            return "나의 이름은 "+ this.name + "입니다.";
        }
    }

    document.getElementById("show").innerHTML = cat.intro();
    /* document.getElementById("show").innerHTML를 이용해서
    객체 cat의 메서드 intro() 호출 문자열이 출력되게 된다. */
</script>

 

5.3.2 메서드 추가하기

  다음 코드에서는 객체를 생성한 다음 새로운 메서드를 추가한다.

예제 5-8. 객체의 메서드 추가하기

method2.html

코드 원문

<p id="show"></p>
<script>
    const cat = {
        name: "로키",
        species: "랙돌",
        color: "흰색",
        age: 3
    };
    cat.getAge = function() {
            return "나이는 " + this.age + "살 입니다.";
    }

    document.getElementById("show").innerHTML = cat.getAge();
</script>

예제 5-8. 객체의 메서드 추가하기

method2.html

코드 원문

<p id="show"></p>
<script>
    const cat = {
    // 객체 cat 생성
        name: "로키",
        species: "랙돌",
        color: "흰색",
        age: 3
    };
    cat.getAge = function() {
    // 객체 cat에 메서드 추가 메서드 명은 getAge이다.
            return "나이는 " + this.age + "살 입니다.";
            // 반환값 선언 문자열이 반환된다.
    }

    document.getElementById("show").innerHTML = cat.getAge();
    /* html 코드에서 id가 show인 부분에 cat.getAge() 함수가
    호출되서 사용된다. */
</script>

 

5.3.3 내장 메서드

  지금까지는 사용자가 객체를 생성해서 사용하는 방법에 대해서 설명했다. 이러한 객체를 사용자 정의 객체(user-defined object)라고 한다. 자바스크립트에서는 사용자 정의 객체 외에 자체적으로 만들어둔 내장 객체(built-in object)가 있다. 이 내장 객체들은 내장 메서드(built-in method)를 제공함으로서 우리가 편리하게 객체에 관련된 프로그래밍을 할 수 있게 해준다.

  많이 사용되는 내장 객체에는 Number 객체, String 객체, Array 객체, Date 객체, Math 객체 등이 있다. 이러한 내장 객체에 대해서 6장~19장에서 자세히 설명하겠다.

 

다음은 내장 객체인 Number 객체의 toFixed() 메서드를 사용한 코드이다.

예제 5-9. Number 객체의 toFixed() 메서드 사용 예

builtin_method1.html

코드 원문

<script>
    let x = 12.46245;

    document.write(x.toFixed(1) + "<br>");
    document.write(x.toFixed(3));
</script>

예제 5-9. Number 객체의 toFixed() 메서드 사용 예

builtin_method1.html

코드 분석

<script>
    let x = 12.46245;

    document.write(x.toFixed(1) + "<br>");
    /* 내장 객체인 Number 객체의 toFixed() 메서드를 사용해서
    소수 두번째 자리에서 반올림한다. */
    document.write(x.toFixed(3));
    /* 내장 객체의 Number 객체의 toFixed() 메서드를 사용해서
    소수 네번째에서 반올림해서 소주점 셋째자리까지 반환해서
    출력한다. */
</script>

 

다음 코드는 String 객체의 toUpperCase() 메서드를 사용해서 영문 소문자를 대문자로 변경하는 코드이다.

예제 5-10. String 객체의 toUpperCase() 메서드 사용 예

builtin_method2.html

코드 원문

<p id="show"></p>
<script>
    let str1 = "I am a student";

    document.getElementById("show").innerHTML = str1.toUpperCase();
</script>

예제 5-10. String 객체의 toUpperCase() 메서드 사용 예

builtin_method2.html

코드 분석

<p id="show"></p>
<script>
    let str1 = "I am a student";

    document.getElementById("show").innerHTML = str1.toUpperCase();
    /* String의 객체의 toupperCase()를 사용해서 문자열 변수 str1에 있는
    영문 소문자들을 모두 대문자로 변경했다. 그리고
    document.getElementById("show").innerHTM를 사용해서 html 코드에서 id 값이
    show인 곳에 str1.toUpperCase() 함수의 반환값을 출력했다. */
</script>