후롱트 4주차 세션 회고

Object, Class가 나온 이유??(쭝요)

우리는 왜 개발을 하는 이유는 무엇일까요?

• 현실의 데이터를 빠르고, 자동화된 형태로 처리하기 위해서
• 개발자의 3가지 덕목은 게으름, 조급함, 오만
• 결론은 귀찮아서

객체란?

• Key와 Value로 이뤄진 데이터
• 프로퍼티: 객체 내부에 있는 값, 객체는 여러 개의 프로퍼티를 가질 수 있다.
• 원시 값을 제외한 JS의 모든 값은 객체
• 객체의 프로퍼티로 변수, 객체, 함수 모두 등록 가능

let angel = {
    name: "재영",
    age: 21 
}

위와 같이 angel이라는 객체는 “name”, “age” 프로퍼티를 가지고 있다. 이에 접근하려면

console.log(angel.name); 
console.log(angel["age"]);

이런 식으로 마침표나 대괄호를 이용해 접근이 가능하고, 변경을 하기 위해서는

angel.age = 25;
console.log(angel.age);

위와 같이 변경할 수 있다.

객체 내에 함수나 배열도 프로퍼티로 등록이 가능하다.

let angel = {
  name: "재영",
  age: 21,
  name2: ["재", "영"],
  sayHello(){
    alert("hello, hello");
  }
};

console.log(angel.name2[0]);
angel.sayHello();

객체생성방식

1. 객체리터럴

const person = {
  name: "이름",
};

1. Object 생성자 함수

let a = new Object();
a.name = "zzalng";

console.log(a); // {name: "zzalng"}

1. 생성자 함수
   • 객체를 생성하는 함수
   • 이렇게 만들어진 객체를 인스턴스라고 함
2. Class

class who {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const Jay = new who("Jay", 21);

console.log(Jay); // {name: 'Jay', age: 21}

This란?

• 현재 실행중인 함수 또는 메서드가 속해있는 객체를 가리키는 키워드
• this의 바인딩 방식은 함수 호출 방식에 따라 동적으로 결정
• 함수 내에 this는 new 함수명()으로 호출될 경우 생성할 인스턴스

프로토타입

• 같은 기능을 공유하는 장소
• 프로토타입에 등록하면 모든 인스턴스가 메모리를 공유
• constructor 프로퍼티는 생성자 함수를 가리킴
• 생성자 함수, 프로토타입보다 편리하게 사용할 수 있는 Class 문법이 ES6에서 생김

Class

class 학생 {
  constructor(inputName, inputAge) {
    this.이름 = inputName;
    this.나이 = inputAge;
  }
  자기소개() {
    console.log(`내 이름은 ${this.name}! ${this.age}살이야!`);
  }
}

• constructor는 생성자 역할
• this는 빈 객체
• 빈 객체가 가질 프로퍼티를 this.프로퍼티를 이용해 추가
• class 안에 함수(자기소개)는 메서드라고 부르며 학생 class를 통해 만들어진 인스턴스는 모두 메서드 사용 가능
• 위 코드는 기존 프로퍼티 등록방식

let 최재영 = 학생("최재영", 21); // 오류
let 최재영 = new 학생("최재영", 21); // 정상 작동

• 위와 같이 new 없이 class를 사용하면 오류 발생

const 학생들 = [];
for (let i = 0; i < 100; i++) {
  학생들.push(new 학생(`${i + 1}번 학생`, 17));
}

• 학생 class를 이용해 100명의 학생을 만드는 코드를 간략하게 작성 가능

인스턴스 메서드 사용

const 최재영 = new 학생("최재영", 21);
const 재영이 = new 학생("재영이", 3);

최재영.자기소개();
재영이.자기소개();

• “최재영”과 “재영이”는 class 학생을 통해 생성된 인스턴스기 때문에 내부에 존재하는 메서드 사용 가능

접근자 프로퍼티 등록방식

class 학생 {
  constructor(inputName, inputAge) {
    this.이름 = inputName;
    this.나이 = inputAge;
  }
  get 자기소개() {
    return `내 이름은 ${this.이름}! ${this.나이}살이야!`;
  }
  set 자기소개(a) {
    console.log("건들지마");
  }
}

const 토심이 = new 학생("토심이", 2);

console.log(토심이.자기소개);
토심이.자기소개 = "난 토심이야";

• 프로퍼티처럼 접근하지만, 접근 시도 시, 함수처럼 작동
• Set은 인자로 설정할 값이 필요

상속

class 학생 {
  constructor(n, a, m) {
    this.이름 = n;
    this.나이 = a;
    this.학과 = m;
  }
}

class 고등학생 extends 학생 {
  constructor(n, a, m) {
    super(n, a, m);
  }
}

class 대학생 extends 학생 {
  constructor(n, a, m, alchol) {
    super(n, a, m);
    this.alchol = alchol;
  }
}

• extends를 이용해 기존 class를 상속받고
• super()를 이용해 기존 class의 constructor를 실행시키고 추가할

class는 중요하고 편리하고 제대로 알아둬야 할 부분이라 더 공부해서 따로 글 더 올릴 생각입니다!

잡기술

백틱(`)

get 자기소개() {
    return `내 이름은 ${this.이름}! ${this.나이}살이야!`;
  }

• 문자열을 더 편리하게 사용할 수 있는 기능

 

느낀점!

과제를 하면서 class가 익숙하지 않고 구현하는거 자체가 어렵다보니 결과 예시대로 나오도록 코드는 구현하였지만, class를 하나도 사용하지 않고 구현해버렸다.... 급하게 끼워넣긴 했지만 chatGPT에 도움을 이용해서 너무 단순하게 끼워넣기만 하였고, 함수로만 구현하다보니 더 힘들었던 것 같다. 멘토님의 피드백대로 했다면 코드도 더 깔끔해지고 구현하는데 시간도 덜 걸렸을거라는 생각이 들었다. class 자체를 잘 이해하고 넘어가야 나중에도 코드를 구현하는데 편하기 때문에 따로 더 공부해서 정리하는 글을 올려야겠다!