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);
'Dev > JavaScript' 카테고리의 다른 글
자바스크립트 기초 5 - 이벤트 처리 (0) | 2022.12.06 |
---|---|
자바스크립트 기초 - 4 (0) | 2022.12.05 |
브라우저 객체 모델(BOM: Browser Object Model) (0) | 2022.12.05 |
자바스크립트 기초 2 (0) | 2022.11.29 |
자바스크립트 기초 (0) | 2022.11.29 |
댓글