Class Syntax

닿을 듯 말듯, 잡힐 듯 말듯하면서 안잡히는 클래스에 대해서 정리합니다.

Objectives

• 클래스가 무엇인지 다룹니다.
• 자바스크립트가 클래스라는 개념(idea)을 어떻게 구현하는지를 이해합니다.
• 추상화, 캡슐화, 다형성과 같은 단어들을 정의합니다.
• ES 2015 클래스를 사용해서 데이터 구조를 코딩합니다.

1. 클래스가 그래서 무엇인가요

ES 2015에서 도입된 자바스크립트의 클래스는 자바스크립트에 이미 존재하는 프로토타입 기반 상속에 대한 문법적 조미료이다(syntactical sugar). 클래스 문법은 새로운 객체 지향 상속 모형을 자바스크립트에 도입한 것은 아니다.

Declare Class and knowing about Constructor

class Student {
    constructor(firstName, lastName) {
        this.firstName = firstname;
        this.lastName = lastName;
    }
}

class Student { 
    constructor(firstName, lastName) { 
        this.firstName = firstname; 
        this.lastName = lastName; 
    } 
}

let firstStudent = new Student("Team", "Jupeter");
let secondStudent = new Student("Jack", "Black");

class Student {   // 패턴 및 설계도를 정의합니다.
    constructor(firstName, lastName, year) { 
        this.firstName = firstname; 
        this.lastName = lastName; 
        this.grade = year;
    } 
} // 기본적으로 위 코드들은 여기 설계도가 있다는 것을 나타냅니다. 

let firstStudent = new Student("Team", "Jupeter", 3); 
let secondStudent = new Student("Jack", "Black");

let firstStudent = new Student("Team", "Jupeter", 3);
console.log(firstStudent);
// Student {firstName: "Team", lastname: "Jupeter", grade: 3}
console.log(firstStudent.lastName);
// "Jupeter"


let secondStudent = new Student("Jack", "Black");
console.log(secondStudent);
// Student {firstName: "Jack", lastname: "Black", grade: undefined}

secondStudent.grade = 4;
console.log(secondStudent);
// Student {firstName: "Jack", lastname: "Black", grade: 4}

Instacne Methods

class Student {
    constructor(firstName, lastName, year) {
        this.firstName = firstName;
        this.lastname = lastName;
        this.grade = year;
    }
    fullName() {
        return `Your full name is ${this.firstName} ${this.lastName}`;
    }
}

let firstStudent = new Student("Team", "Jupeter");
let secondStudent = new Student("Jack", "Black");

firstStudent.fullName();   // "Your full name is Team Jupeter"
secondStudent.fullName();   // "Your full name is Jack Black"

class Student { 
    constructor(firstName, lastName, year) { 
        this.firstName = firstName; 
        this.lastname = lastName; 
        this.grade = year;
        this.tardies = 0; 
    } 
    fullName() { 
        return `Your full name is ${this.firstName} ${this.lastName}`; 
    } 
}

markLate() {
    this.tardies += 1;
    if(this.tardies >= 3) {
        return "You are Expelled!!!!";
    }
    return `${this.firstName} ${this.lastName} has been late ${this.tardies}`;
}      // tardies 값에 1을 더해줍니다.

class Student { 
    constructor(firstName, lastName, year) { 
        this.firstName = firstName; 
        this.lastname = lastName; this.grade = year;  
        this.tardies = 0;  
    }
    fullName() { 
        return `Your full name is ${this.firstName} ${this.lastName}`; 
    }
    markLate() {
        this.tardies += 1;
        if(this.tardies >= 3) {
            return "You are Expelled!!!!"; 
        }
        return `${this.firstName} ${this.lastName} has been late                      ${this.tardies}`;
    } 
}


let firstStudent = new Student("Team", "Jupeter", 1); 
let secondStudent = new Student("Jack", "Black", 2);

console.log(firstStudent);
// Student {firstName: "Team", lastname: "Jupeter", grade: 1, tardies: 0};

firstStudent.markLate(); // 이제 markLate에 접근을 할 수 있습니다. 
// "Team Jupeter has been late 1 times" 
firstStudent.markLate();
// "Team Jupeter has been late 2 times" 
firstStudent.markLate();
// "You are Expelled!!!!"

this.scores = [];

addScore(score) {
    this.scores.push(score); 
    return this.scores;
}

class Student { 
    constructor(firstName, lastName, year) { 
        this.firstName = firstName; 
        this.lastname = lastName; 
        this.grade = year;   
        this.tardies = 0;  
        this.scores = [];
    } 
    fullName() { 
        return `Your full name is ${this.firstName} ${this.lastName}`; 
    } 
    markLate() { 
        this.tardies += 1; 
        if(this.tardies >= 3) { 
            return "You are Expelled!!!!"; 
        } 
        return `${this.firstName} ${this.lastName} has been late                      ${this.tardies}`; 
    } 
    addScore(score) { 
        this.scores.push(score); 
        return this.scores; 
    }
}

let firstStudent = new Student("Team", "Jupeter", 1); 
let secondStudent = new Student("Jack", "Black", 2);


secondStudent.scores // []
secondStudent.addScore(92);
secondStudent.addScore(87);

secondStudent.scores // [92, 87]

calculateAverage() {
    let sum = this.scores.reduce((a, b) => a + b);
    return sum / this.scores.length;
}

// 바로 테스트해보겠습니다 

firstStudent.scores // []
firstStudent.addScore(98);
firstStudent.addScore(76);

firstStudent.calculateAverage() // 87

firstStudent.addScore(100);
firstStudent.calculateAverage() // 91.33333 ...

Class Methods

class Student { 
    constructor(firstName, lastName, year) { 
        this.firstName = firstName; 
        this.lastname = lastName; 
        this.grade = year;   
        this.tardies = 0;  
        this.scores = []; 
    } 
    fullName() { 
        return `Your full name is ${this.firstName} ${this.lastName}`; 
    } 
    static EnrollStudents(...students) {
        // maybe send an email here
    }    
} 

let firstStudent = new Student("Team", "Jupeter", 1); 
let secondStudent = new Student("Jack", "Black", 2);

Student.EnrollStudents([firstStudent, secondStudent]);

static 키워드는 클래스의 정적 메소드를 정의합니다. 정적 메소드는 호출하여도 그 클래스를 인스턴스화 하지 않으며, 클래스 인스턴스 하나에 대해 호출할 수 없습니다. 보통은 어플에 사용되는 유틸리티 함수를 만드는데 사용됩니다.

class Student { 
    constructor(firstName, lastName, year) { 
        this.firstName = firstName; 
        this.lastname = lastName; 
        this.grade = year;   
        this.tardies = 0;  
        this.scores = []; 
    } 
    fullName() { 
        return `Your full name is ${this.firstName} ${this.lastName}`; 
    } 
    markLate() { 
        this.tardies += 1; 
        if(this.tardies >= 3) { 
            return "You are Expelled!!!!"; 
        } 
        return `${this.firstName} ${this.lastName} has been late                          ${this.tardies}`; 
    } 
    addScore(score) { 
        this.scores.push(score); 
    return this.scores; 
    } 
    calculateAverage() { 
        let sum = this.scores.reduce((a, b) => a + b); 
        return sum / this.scores.length; 
    }
    static EnrollStudents() {
        return "Enrolling Students";
    }
} 

let firstStudent = new Student("Team", "Jupeter", 1); 
let secondStudent = new Student("Jack", "Black", 2);

firstStudent.EnrollStudents() // Error,개별 인스턴스에 대해 호출할 수 없습니다.

Student.EnrollStudents([firstStudent, secondStudent]); // "Enrolling Students" 이제야 이 메소드를 실행할 수 있습니다. 

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;
        
        return Math.hypot(dx, dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10); 

Point.distance(p1, p2);   // 7.071067....

Recap

class DataStructure() {
    constructor() {
        // what default properties should it have?
    }
    someInstanceMethod() {
        // what should each object created from this class be able to do?
    }
}

다음 포스팅에서는 class의 추상화, 캡슐화, 다형성과 같은 단어들을 정의하고 실제로 어떻게 코딩을 해나가야 하는지에 대해서 정리하겠습니다.