자바스크립트 클래스의 기본 기능

자바스크립트 클래스의 기본 기능

 

📌 객체 지향

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>

---

참고한 책 : 혼자 공부하는 자바스크립트