💂‍♀️ Today

• 재귀함수 개념 복습, 코플릿(1-9), 다시 블로깅
• 객체지향 예제 복습, 스프린트 다시 품

복습하자 복습하자라고 입에 달고 살았던 재귀함수 그리고 객체 지향 스프린트를 다시 복습했다.
역시 오랜만에 복습을 하니 새로운걸 공부한 기분이다.
신기하게도 재귀는 할만 한데?라고 생각했는데(오만방자했다) 문제를 풀어보니 머리가 멍해지는 기분이었고, 객체 지향은 평소에 잘 사용을 못하겠다라고 생각했는데 막상 예제를 공부하고 스프린트를 다시 푸니 이제 좀 잘 알겠다 싶었다. 사실 페어들이 재귀가 어렵고 객체지향이 상대적으로 쉬운거라고 하지만 나는 그 반대였다고!! 그치만 그것도 아니었지.. 사람들이 말한게 맞았다. 아니야 그냥 난 언제나 다 어렵다^^

😹 재귀함수

• 재귀(recursion)함수란? 자기 자신을 호출하는 함수
• 👊 재귀를 사용하기에 적합한 경우

  1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우
  2. 중첩된 반복문이 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운경우

• 👊 재귀의 장점과 단점

  장점 : 알고리즘이 재귀로 표현하기에 자연스러울 경우, 프로그램의 가독성이 좋다.
  단점 : 값이 리턴되기 전까지 호출마다 call stack을 새로 생성하므로, 메모리를 많이 사용한다.

😎 객체지향

왠지 모르게 내가 헷갈리는 부분

이걸 보고 좀 의아했다. 생성자에 파라미터도 없고.. 분명 나는 인스턴스에다가 값을 넣어줬는데 왜 Gurb 속성값이 나오는건지..

이걸 보면 차이를 알 수 있었다... 별거 아니지만 내가 오랜 시간 동안 헷갈린부분이다...

이것도 당연한거지만 나는 바보니까.. 캡쳐해둔다

• 공부한 코드

'use strict'
// object-oriented programming
// class : template (붕어빵틀)
// object: instance of a class (붕어빵) 
// - 클래스를 이용해서 실제로 데이터를 넣어서 만든것이 바로 오브젝트이다

// - 클래스를 이용해서 새로운 인스턴스를 생성하면 오브젝트가 됨.
//  Javascript classes
//   - introduced in ES6
//   - syntactical sugar over prototype based inheritance

//1. Class declarations

class Person {
    // constructor() 생성자를 이용해서 우리가 나중에 오브젝트를 만들때 필요한 데이터를 전달한다.
    constructor(name, age) {
       // fields: constructor로 전달된 데이터를 바로 아래와 같이 할당
        this.name = name;
        this.age = age;
    }

   // methods
   speak() {
       console.log(`${this.name} : hello!`)
   }
}



// 새로운 오브젝트를 만들때는 new라는 키워드를 넣는다.
const soyoung = new Person('soyoung',29)
console.log(soyoung.name) // soyoung
console.log(soyoung.age) // 29
soyoung.speak() // soyoung : hello!


// 2. GETTER and SETTERS
// class User {
//     constructor(firstName, lastName, age) {
//         this.firstName = firstName;
//         this.lastName = lastName;
//         this.age = age;
//     }
//     get age() { // 값리턴
//         return this_age
//     }
//     set age(value){ // 값설정
//        if(value < 0) {
//            throw Error('age can not be nagative')
//        }
//         this_age = value;
//     }
// } 
// // const user1 = new User('steve', 'Job', '-1');
// console.log(user1.age);
//총 필드 3개, firstName, lastName, _age

// 3. Fields (public, private) -> constructor사용안하고 필드정의 가능
// 그냥 public은 외부에서 접근가능, private는 클래스 내부에서만 접근 가능. 외부에서 값 안 보임, 이 값을 읽을수도 변경할 수도 없음
class Experiment {
    publicField = 2;
    #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField); //2
console.log(experiment.privateField);// undefined

// 4. Static properties and methods
class Article {
    static publisher = 'dream coding';
    constructor(articleNumber) {
        this.articleNumber = articleNumber;
    }
    static printPublisher() {
        console.log(Article.publisher)
    }
}

const article1 = new Article(1);
const article2 = new Article(2);
console.log(article1.articleNumber, "============") //1

//스테틱은 클래스의 고유한 값. 오브젝트에 상관없이 클래스 자체에 연결되어있다. 
// console.log(article.publisher)// undefined  
console.log(Article.publisher)// dream coding

Article.printPublisher() // dream coding


// 5. 상속, 다양성
class Shape {
    constructor(width, height, color) {
        this.width = width;
        this.height = height;
        this.color = color;
    }
    draw() {
        console.log(`drawing ${this.color} color!`)
    }
    getArea() {
        console.log( this.width * this.height)
    }
    toString() {
        console.log(`Triangle color : ${this.color}`)
    }
}

// extends라는 클래스를 이용해서 클래스 Shape을 연장한다. 이렇게 하면 필즈,메소드 정보가 클래스 Rectangle,Triangle에 들어감
class Rectangle extends Shape {}
class Triangle extends Shape {
    draw() {
        super.draw() // 부모의 메소드 호출
        console.log('▲')
    }
    getArea() {
        console.log((this.width * this.height) / 2)
    }
}

const triangle = new Triangle(40,40,'red')
const rectangle = new Rectangle(40, 40, 'blue');

rectangle.draw(); // drawing blue color!
rectangle.getArea(); // 1600
triangle.getArea(); // 800
triangle.draw();// drawing red color!// ▲


//6. class checking: instanceOf
// 왼쪽 오브젝트가 오른쪽 클래스를 이용해서 만든건지 아닌지 확인
console.log(rectangle instanceof Rectangle) // true
console.log(triangle instanceof Triangle) // true
console.log(rectangle instanceof Triangle) // false
console.log(triangle instanceof Shape) // true 
// Shape 상속했으니 
console.log(triangle instanceof Object) // true
// 트라이앵글은 Object의 인스턴스다? yes. 자바스크립트에서 만든 모든 오브젝트 클래스들은 자바스크립트에있는 오브젝트를 상속한것이다.
// 이 말은 자바스크립트 오브젝트에서 쓰이는 공통적인 메소드들을 사용가능하다. 커맨드 Object클릭해서 메소드 보자. 아래 예시
 console.log(triangle.toString()) // Shape클래스에 toString() 메소드 추가 안해줬을때도 [object,object] 나온다. 
 //  Shape클래스에 toString()메소드 추가해주면 //Triangle color : red




 console.log("==============")

 class Animal {
     constructor(name, color, age) {
         this.name = name;
         this.color= color;
         this.age = age;
     }
    bark() {
        console.log(`${this.name} is bark?`)
    } 
 }

 const dog = new Animal("dog", "black", 13)
 console.log(dog)