안녕하세요. 제 이름은 person.name입니다.

이지선·2021년 6월 22일
3

JavaScript

목록 보기
3/8
post-custom-banner


''안녕하세요. 제 이름은 이지선입니다.
나이는 10살이고 좋아하는 음식은 치킨입니다...''

이처럼 여러가지 정보,데이터들을 서술하지 않고
하나로 묶어 관리할 수 있도록 만든다면 얼마나 편할까?
object를 이용해보자.

object란 무엇일까

 const person = {
        name:'jiseon',
        age:10,
    	favorit:'chicken'
}

object(객체)는 {key:value}로 이루어져있고,
변수명.key값 이런 식으로 원하는 value를 불러올 수 있다.

만약 친구 tomas의 정보도 하나의 object로 정리하고 싶다면

 const person2 = {
        name:'tomas',
        age:10,
    	favorit:'pizza'
}

이런 식으로 새로운 object를 만들 수도 있겠지만
너무나도 번거로운 과정이므로 class라는 template을 만들어서
필요한 object를 생성할 수 있다.

class란 무엇일까

class Person {
  constructor(name,age,favorit){
      this.name=name;
      this.age=age;
      this.favorit=favorit;
   }
      
      greeting(name){
      `hello! I'm ${this.name}`}
    }
  • constructor(생성자)를 사용하여 object를 만들 때 필요한 인자들을 전달함
  • this는 자신이 속한 메소드의 객체를 가리킨다.
const jiseon = new Person('jiseon',10,'chicken');
const tomas = new Person('tomas',10,'pizza');

이 class에서 new라는 키워드 사용하여 인자값만 변경해주면
jiseon과 tomas의 object를 손쉽게 만들 수 있다.

class의 상속

상속이란 말 그대로 부모클래스의 기능을 이어받는 것이다.

사용 방법 : class 자식클래스명 extends 부모클래스명{}

class jiseon extends Person{}
const newJiseon = new jiseon('jiseon',10,'chiken');

부모클래스에서 상속받아서 jiseon이라는 자식클래스를 만들겠다고 선언한다.
원하는 인자값들을 넣어서 newJiseon라는 변수에 넣어준다.

class의 다양성

설명을 위해서 newTomas라는 object를 만들어준다.

class tomas extends Person{}
const newTomas = new tomas('tomas',10,'pizza');
console.log(newTomas.greeting());

greeting함수를 실행시키면 부모 클래스를 상속받으므로
hello! I'm tomas라고 출력이 된다.

그런데!! 상속값을 바꿔서 hi! I'm tomas라고 출력하고 싶다면!

class tomas extends Person{
        greeting(name){
      return `hi! I'm ${this.name}`;
    }
}//hi! I'm tomas출력

이렇게 바꾸고 싶은 부분만 새로 부여해주면 된다.

상속이 없으면?

  • 코드의 중복이 많아져 코드가 길어진다.
  • 유지 보수에 좋지 않고 메모리 효율이 떨어진다.
  • 변경 필요시 class의 코드를 수정하는 번거로움 증가.
profile
👩🏻‍💻
post-custom-banner

2개의 댓글

comment-user-thumbnail
2021년 6월 23일

지선님 설명 정말 쉽게 잘하시네요!! 능력자!!

1개의 답글