상세 컨텐츠

본문 제목

객체

♥ 코딩(Coding)/자바스크립트(JavaScript)

by 디자이너 윈썸 2022. 6. 22. 15:24

본문

변수는 데이터 값을 하나 밖에 저장하지 못하지만,

객페는 데이터 값을 필요한 대로 만들어 사용할 수 있다

객체의 데이터는 '이름: 값'의 쌍으로 이루어 잇으며 이것을 속성이라고 함

 

변수에 {이름: 값, 이름: 값, ...}의 형태로 저장이 되면 변수는 객체가 됨

let 변수 = {

      name: '홍길동',    // 프로퍼티

      age: 20,   // 프로퍼티

      printOut: function( )   {   // 메서드

     },
     ....

};

객체의 속성은 객체의 속성 값을 저장하는 프로퍼티와 객체의 함수 메서드로 나누어짐

 

객체도 함수처럼 사용자가 직접 정의하는 '사용자 정의 객체'와 자바스크립트에서 제공해 주는 '내장 객체'로 나눈어짐

객체의 분류 종류 설명
사용자 정의 객체 ▶ 객체 리터널
▶ 객체 생성자 함수
▶ 클래스
사용자가 직접 정의해서 사용하는 객체
내장 객체 ▶ Number
▶ String
▶ Array
▶ Math
▶ Date
▶ RegExp
자바스크립트에서 제공해 주는 객체

 

▶ 사용자 정의 객체

객체는 '객체 리터널'과 '객체 생성자 함수'로 만들 수 있음

** 객체 리터널

let 변수 = {
   
    프로퍼티: 값,

    프로퍼트: 값,

    메서드: function( ) {

   },

    .... 
};

console.log(변수.프로퍼티);
console.log(변수.메서드( ));

 

** '자신의 객체'를 의미할 때는 this 키워드를 사용

 

** 객체 생성자 함수

function 함수(매개 변수1, 매개 변수2) {

     this.프로퍼피 = 매개변수1;
     
     this.프로퍼피 = 매개변수2;

     this.메서드 = function( ) {

     };

};

let 변수 = new 함수( 매개변수1 값, 매개변수2 값);

**  '생성자 함수'는 일반 함수와 차이를 두기 위해 함수명의 첫 문자를 대문자로 표현

 함수 안에 this는 함수를 통해 생성되는 객체를 의미

 

** prototype

'생성자 함수'로 생성된 객체들은 '생성자 함수'에서 정의한 속성을 그대로 상속

객체의 메소드의 경우 다른 속성처럼 값의 변화가 없기 때문에 불필요하게 상속 시켜 메모리를 낭비 할 필요가 없음

prototype를 이용하면 객체의 메서드를 '생성자 함수'내의 정의하지 않고도 생성된 객체에서 호출하여 사용할 수 있음

 

▶ class

class 클래스명 {

   constructor( 매개변수1, 매개변수2, ...)  {


       this.이름 = 매개변수1;
      
       this.이름 = 매개변수2;

       ...
}

   메서드명 ( ) {

  }

   get 메서드명( ) {

  }

  set 메서드명( 매개변수 ) {

  }

}


let 변수1 = new 클래스명(매개변수1 값, 매개변수2 값, ...);

let 변수2 = new 클래스명(매개변수1 값, 매개변수2 값, ...);

 

'♥ 코딩(Coding) > 자바스크립트(JavaScript)' 카테고리의 다른 글

form 객체  (0) 2022.06.27
이벤트  (0) 2022.06.24
사용자 입력 폼  (0) 2022.06.22
애니메이션  (0) 2022.06.20
히스토리(history) 객체  (0) 2022.06.13

관련글 더보기