본문 바로가기
JavaScript

JS 4일차

by Zㅣ존수빈zz 2022. 12. 19.

1. Object(객체)

- 데이터와 함수의 집합

- 객체 내부에서 선언되는 값을 속성이라고 하며 속성의 값이 함수인 경우는 메서드(method)라 부른다

const cat = {
    // 속성(property)
    name: "키티",
    home: null,
    
    // 메서드(method);
    sound: function() {
        return "야옹";
    }
}

- 객체에 접근하기

  cat.name - name 속성에 접근

  cat['name'] - name속성에 접근

  cat.color - 존재하지 않는 속성에 접근 - undefined 출력

  cat.sound() - sound메서드에 접근

 

- 객체에 새로운 속성 추가

  추가할 속성이름과 값을 적어준다.

  ex) cat,age = 2;

 

- 객체의 속성 업데이트

  존재하고 있는 객체의 속성과 업데이트 할 값을 적어준다

  cat.home = 'house';

 

- 객체의 속성 삭제

  delete와 함께 삭제할 속성이름을 적어준다

  delete cat.home;


2. Class

- 객체를 생성하기 위한 템플릿

- 코드의 재사용성을 높인다

class Cat {     // 클래스의 첫글자는 대문자로 표시
    // 생성자(함수)
    // 인스턴스의 속성을 설정한다
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // 클래스의 속성
    home = null;

    // 클래스의 메서드
    sound() {
        return '애옹';
    }
}

- Cat의 인스턴스 생성: Cat 클래스의  속성과 메서드를 상속받음

const cat = new Cat('고양이', 2);

console.log(cat instanceof Cat);      // instanceof: 해당 객체가 Cat클래스의 인스턴스인지 true / false를 리턴한다

 

- 인스턴스 사용

  console.log(cat.home) - Cat 클래스의 home 속성을 상속받음.

  console.log(cat.sound()) - Cat 클래스의 sound메서드를 상속받음

 

- 정적 속성과 정적 메서드

  클래스와 관련된 유틸리티를 제공한다

  class의 속성이름 앞에 static을 붙여준다.

  정적 속성은 인스턴스를 생성하지 않고도 class 자체로 호출할 수 있다.

 Cat {
    // 정적속성
    static personality = '폭력적';

    // 정적 메서드
    static isAudlt(age) {
        if(age < 1) {
            return '아기고양이'
        } else {
            return '어른고양이'
        }
    }
}

'JavaScript' 카테고리의 다른 글

JS 6일차  (0) 2022.12.27
JS 5일차  (0) 2022.12.23
JS 3일차  (0) 2022.12.19
JS 2일차  (1) 2022.12.14
JS 1일차  (0) 2022.12.11

댓글