자바스크립트 기초 3 - '객체'

 

1. 객체의 속성과 메서드

자바스크립트에서 객체를 생성하고 속성에 접근하는 방법은 자바의 Map과 같은 형식으로 키를 사용한다.

//객체의 생성
var product = {
    제품명: '망고',
    유형: '당절임',
    성분: '망고, 설탕, 치자황색소',
    원산지: '필리핀'
};

위처럼 키를 이용해 객체의 속성에 접근할 수 있다.

 

객체의 속성 중 함수 자료형인 속성을 메서드라고 부른다.

아래 코드에서 객체 person은 name 속성과 eat 속성을 가지고 있으며, eat 속성은 함수 자료형이므로 eat() 메서드라고 부른다.

//객체를 선언
var person = {
    name: '벨라',
    eat: function(food) {} //함수 자료형은 메서드
};

person.eat(); //메서드 호출

 

👀 this 키워드

메서드 내에서 자기자신이 가지고 있는 속성을 출력하고 싶을 때는 자신이 가지고 있는 속성임을 분명하게 표시해야 한다.

자기 자신이 가지고 있는 속성이라는 것을 표시할 때는 this 키워드를 사용한다.

//객체를 선언
var person = {
    name: '벨라',
    eat: function(food) {
        alert(this.name + '가 ' + food + '을/를 먹습니다.');
    }
};

person.eat('밥'); //메서드 호출

출력 화면

 

 

 

2. 객체와 반복문

배열은 단순 for 반목문과 for in 반복문을 사용해 배열의 요소에 쉽게 접근할 수 있지만 객체는 단순 for 반목문을 사용해 객체의 속성을 살펴보지 못한다.

객체의 속성을 모두 살펴보려면 for in 반복문을 사용해야 한다.

//변수 선언
var vella = {
    name: '벨라',
    gender: 'woman',
    nationality: 'Korea',
    blog: 'https://tavi.tistory.com'
};

//출력
var output = '';
for (const key in vella) {
    output += '-' + key + ': ' + vella[key] + '\n';
}

alert(output);

실행 결과

for in 반복문에 객체를 넣으면 요소 개수만큼 반복문을 실행한다. 이때 위 코드의 변수 key에는 객체의 키가 들어간다. 따라서 코드를 실행하면 객체의 키와 속성을 모두 출력한다.

 

 

 

3. 객체와 관련된 키워드 - in과 with

3-1. in 키워드

//변수와 객체 생성
var output = '';
var student = {
    이름: '벨라',
    국어: 92,
    수학: 90,
    영어: 96,
    과학: 96
};

//in 키워드 사용 - 객체가 이름과 성별에 해당하는 속성을 가지고 있는지 확인함
output += "'이름' in student: " + ('이름' in student) + "\n";
output += "'성별' in student: " + ('성별' in student);

alert(output);

출력 결과

in 키워드를 for 키워드와 별도로 사용해 해당 키가 객체 안에 있는지 확인할 수 있다.
출력 결과 이름 속성은 있으므로 true를, 성별 속성은 없으므로 false를 출력한다.

 

3-2. with 키워드

with 키워드는 복잡하게 사용해야 하는코드를 짧게 줄여준다.

예를 들어 아래와 같은 코드를

var student = {
    이름: '벨라',
    국어: 92,
    수학: 90,
    영어: 96,
    과학: 96
};

var output = '';
output += "이름: " + student.이름 + "\n";
output += "국어: " + student.국어 + "\n";
output += "수학: " + student.수학 + "\n";
output += "영어: " + student.영어 + "\n";
output += "과학: " + student.과학 + "\n";
output += "총점: " + (student.국어 + student.수학 + student.영어+ student.과학);

alert(output);

 

아래와 같이 이전 코드보다 간결하게 줄일 수 있으며 객체의 속성을 사용하기 쉽게 만들 수 있다.

/*
with 키워드
*/

var student = {
    이름: '벨라',
    국어: 92,
    수학: 90,
    영어: 96,
    과학: 96
};

var output = '';
with(student) {
    output += '이름: ' + 이름 + '\n';
    output += '국어: ' + 국어 + '\n';
    output += '수학: ' + 수학 + '\n';
    output += '영어: ' + 영어 + '\n';
    output += '과학: ' + 과학 + '\n';
    output += '총점: ' + (국어+수학+영어+과학);
}

alert(output);

출력 결과

 

 

4. '동적인' 객체의 속성 추가와 제거

처음 객체를 생성하는 시점 이후에 객체의 속성을 추가하거나 제거하는 것을 "동적으로 속성을 추가/제거한다"고 부른다.

 

4-1. 객체에 속성 추가하기

//빈 객체 선언
var student = {};

//속성 추가하기
student.이름 = '벨라';
student.성별 = '여자';
student.국적 = '한국';
student.블로그 = 'tavi.tistory.com';

//메서드 추가하기
//객체에 있는 속성을 출력하는 메서드
student.toString = function() {
    var output = '';
    for (const key in this) {
        if (key != 'toString') {
            output += key + ': ' + this[key] + '\n';           
        }        
    }
    return output;
}

alert(student.toString());

위와 같은 방법으로 동적으로 객체에 속성을 추가할 수 있다. (메서드도 속성임)

출력 결과

 

 

4-2. 객체 속성 제거하기

동적으로 객체의 속성을 제거할 때는 delete 키워드를 사용한다. delete 키워드 뒤에 삭제하고자 하는 객체의 속성을 입력하면 된다. 

 

/*
객체에 속성 추가하기
*/

//빈 객체 선언
var student = {};

//속성 추가하기
student.이름 = '벨라';
student.성별 = '여자';
student.국적 = '한국';
student.블로그 = 'tavi.tistory.com';

//메서드 추가하기
//객체에 있는 속성을 출력하는 메서드
student.toString = function() {
    var output = '';
    for (const key in this) {
        if (key != 'toString') {
            output += key + ': ' + this[key] + '\n';           
        }        
    }
    return output;
}

//속성 제거하기
delete(student.성별);
alert(student); //toString() 메서드를 사용하지 않아도 메서드 사용 가능

삭제 완료된 출력 결과

 

 

5. 객체와 배열을 사용한 데이터 관리 예제 

학생들의 성적 총점과 평균을 계산하는 예제를 작성

//학생 정보 배열 생성
var students = [];
students.push({ 이름: '홍길동', 국어: 87, 영어: 90, 수학: 98 });
students.push({ 이름: '홍길순', 국어: 98, 영어: 56, 수학: 78 });
students.push({ 이름: '홍길투', 국어: 90, 영어: 100, 수학: 98 });
students.push({ 이름: '홍길삼', 국어: 65, 영어: 98, 수학: 88 });
students.push({ 이름: '홍길사', 국어: 77, 영어: 70, 수학: 98 });
students.push({ 이름: '홍길오', 국어: 90, 영어: 98, 수학: 98 });

//모든 students 배열내의 객체에 메서드를 추가한다.
for (const i in students) {
    //총점 구하는 메서드
    students[i].getSum = function() {
        return this.국어 + this.영어 + this.수학;
    };

    //평균 구하는 메서드
    students[i].getAverage = function() {
        return this.getSum() / 3;
    };
}

//배열 students의 이름, 총점, 평균 출력하기
var output = '이름\t총점\t평균\n';
for (const i in students){
    with(students[i]) {
        output += 이름 + '\t'
               + getSum() + '\t\t'
               + getAverage() + '\n';  
    }
}

console.log(output);

출력 결과

 

 

5-1. 함수를 사용한 객체 생성

위에서 작성한 코드는 배열 안에 객체를 하나하나 직접 만들어서 넣었다. 객체를 하나하나 만들어 배열에 넣으면 서로 다른 형태의 객체를 배열 안에 넣을 수 있다는 장점이 있다. 하지만 개별적으로 객체를 만드는 것은 객체의 특성을 정확히 반영할 수 있지만 힘들고 시간이 오래걸린다.

아래와 같이 매개변수를 받아 객체를 생성하는 함수를 작성하면 객체를 틀에서 찍어내듯 만들어낼 수 있다.

//틀 만들기
function makeStudent(name, korean, math, english) {
    //속성
    var willReturn = {
        이름: name,
        국어: korean,
        수학: math,
        영어: english,
    
        //메서드    
        getSum: function() {
            return this.국어 + this.수학 + this.영어;
        },

        getAverage: function() {
            return (this.국어 + this.수학 + this.영어) / 3;
        },

        toString: function () {
            return this.이름 + '\t'
                 + this.getSum() + '\t' + this.getAverage();
        }
    };
    return willReturn;
}

//학생 정보 배열 생성
var students = [];
students.push(makeStudent('홍길동', 87, 90, 98));
students.push(makeStudent('홍길순', 98, 56, 78));

//출력
var output = '이름\t총점\t평균\n';
for (const i in students){
    output += students[i].toString() + '\n';
}

console.log(output);

앞서 위에서 작성한 코드를 수정해보았다.

 

출력 결과는 같은 것을 확인할 수 있다.

 

 

6. 생성자 함수

위처럼 함수를 사용하면 객체를 쉽게 찍어낼 수 있다. 하지만 실제로 저러한 방법은 사용되지 않는데 이유는 생성자 함수를 사용하면 기능이 많은 객체를 쉽게 만들 수 있기 때문이다.

생성자 함수는 new 키워드를 사용해 객체를 생성할 수 있는 함수를 의미한다.

• 생성자 함수의 이름은 일반적으로 대문자로 시작한다. (규정)
• 생성자 함수 안에서는 this 키워드를 사용해 객체의 속성을 지정한다.

 

//생성자 함수 만들기
function Student(name, korean, math, english) {
    this.이름 = name;
    this.국어 = korean;
    this.수학 = math;
    this.영어 = english;

    //메서드
    this.getSum = function() {
        return this.국어 + this.수학 + this.영어;
    };

    this.getAverage = function() {
        return this.getSum() / 3;
    };

    this.toString = function() {
        return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
    };
}

//Student 객체 생성 예
var student = new Student('홍길동', 87, 90, 98);

//학생 정보 배열 만들기
var students = [];
students.push(new Student('홍길동', 87, 90, 98));
students.push(new Student('홍길순', 98, 56, 78));

//출력하기
var output = '이름\t총점\t평균\n';
for (const i in students) {
    output += students[i].toString() + '\n';
}

console.log(output);

 

출력 결과

 

 

 

---

썸네일