221007_TIL

오늘 한 일

• 객체, 복합데이터
• 생성자함수
• 생성자함수를 클래스로 변경, 클래스 문법
• 클래스에서 재사용성을 높여주기 위한 static

---

// 생성자함수
function Fruit(name, emoji) {
  this.name = name;
  this.emoji = emoji;
  this.display = () => {
    console.log(`${this.name}: this. emoji`);
  };
  return this; // 생략가능 (생략하면 자동으로 JS엔진이 this를 return 되도록 만들어줌)
}

const apple = new Fruit('apple', '🍎');
const orange = new Fruit('orange', '🍊');

console.log(apple); // Fruit {name: 'apple', emoji: '🍎', display: [Funtion (anonymous)])}
console.log(orange); // Fruit {name: 'orange', emoji: '🍊', display: [Funtion (anonymous)])}
consoloe.log(apple.name); // apple
consoloe.log(apple.emoji); // 🍎
apple.display(); // apple: 🍎

// 클래스
class Fruit {
  constructor(name, emoji) {
    this.name = name;
    this.emoji = emoji;
  }
  display() {
    console.log(`${this.name}: ${this.emoji}`);
  }
}

/** 위의 display() {
		console.log(`${this.name}: ${this.emoji}`);
	} 는 이렇게도 작성 가능하다.(화살표함수)
display = () => {
	console.log(`${this.name}: ${this.emoji}`);
}**/

const apple = new Fruit('apple', '🍎');
const orange = new Fruit('orange', '🍊');

console.log(apple); // Fruit {name: 'apple', emoji: '🍎', display: [Funtion (anonymous)])}
console.log(orange); // Fruit {name: 'orange', emoji: '🍊', display: [Funtion (anonymous)])}
consoloe.log(apple.name); // apple
consoloe.log(apple.emoji); // 🍎
apple.display(); // apple: 🍎

Static

// static
// 클래스별로 공통적으로 사용가능
// 만들어진 인스턴스의 데이터에 참조할 필요가 없는 함수라면 static 으로 만들 수 있다.

class Fruit {
  constructor(name, emoji) {
    this.name = name;
    this.emoji = emoji;
  }
  // 클래스 레벨의 메서드
  static makeRandomFruit() {
    return new Fruit('banana', '🍌');
  }
}
//(static이 붙어있는 메서드) 클래스 레벨의 메서드에서는 클래스 자체가 데이터가 하나도
// 없는 템플릿이기 때문에 this를 사용해 데이터를 참조할 수 없다.

// 클래스 레벨의 메서드는 만들어진 오브젝트에서 호출하는 것이 아니라
const banana = Fruit.makeRandomFruit();
console.log(banana);

// Fruit {name: 'banana', emoji: '🍌'}
// 만들어진 인스턴스 안에는 클래스레벨의 속성과 메소드는 들어있지 않다.

클래스 레벨의 메서드는 클래스 이름으로 접근이 가능하고, 인스턴스 레벨에선 접근 할수없다.

인스턴스 레벨의 메서드와 속성은 만들어진 인스턴스를 통해서 접근이 가능하다.

static이라는 키워드를 붙이면 클래스레벨로 만들 수 있다.

static을 함수 앞에 붙이면 클래스 레벨의 메서드이고, 속성 앞에 붙이면 클래스 레벨의 속성이다.

느낀 점

• 함수에 이어 객체부터 클래스 초반까지 다시 강의를 돌려보며 복습했다. 전에 모르던 내용이 이해가 잘되니 기쁘고 성취감이 느껴졌다.