섹션18 자료구조 소개

자료구조
모든 자료구조는 서로 다른 상황에 특화된 각각의 장점들을 갖고 있으며
어떤 특정 자료 구조도 다른 것들을 압도하지 않는다.

EX2015의 클래스 문법에 대한 논의를 해보자
우리가 학습하려는 모든 자료 구조에 대한 새로운 클래스를 정의할 것이다.

단방향 연결 리스트, 양방향 연결 리스트, 스택, 큐 등과 같은 전통적인 자료 구조
트리, 이진 검색 트리, 그래프와 같은 좀 더 복잡한 자료구조
이 자료구조를 왜 배우고 왜 중요하고, 어떤 식으로 유용한지? 구현도 해보자

클래스 핵심 용어, 생성자 작성, 새로운 연산자의 인스턴스화, 자바스크립트에서의 클래스 사용

객체 지향 프로그래밍

자바스크립트 클래스 개념은 추상화, 캡슐화 및 다형성 같이 정의된 용어들과 같이 엄격한 의미에서 객체지향 프로그래밍이 아니다.

클래스란? 사전에 정의된 속성 및 메소드들을 이용해 객체를 생성하기 위한 청사진과 같다.

단방향 연결리스트
양방향 연결리스트

• 이 패턴을 정의하게 되면 우리가 정의한 클래스 혹은 청사진을 이용해 실제로 많은 개별 연결 리스트 객체들을 인스턴스화 할 수 있다.

근데 어레이는 어레이가 먼저 인스턴스화 되어야 하고 그 후에야 이 모든 것들에 접근할 수 있다. 자바스크립트는 실제로 클래스들을 지원하진 않는다.
자바스크립트 클래스들은 주로 자바스크립트에 이미 존재하는 프로토타입 기반 상속자들을 구문적으로 눈속임한 것이다.
자바스크립트는 진정한 객체 지향인적은 없고, 단지 프로토타입 기반 상속사 혹은 프로토타이핑으로 불리는 무엇인가를 이용하는 것이다.
그 모든 것들은 클래스 구문이 처음 소개된ES2015와 등장 !!

클래스를 자료 구조로 정의하는 것이 쉽다.
따라서 객체 지향 프로그래밍 혹은 프로토타입 기반 상속 방식 모두에 익숙하지 않다는 것은 어쩌면 말이 안된다.
자바스크립트는 기술적으로 진정한 객체 지향 프로그래밍을 지원하진 않지만 그 자체가 우리를 방해하진 않는다.

왜 배워야 할까?
앞으로 수많은 자료구조들을 클래스로 구현하려고 한다.
트리나 그래프나 단방향 연결리스트등을 빌드해야 한다.
클래스를 정의하고, 개별 리스트를 인스턴스화 시킬 수 있는 자바스크립트에서 패턴을 정의할 것이다.

class Student{
	constructor(firstName, lastName, year){
    	this.firstName = firstName; // 여기서 this는 firstStudent 혹은 secondStudent를 지칭한다. 
      	this.secondName = secondName; 
      	this.grade = year; 
    }
}

let firstStudent = new Student("Colt","Steele",3)
let secondStudent = new Student("Blue","Steele",2)

instance 메소드 추가하기

인스턴스 메소드, 스태틱 메소드 및 클래스 메소드 등을 살펴보자.
인스턴스 메소드는 두번째 종료의 메소드
특정 인스턴스에 내장되어 있다기 보다는 특정한 단일 인스턴스 이 경우 Student에 적용되는 기능을 제공한다고 할 수 있다.
단방향 연결 리스트를 살펴 볼 때 특정인스턴스에 다수의 인스턴스 메소드를 정의해볼게

class Student{
	constructor(firstName, lastName, year){
    	this.firstName = firstName; 
      	this.secondName = secondName; 
      	this.grade = year; 
      	this.tardies = 0;
      	this.scores =[];
    }
  fullName(){
  	return `Your full name is ${this.firstName} ${this.secondName}`; 
  }
  markLate(){
  	this.tardies +=1;
    if(this.tardies >=3){
    	return "YOU ARE EXPELLED!!!!!"
    }
        return `${this.firstName} ${this.secondName} has been late ${this.tardies} times`; 
    }
  addScore(score){
  	 this.scores.push(score);
     return this.scores
  }
  calculateAverage(){
  	 let sum = this.scores.reduce(function(a,b){return a+b})
     return sum/this.scores.length; 
  }
}

let firstStudent = new Student("Colt","Steele",3)
let secondStudent = new Student("Blue","Steele",2)

secondStudent.fullName()
"Your full name is Blue Steele"

firstStudent.markLate()
"Colt Steele has been late 1 times"

firstStudent.markLate()
"Colt Steele has been late 2 times"

firstStudent.markLate()
"YOU ARE EXPELLED!!!!!"

secondStudent.addScore(88)
[88]

secondStudent.addScore(98)
[88, 98]

secondStudent.scores
[88, 98]

secondStudent.calculateAverage()
93

지금까지 보여준건 인스턴스 메소드를 포함하는 클래스를 정의하기 위한 기본 사항이다.
이제 클래스 내부 속성(this.firstName)을 사용해 문자열을 반환하는 간단한 인스턴스 메소드를 정의할 수 있을 것이다.

다음엔, 자주 사용되지는 않는 클래스 메소드의 생성 방법에 대해 알아보자

class 메소드 추가하기

클래스 메소드, 즉 클래스 생성, 패턴 정의 컨스트럭터 메소드 작성등에 대해 배워보자
이전에 new 키워드, 인스턴스 메소드에 대해 배웠다.
이제 ES 2015 클래스로 사용 가능한 두 번째 유형의 메소드에 대해 알아보자.
이 메소드에서는 메소드 정의 앞부분에 "static" 키워드를 사용하게 된다.
이 "static" 키워드는 클래스에 종속되는 반면 클래스의 개별 인스턴스 메소드에서는 반드시 종속적일 필요가 없는 메소드 혹은 기능을 생성하도록 한다.
static 키워드는 클래스의 static 메소드를 정의한다.
static 메소드는 클래스의 인스턴화 없이도 호출될 수 있으며, 클래스 인스턴스를 통해서는 호출될 수 없다. 이들은 어플리케이션을 위한 유틸리티 기능을 생성하기 위해 자주 사용된다.

class Student{
	constructor(firstName, lastName, year){
    	this.firstName = firstName; 
      	this.secondName = secondName; 
    }
  fullName(){
  	return `Your full name is ${this.firstName} ${this.secondName}`; 
  }
  static EnrollStudents(...students){
  	 return "ENROLLING STUDENTS!"
  }
}

let firstStudent = new Student("Colt","Steele",3)
let secondStudent = new Student("Blue","Steele",2)

Student.enrollStudents([firstStudent, secondStudent])

firstStudent를 인스턴스화 할 때처럼 firstStudent.EnrollStudent()을 호출할 수는 없다!!!! Student.EnrollStudent()는 가능하다!
이 EnrollStudent() 클래스 메소드는 개별 인스턴스와는 무관한 기능이고 "Student" 클래스의 한 부분으로 이 메소드가 필요하며, 이것은 헬퍼메소드든 유틸리티 메소드든 어떤 식으로든 "Student"와 관련이 있다.

두번째 예제로 더 알아보자

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); 

p1
//Point {x:5, y:5}
p2
//Point {x:10, y:10}
Point.distance(p1, p2)
//7.0710678118654755

정리!
클래스들은 인스턴스로 알려진 객체를 생성하기 위한 청사진이다.
클래스들은 "new"키워드를 통해 생성되거나 인스턴스화 된다.
constructor 함수는 클래스가 인스턴스화 될 때 동작하는 특별한 함수다.
"new" 를 통해 클래스를 인스턴스화 하면 클래스의 constructor가 먼저 동작하게 된다.
인스턴스 메소드는 객체와 유사한 방법들로 클래스에 더해질 수 있으며
클래스 메소드는 "static" 키워드와 함께 추가될 수 있다.