프로젝트 캠프 3일차#

🔲 프로토타입 속성#

모든 자바스크립트 함수는 prototype 이라는 기본 속성을 가진다. 해당 속성은 함수가 생성자로 사용될 때 객체를 생성할 수 있는 함수=생성자 함수에만 존재한다. 이 prototype 속성은 함수가 생성자로 사용될 때 새로 생성된 객체의 프로토타입을 지정한다.

ㅤ

프로토타입 히든 속성은 함수에만 존재한다. 함수만! 여기에는 constructor라는 속성이 있는데 해당 속성에는 이 함수를 생성자로 가지고 있는 상위 함수를 가진다.

끝까지 프토로타입을 따라가면(__prototype__) 가장 상위에는 construcor : f Object 생성자가 있다. 해당 생성자에는 이미 자바스크립트가 생성해둔 다양한 함수등이 존재한다.

프로토타입 객체에는 constructor 속성과 __proto__ 속성 두 개를 기본으로 가진다.

프로토 속성으로 더 상위의 생성자 함수==현재 객체를 만든 생성자 함수로의 접근 권한을 얻을 수 있다.

참고링크

this는 자신을 호출한 객체의 영향 받음

// 생성자 함수 정의
function A(a, b) {
  this.a = a;
  this.b = b;
}

// 프로토타입에 메서드 추가
A.prototype.sum = function () {
  return this.a + this.b;
};

// A의 인스턴스 생성, a와 b 값을 초기화하지 않음
let instance1 = new A(1, 2);

console.log(instance1.sum()); // 3
console.log(instance1.__proto__.sum()); // NaN
console.log(A.prototype.sum()); // NaN

A.prototype와 instance1.__proto__는 사실상 동일한 객체를 참조합니다. 이는 자바스크립트의 프로토타입 체인 구조 때문

// 프로토타입 체인 구조
instance1 --.__proto__--> A.prototype

ㅤㅤ

동물병원 진료기록 로직#

🔲 옵셔널 체이닝 (Optional Chaining)#

옵셔널 체이닝 ?.은 객체 속성 접근이나 메서드 호출을 할 때, 해당 경로가 존재하지 않으면 undefined를 반환합니다. 이를 통해 코드가 중첩된 객체 경로에서 발생할 수 있는 에러를 방지할 수 있습니다.

this.animalName = params?.animalName ? params.animalName : "no-data";
this.animalName = params?.animalName ?? "no-data";

두 번 쓰이는 건 null 또는 undefined 인 경우 처리하기 위해서이다. ??로 줄일 수도 있다.

this.getCurrentTime = function () {
  const date = new Date();
  return `${date.getFullYear()}.${
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1
  }.${
    date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
  } ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
};

//이해예시
let currentTime = getCurrentTime();
console.log(currentTime); // 예: "2023.05.28 14:23:45"

getMonth 는 0부터 시작하므로 입력한 월에 +1을 한다. 10보다 작으면 0을 붙여서 02월 이런식으로 보일 수 있도록 한다.

date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;

ㅤ

🔲 call 함수#

call() 함수는 함수를 호출하면서 특정 객체를 함수 내에서 this로 사용할 수 있도록 하는 메서드입니다. call() 메서드는 기본적으로 함수 객체의 메서드로 사용되며, 첫 번째 매개변수로는 함수 내에서 사용할 this 객체를 전달받고, 이후의 매개변수는 호출할 함수에 전달됩니다.

function Animal(name, sound) {
    this.name = name;
    this.sound = sound;
    this.makeSound(){
	    console.log(`${this.name} makes a sound: ${this.sound}`);
}

function Dog(name, sound, breed) {
    Animal.call(this, name, sound); // Animal 생성자 호출
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // 상속 설정
Dog.prototype.constructor = Cat; // 생성자 지정

const dog = new Dog("Buddy", "Woof!", "Golden Retriever");

dog.makeSound(); // 출력: Buddy makes a sound: Woof!

ES6부터는 클래스 개념 추가로 위처럼 코드작성XXX

🔲 클래스 ⭐#

extends 키워드를 사용해 클래스를 상속하고, constructor 메서드를 사용해 객체를 초기화한다. 생성자 함수(constructor) 반드시 포함한다. super 를 사용해 부모 클래스의 생성자를 호출해 상속받은 속성을 초기화할 수 있다.

class Animal {
  constructor(name) {
    this.name = name;
    console.log(`${this.name} animal`);
  }
  makeSound() {
    console.log(`${this.name} makes a sound`);
  }
}
class Dog extends Animal {
  constructor(name, breed) {
    // console.log(`${this.name} dog1`);
    // ReferenceError: Must call super constructor in derived class before accessing 'this'
    super(name); // 부모 클래스의 생성자 호출
    console.log(`${this.name} dog2`);
    this.breed = breed;
  }
  bark() {
    console.log(`${this.name} barks`);
  }
}
const myDog = new Dog("Buddy", "Golden Retriever");
myDog.makeSound(); // 출력: Buddy makes a sound
myDog.bark(); // 출력: Buddy barks

/*출력
Buddy animal
Buddy dog2
Buddy makes a sound
Buddy barks
*/

ReferenceError: Must call super constructor in derived class before accessing ‘this’

super()를 호출하기 전에 this를 참조하거나 생성자에서 반환하는 것을 금지한다.

• extends를 사용해 상속을 하면 반드시 super 를 사용해 부모의 생성자를 호출해야 한다.
• super 전에 this를 사용하면 부모 클래스의 생성자가 호출되기 전에 자식 클래스의 인스턴스가 초기화되기 때문에 정의되지 않은 상태로 this를 참조하게 되어 에러가 발생한다.
  • 생성자 내에서 this는 생성되고 있는 인스턴스를 가리키지만, 생성자가 호출되기 전에는 해당 인스턴스가 완전히 초기화되지 않은 상태일 수 있습니다.

🔲 getter setter#

set 은 set 키워드 뒤에 클래스 생성자에서 사용하는 변수로 이름짓는다. set 키워드가 추가되면 이후 speed 값의 세팅=할당에는 무조건 set이 관여한다.

class Car {
  constructor(speed) {
    this.speed = speed;
  }
  getSpeed() {
    return this.speed;
  }
  set speed(value) {
    this.speed = value;
  }
}
const car1 = new Car(-100);
console.log(car1.getSpeed());

// RangeError: Maximum call stack size exceeded

speed에 _를 붙여 게터, 세터 변경하면 에러나지 않는다. 다른 것도 되는데 관례상 언더바로 사용한다. 클래스의 speed는 이제 _speed가 된다.

class Car {
  constructor(speed) {
    this.speed = speed;
  }
  getSpeed() {
    return this._speed;
  }
  set speed(value) {
    this._speed = value < 0 ? 0 : value;
  }
}
const car1 = new Car(-100);
console.log(car1.getSpeed());
console.dir(car1);
// 0
// Car { speed123: 0 }

P. 문제는 이럴 경우 기존 this.speed 참조가 불가능하고 코드를 수정해야 한다. 그래서 나온 것이 get 이다. 게터를 사용하면 기존 코드의 수정 없이 속성 값을 설정하고 읽기 가능하다.

class Car {
  constructor(speed) {
    this.speed = speed;
  }
  getSpeed() {
    return this.speed;
  }
  set speed(value) {
    this._speed = value < 0 ? 0 : value;
  }
  get speed() {
    return this._speed;
  }
}
const car1 = new Car(-100);
console.log(car1.getSpeed());
console.dir(car1);

P. 외부에서 해당 속성에 접근해 바꾸려는 시도를 할 때

sol ) 비공개 속성 만들기 : #speed를 클래스 아래 선언하면 private으로 선언된다. speed는 더이상 외부에서 바로 보거나 접근, 변경할 수 없고 get 을 사용해 읽기 가능하고 set 을 이용해 변경 가능하다.

class Car {
  #speed; // private, 2020 최신문법

  constructor(speed) {
    this.#speed = speed;
  }

  getSpeed() {
    return this.#speed;
  }

  setSpeed(value) {
    this.#speed = value < 0 ? 0 : value;
  }
}

const car1 = new Car(-100);
console.log(car1.getSpeed()); // 출력: 0
car1.setSpeed(150);
console.log(car1.getSpeed()); // 출력: 150
console.dir(car1); // #speed 비공개 속성은 콘솔에서 보이지 않습니다.
// SyntaxError: Private field '#speed' must be declared in an enclosing class

🔲 static#

static 키워드를 사용해 정의된 속성이나 메서드는 클래스 자체에 속하며, 인스턴스가 아닌 클래스 이름을 통해 접근할 수 있다. 이는 클래스의 인스턴스마다 동일한 값을 공유하거나 공통적으로 사용할 수 있는 기능을 정의할 때 유용하다. 정적

• 클래스 이름을 통해 직접 접근해야 합니다.

class MathUtils {
  static APP_NAME = "Math Utils";

  constructor(number) {
    this.number = number;
  }
  static add(a) {
    return ++a;
  }
}
const mathInstance = new MathUtils(10);
console.log(MathUtils.APP_NAME); // Math Utils
console.log(mathInstance.APP_NAME); // undefined
console.log(MathUtils.add(10)); // 11

ㅤ

🔲오버라이딩#

오버라이딩된 메서드를 통해 자식 클래스는 부모 클래스의 메서드를 덮어쓸 수 있으며, 자식 클래스에서 메서드를 재정의해 사용할 수 있다.

// 오버라이딩
class Shape {
  constructor(color) {
    this.color = color;
  }
  getColor() {
    return `도형은 ${this.color} 색입니다.`;
  }
}
class Rectangle extends Shape {
  constructor(color, width, height) {
    super(color);
    this.width = width;
    this.height = height;
  }
  getColor() {
    // 부모 클래스의 메서드를 오버라이딩
    return `사각형은 ${this.color} 색입니다.`;
  }
}
const shape1 = new Shape("blue");
console.log(shape1.getColor()); // 도형은 blue 색입니다.

const rectangle1 = new Rectangle("red", 5, 10);
console.log(rectangle1.getColor()); // 사각형은 red 색입니다.

? 리터럴 표기법이란 ?#

사실 모든 자료형 (기본, 참조)는 표준 내장 객체이다. 즉 new 키워드(생성자 함수)를 이용해 생성 가능한데 단순하게 리터럴 표기법을 사용해 표기할 수 있다.

let numLiteral = 42; // 리터럴 표기법
let numConstructor = new Number(42);

ㅤ