728x90
자바스크립트 클래스의 기본 기능
📌 객체 지향
C언어를 제외한 모든 프로그래밍 언어는 객체 지향(Object Oriented) 라는 패러다임을 기반으로 만들어진 언어입니다.
객체를 우선적으로 생각해 프로그램을 만든다는 방법론입니다.
객체를 만들고 객체들의 상호작용을 중심으로 개발하는 방법론
📌 클래스
객체틀, 객체를 효율적이고 안전하게 만드는 틀입니다.
📌 객체
속성과 메소드를 갖는 것
📌 코드 패러다임
- 과거의 패러다임 : 짧고 빠른 코드를 작성하자!
- 현재의 패러다임 : 쉽게 읽을 수 있는 코드를 작성하자
<script>
function 메일보내기(객체) {
console.log(`발신인: ${객체.발신인}`)
console.log(`수신인: ${객체.수신인}`)
console.log(객체.내용)
}
메일보내기({
발신인: '구름',
수신인: '별',
내용: '간식줘!'
})
</script>
객체.매개변수 입력하는것을 줄이기 위해 아래와 같은 코드로 구현.
<script>
function 메일보내기({발신인, 수신인, 내용}) {
console.log(`발신인: ${발신인}`)
console.log(`수신인: ${수신인}`)
console.log(내용)
}
메일보내기({
발신인: '구름',
수신인: '별',
내용: '간식줘!'
})
</script>
📌 객체 매개변수 예외 처리
<script>
function isRequired (이름) {throw `${이름} 매개변수에 문제가 있습니다.`}
function 메일보내기({
발신인 = isRequired('발신인'),
수신인 = isRequired('수신인'),
내용 = isRequired('내용')
}) {
console.log(`발신인: ${발신인}`)
console.log(`수신인: ${수신인}`)
console.log(내용)
}
메일보내기({
발신인: '구름',
수신인: '별',
내용: '간식줘!'
})
</script>
📌 추상화(Abstraction)
어떤 대상에서 나에게 필요한 것만 추출해 내는 것
현실 객체는 수많은 속성을 가지고 있습니다. 이 중에서 프로그램에 필요한 요소만 사용해서 객체를 표현한 것입니다.
📌 학생 성적관리 프로그램
<script>
const students = []
students.push({이름: '구름', 국어: 87, 영어: 98, 수학: 88, 과학: 90})
students.push({이름: '별이', 국어: 92, 영어: 98, 수학: 96, 과학: 88})
students.push({이름: '겨울', 국어: 76, 영어: 96, 수학: 94, 과학: 86})
students.push({이름: '바다', 국어: 98, 영어: 52, 수학: 98, 과학: 92})
const getSum = (student) => {
return student.국어 + student.수학 + student.과학 + student.영어
}
const getAvg = (student) => {
return getSum(student) / 4
}
let output = '이름\t총점\t평균\n'
for(const student of students){
output += `${student.이름}\t${getSum(student)}점\t${getAvg(student)}점\n`
}
console.log(output)
</script>
📌 객체 기능을 메소드로 추가하기
<script>
const students = []
students.push({이름: '구름', 국어: 87, 영어: 98, 수학: 88, 과학: 90})
students.push({이름: '별이', 국어: 92, 영어: 98, 수학: 96, 과학: 88})
students.push({이름: '겨울', 국어: 76, 영어: 96, 수학: 94, 과학: 86})
students.push({이름: '바다', 국어: 98, 영어: 52, 수학: 98, 과학: 92})
for(const student of students){
student.getSum = function() {
return this.과학 + this.국어 + this.수학 + this.영어
}
student.getAvg = function() {
return this.getSum() / 4
}
}
let output = '이름\t총점\t평균\n'
for(const student of students){
output += `${student.이름}\t${student.getSum()}점\t${student.getAvg()}점\n`
}
console.log(output)
</script>
메소드에는 화살표 함수를 사용하면 안됩니다. 익명함수인 this를 사용해 줘야 합니다.
<script>
function createStudent(이름, 국어, 영어, 수학, 과학){
return {
이름: 이름, 국어: 국어, 영어: 영어, 수학: 수학, 과학: 과학,
getSum () {
return this.국어 + this.영어 + this.수학 + this.과학
},
getAvg () {
return this.getSum() / 4
},
toString () {
return `${this.이름}\t${this.getSum()}점\t${this.getAvg()}점\n`
}
}
}
const students = [
createStudent('구름', 87, 98, 88, 90),
createStudent('별이', 92, 98, 96, 88),
createStudent('겨울', 76, 96, 94, 86),
createStudent('바다', 98, 52, 98, 92)
]
let output = '이름\t총점\t평균\n'
for(const student of students){
output += student.toString()
}
console.log(output)
</script>
객체를 생성하는 함수로 작성.
하지만 객체별로 getSum(), getAvg(), toString() 메소드를 생성하므로 함수 기본 자료형보다 무거운 자료형을 여러번 생성하게 되어 문제가 있습니다.
클래스와 프로토타입이라는 2가지 문법으로 객체를 효율적으로 만들 수 있습니다.
📌 클래스(class)
객체를 만들 때 수많은 지원을 하는 대신 많은 제한을 거는 문법
📌 프로토타입(prototype)
제한을 많이 하지 않지만, 대신 지원도 별로 하지 않는 문법
📌 클래스 선언하기
class 클래스 이름 {
}
📌 인스턴스(instance)
그냥 객체라고 부르기도 합니다.
클래스를 기반으로 만든 객체
📌 생성자
new 클래스 이름()
- 클래스 : 객체를 만드는 함수와 비슷한 것
- 인스턴스(객체) : 객체를 만드는 함수로 만든 객체와 비슷한 것
- 생성자 : 클래스를 기반으로 인스턴스를 생성할 때 처음 호출되는 메소드
<script>
// 클래스 이름은 대문자 사용
class Student {
//생성자 → 클래스로 객체를 생성할 때 호출되는 녀석
constructor(이름, 국어, 영어, 수학, 과학) {
this.이름 = 이름
this.국어 = 국어
this.수학 = 수학
this.영어 = 영어
this.과학 = 과학
}
getSum() {
return this.국어 + this.수학 + this.영어 + this.과학
}
getAvg() {
return this.getSum() / 4
}
toString() {
return `${this.이름}\t${this.getSum()}점\t${this.getAvg()}점\n`
}
}
const students = [
//객체를 생성
new Student('구름', 87, 98, 88, 90),
new Student('별이', 92, 98, 96, 88),
new Student('겨울', 76, 96, 94, 86),
new Student('바다', 98, 52, 98, 92)
]
let output = '이름\t총점\t평균\n'
for(const s of students){
output += s.toString()
}
console.log(output)
</script>
참고한 책 : 혼자 공부하는 자바스크립트
'JavaScript' 카테고리의 다른 글
자바스크립트 리액트 라이브러리 맛보기 (0) | 2022.11.10 |
---|---|
자바스크립트 클래스의 고급 기능 (0) | 2022.11.10 |
자바스크립트 예외 처리 (0) | 2022.11.09 |
자바스크립트 localStorage 객체 (0) | 2022.11.09 |
자바스크립트 to do list 만들기 (0) | 2022.11.08 |