배열과 객체

이번엔 배열관 객체를 복습하자. 기본적인 선언이라 보면 되겠다. 객체는 조금 특이하지만, 이용법만 알면 편하다.

<script>

        // 배열 : 인덱스를 이용한 접근이 가능하다.

        var array = ['사과', '바나나', '망고', '딸기'];

        alert(array[1]);

        // 객체 : 키를 이용한 접근이 가능하다.

        var product = {

            // 키에는 ''을 안붙여도 되지만, 언제 어떻게 바뀔지 모르니, 난 붙이겠다.

            '제품명' : '건조망고',

            '유형' : '당절임',

            '성분' : '망고, 설탕, 메타중아황산나트륨, 치자횡색소',

            '원산지' : '필리핀'

        };

        alert(product.성분);

        alert(product['성분']);

</script>

객체안에 함수를 만들어 넣을 수 있다. 이 경우에 함수대신 메서드라 부른다. 기억할 것은 객체 안에 자신이 가지고 있는 속성을 사용하고 싶을 때, this를 붙여서 사용한다. 다른 언어에서 처럼 생략이 불가능하니 꼭 기억하자.

<script>

        var person = {

            name: '홍길',

            eat: function (food) {

                alert(this.name + '이 ' + food + '을/를 먹습니다.');

            }

        };

        person.eat('밥');

</script>

객체의 반복문을 사용할 경우 for문을 이용해서 인덱스로 접근하는 방법은 사용할 수 없다. 하지만 for in 반복문을 이용해 접근이 가능하다.

    <script>

        var product = {

            // 키에는 ''을 안붙여도 되지만, 언제 어떻게 바뀔지 모르니, 난 붙이겠다.

            '제품명': '건조망고',

            '유형': '당절임',

            '성분': '망고, 설탕, 메타중아황산나트륨, 치자횡색소',

            '원산지': '필리핀'

        };

        var output = "";

        for (var key in product) {

            output += '-- ' + key + ': ' + product[key] + '\n';

        }

        alert(output);

    </script>

이번에는 in 키워드를 알아보자. in은 객체 안에 속성이 존재하는지 확인할 수 있다.

    <script>

        var product = {

            // 키에는 ''을 안붙여도 되지만, 언제 어떻게 바뀔지 모르니, 난 붙이겠다.

            '제품명': '건조망고',

            '유형': '당절임',

            '성분': '망고, 설탕, 메타중아황산나트륨, 치자횡색소',

            '원산지': '필리핀'

        };

        var output = "";

        output += "'유형' is pruduct :" + ('유형' in product) + '\n';

        output += "'원산지' is pruduct :" + ('원산지' in product); +'\n';

        output += "'재료' is pruduct :" + ('재료' in product);

        alert(output);

    </script>

그리고 with 키워드는 참조할 객체를 가리켜서 코딩을 좀 더 단순하게 해준다.

    <script>

        var product = {

            '제품명': '건조망고',

            '유형': '당절임',

            '성분': '망고, 설탕, 메타중아황산나트륨, 치자횡색소',

            '원산지': '필리핀'

        };

        var output = "";

        with (product) {

            output += "'유형' pruduct :" + 유형 + '\n';

            output += "'원산지' pruduct :" + 원산지 +'\n';

            output += "'성분' pruduct :" + 성분;

        }

        // 같은 동작

        //output += "'유형' pruduct :" + product.유형 + '\n';

        //output += "'원산지' pruduct :" + product.원산지 + '\n';

        //output += "'성분' pruduct :" + product.성분;

        alert(output);

    </script>

객체의 생성과 제거

    <script>

        //선언

        var student = {};

        student.name = '홍길동';

        student.hobby = '악기';

        // toString 메서드 생성

        student.toString = function () {

            output = '';

            for (var key in this) {

                if (key != 'toString') {

                    output += key + ":" + this[key] + "\n";

                }

            }

            return output;

        }

        alert(student.toString());

        delete (student.hobby); // hobby 삭제

        alert(student.toString());

    </script>