<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Class</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
// Class: 객체를 효율적으로 다루기 위한 문법(방법)
// 객체의 추상화
const students = [];
students.push({ name: "kim", kor: 100, eng: 100, mat: 100 }); // students[0].name = 'kim'
students.push({ name: "lee", kor: 95, eng: 95, mat: 95 });
students.push({ name: "woo", kor: 90, eng: 90, mat: 90 });
console.log(JSON.stringify(students, null, 2));
let output = "name\t total\t average\n";
// for(let i=0; i<students.length; i++)로 사용가능
for (const student of students) {
// student 대신 item, value 사용도 괜찮음.
let sum = student.kor + student.eng + student.mat;
let average = sum / 3;
output += `${student.name}\t\t ${sum}점\t ${average}점\n`; // \t는 tab!
}
console.log(output);
// 객체처리함수 - 함수분리(객체외부함수)
// const students = [];
students.push({ name: "kim", kor: 100, eng: 100, mat: 100 });
students.push({ name: "lee", kor: 95, eng: 95, mat: 95 });
students.push({ name: "woo", kor: 90, eng: 90, mat: 90 });
console.log(JSON.stringify(students, null, 2));
function getSum(student) {
return student.kor + student.eng + student.mat;
}
function getAverage(student) {
return getSum(student) / 3;
}
// let output = "name\t sum\t average\n";
for (const student of students) {
output += `${student.name}\t\t ${getSum(student)}점\t ${getAverage(
student
)}점\n`;
}
console.log(output);
// 객체처리함수 - 객체 내부에서 함수 사용
// const students = [];
students.push({ name: "kim", kor: 100, eng: 100, mat: 100 });
students.push({ name: "lee", kor: 95, eng: 95, mat: 95 });
students.push({ name: "woo", kor: 90, eng: 90, mat: 90 });
console.log(JSON.stringify(students, null, 2));
for (const student of students) {
student.getSum = function () {
return this.kor + this.eng + this.mat;
// this 사용할거라면 화살표함수 사용안됨
};
student.getAverage = function () {
return this.getSum() / 3;
};
}
// let output = "name\t sum\t average\n";
for (const student of students) {
output += `${
student.name
}\t\t ${student.getSum()}점\t ${student.getAverage()}점\n`;
}
console.log(output);
// 객체 생성자 함수 - 객체 데이터의 속성, 메서드, 객체 선언 후 사용
// ★추천사용법 (하지만 앞의 내용도 사용할 수 있어야함)
function createStudent(name, kor, eng, mat) {
return {
name: name,
kor: kor,
eng: eng,
mat: mat,
getSum() {
return this.kor + this.eng + this.mat;
},
getAverage() {
return this.getSum() / 3;
},
toString() {
return `${
this.name
}\t\t ${this.getSum()}점\t ${this.getAverage()}점\n`;
},
}; // return
} // createStudent()
// const students = [];
students.push(createStudent("kim", 100, 100, 100));
students.push(createStudent("lee", 95, 95, 95));
students.push(createStudent("woo", 90, 90, 90));
// let output = "name\t sum\t average\n";
for (const student of students) {
output += student.toString();
}
console.log(output);
});
</script>
</head>
<body></body>
</html>