A Developing Developer

09-1. 클래스의 기본 기능 본문

내일배움캠프 4기/[Javascript]혼자 공부하는 자바스크립트

09-1. 클래스의 기본 기능

H-JJOO 2022. 11. 13. 21:33

  • 객체 지향 패러다임 : 객체를 우선적으로 생각해서 프로그램을 만든다는 방법론

- 객체와 배열 조합하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>객체와 배열 조합하기</title>
    <script>
        // 객체 선언
        const students = []
        students.push({이름 : '구름', 국어: 87, 영어: 98, 수학: 88, 과학: 90})
        students.push({이름 : '별이', 국어: 82, 영어: 92, 수학: 82, 과학: 91})
        students.push({이름 : '겨울', 국어: 84, 영어: 94, 수학: 81, 과학: 92})
        students.push({이름 : '바다', 국어: 85, 영어: 91, 수학: 83, 과학: 96})

        // 출력
        console.log(JSON.stringify(students, null, 2))
    </script>
</head>
<body>

</body>
</html>

- 객체 활용하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>객체 활용하기</title>
    <script>
        // 객체 선언
        const students = []
        students.push({이름 : '구름', 국어: 87, 영어: 98, 수학: 88, 과학: 90})
        students.push({이름 : '별이', 국어: 82, 영어: 92, 수학: 82, 과학: 91})
        students.push({이름 : '겨울', 국어: 84, 영어: 94, 수학: 81, 과학: 92})
        students.push({이름 : '바다', 국어: 85, 영어: 91, 수학: 83, 과학: 96})

        // 출력
        let output = '이름\t총점\t평균\n'
        for (const s of students) {
            const sum = s.국어 + s.영어 + s.수학 + s.과학
            const average = sum / 4
            output += `${s.이름}\t${sum}점\t${average}점\n`
        }

        console.log(output)
    </script>
</head>
<body>

</body>
</html>

- 객체를 처리하는 함수(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>객체를 처리하는 함수(1)</title>
    <script>
        // 객체 선언
        const students = []
        students.push({이름 : '구름', 국어: 87, 영어: 98, 수학: 88, 과학: 90})
        students.push({이름 : '별이', 국어: 82, 영어: 92, 수학: 82, 과학: 91})
        students.push({이름 : '겨울', 국어: 84, 영어: 94, 수학: 81, 과학: 92})
        students.push({이름 : '바다', 국어: 85, 영어: 91, 수학: 83, 과학: 96})

        // 객체를 처리하는 함수 선언
        function getSumOf (student) {
            return student.국어 + student.영어 + student.수학 + student.과학
        }

        function getAverageOf (student) {
            return getSumOf(student) / 4
        }

        // 출력
        let output = '이름\t총점\t평균\n'
        for (const s of students) {
            output += `${s.이름}\t${getSumOf(s)}점\t${getAverageOf(s)}점\n`
        }

        console.log(output)
    </script>
</head>
<body>

</body>
</html>

 

- 객체를 처리하는 함수(2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>객체를 처리하는 함수(2)</title>
    <script>
        // 객체 선언
        const students = []
        students.push({이름 : '구름', 국어: 87, 영어: 98, 수학: 88, 과학: 90})
        students.push({이름 : '별이', 국어: 82, 영어: 92, 수학: 82, 과학: 91})
        students.push({이름 : '겨울', 국어: 84, 영어: 94, 수학: 81, 과학: 92})
        students.push({이름 : '바다', 국어: 85, 영어: 91, 수학: 83, 과학: 96})

        // students 배열 내부의 객체 모두에 메소드를 추가
        for (const student of students) {
            student.getSum = function () {
                return this.국어 + this.영어 + this.수학 + this.과학
            }

            student.getAverage = function () {
                return this.getSum() / 4
            }
        }

        // 출력
        let output = '이름\t총점\t평균\n'
        for (const s of students) {
            output += `${s.이름}\t${s.getSum()}점\t${s.getAverage()}점\n`
        }

        console.log(output)
    </script>
</head>
<body>

</body>
</html>

- 객체를 생성하는 함수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>객체를 생성하는 함수</title>
    <script>
        function createStudent(이름, 국어, 영어, 수학, 과학) {
            return {
                // 속성 선언
                이름: 이름,
                국어: 국어,
                영어: 영어,
                수학: 수학,
                과학: 과학,

                // 메소드 선언
                getSum() {
                    return this.국어 + this.영어 + this.수학 + this.과학
                },
                getAverage() {
                    return this.getSum() / 4
                },
                toString() {
                    return `${this.이름}\t${this.getSum()}\t${this.getAverage()}점\n`
                }
            }
        }
        // 객체 선언
        const students = []
        students.push(createStudent('구름', 87, 98, 88, 90))
        students.push(createStudent('별이', 82, 94, 82, 91))
        students.push(createStudent('겨울', 81, 91, 82, 93))
        students.push(createStudent('바다', 84, 92, 83, 91))

        // 출력
        let output = '이름\t총점\t평균\n'
        for (const s of students) {
            output += s.toString()
        }
        console.log(output)
    </script>
</head>
<body>

</body>
</html>

  • 추상화 : 프로그램에서 필요한 요소만을 사용해서 객체를 표현하는 것
  • 클래스 : 객체를 안전하고 효율적으로 만들 수 있게 해주는 문법

- 클래스 생성

class 클래스 이름 {

}
  • 인스턴스 : 클래스를 기반으로 생성한 객체

- 인스턴스 생성

new 클래스 이름()

- 클래스 서언하고 인스턴스 생성하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클래스 선언하고 인스턴스 생성하기</title>
    <script>
        // 클래스 선언
        class Student {

        }

        // 학생 선언
        const student = new Student()

        // 학생 리스트를 선언
        const students = [
                new Student(),
                new Student(),
                new Student(),
                new Student(),
        ]
    </script>
</head>
<body>

</body>
</html>
  • 생성자 : 객체가 생성될 때 호출되는 함수.  클래스를 기반으로 인스턴스를 생성할 때 처음 호출되는 메소드, 속성을 추가하는 등 객체의 초기화 처리를 담당
class 클래스 이름 {
    constructor () {
        /*생성자 코드*/
    }
}

- 생성자 함수와 속성 추가하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>생성자 함수와 속성 추가하기</title>
    <script>
        class Student {
            constructor(이름, 국어, 영어, 수학, 과학) {
                this.이름 = 이름
                this.국어 = 국어
                this.영어 = 영어
                this.수학 = 수학
                this.과학 = 과학
            }
        }

        // 객체를 선언
        const students = []
        students.push(new Student('구름' , 87, 88, 98, 88 , 90))
        students.push(new Student('별이' , 82, 83, 94, 81 , 91))
        students.push(new Student('겨울' , 82, 85, 94, 83 , 93))
        students.push(new Student('바다' , 81, 83, 94, 85 , 92))
    </script>
</head>
<body>

</body>
</html>

 

- 메소드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>메소드 추가하기</title>
    <script>
        class Student {
            constructor(이름, 국어, 영어, 수학, 과학) {
                this.이름 = 이름
                this.국어 = 국어
                this.영어 = 영어
                this.수학 = 수학
                this.과학 = 과학
            }

            getSum() {
                return this.국어 + this.영어 + this.수학 + this.과학
            }
            getAverage() {
                return this.getSum() / 4
            }
            toString() {
                return `${this.이름}\t${this.getSum()}점\t${this.getAverage()}점\n`
            }
        }
        // 객체를 선언
        const students = []
        students.push(new Student('구름' , 87, 88, 98, 88 , 90))
        students.push(new Student('별이' , 82, 83, 94, 81 , 91))
        students.push(new Student('겨울' , 82, 85, 94, 83 , 93))
        students.push(new Student('바다' , 81, 83, 94, 85 , 92))

        // 출력
        let output = '이름\t총점\t평균\n'
        for (const s of students) {
            output += s.toString()
        }
        console.log(output)

    </script>
</head>
<body>

</body>
</html>

============================================================================================

출처 : 혼자 공부하는 자바스크립트

============================================================================================

힘들다...

'내일배움캠프 4기 > [Javascript]혼자 공부하는 자바스크립트' 카테고리의 다른 글

10. 리액트 라이브러리 맛보기(보류)  (0) 2022.11.14
09-2. 클래스의 고급 기능  (0) 2022.11.13
08-2. 예외 처리 고급  (0) 2022.11.13
08-1. 구문 오류와 예외  (0) 2022.11.13
07-2. 이벤트 활용  (1) 2022.11.12
'내일배움캠프 4기/[Javascript]혼자 공부하는 자바스크립트' Related Articles more