[Javascript] 객체란? 사용자 정의 객체 만들기

객체란? 사용자 정의 객체 만들기

간단하게 말해서 복합 자료형이다..

객체 안에는 숫자, 문자열 심지어 객체까지 포함할 수 있어 복합 자료형이라고 부른다.

 

간단한 예제로 아래와 같이 문자열, 숫자를 포함한 book이란 객체를 만들었다.

let book ={
      title: '제목',
      author: '홍길동',
      pages: 350,
      price: 1800,
}

객체는 key : value 형태로 구성된다.

title은 key이고 '제목'은 value에 해당된다.

 

 

자바 스크립스에서 객체의 종류

• 내장객체: 자바스크립트 안에 미리 객체로 정의되어 있는 객체 ex) Date
• 문서 객체 모델(DOM): 객체를 사용해 웹 문서를 관리하는 방식 ex) Document, Image  객체 등이 있다.
• 브라우저 객체 모델(BOM): 웹 브라우저의 주소 표시줄이나 창 크기 등 웹 드라우저 정보를 객체로 다루는 것
• 사용자 정의 객체: 사용자가 필요할 때마다 자신의 객체를 정의해서 사용하는 객체 ex) 위의 book 객체

 

객체의 속성과 메서드

• 속성(property): 객체에서 값을 담고 있는 정보, 속성 값을 가져올 때는 객체 이름 뒤 마침표를 찍고 속성 이름을 적는다. ex) book.title : book객체의 title을 가져오는 방법
• 메서드(Method): 객체가 어떻게 동작할지를 선언해 놓은 함수이다. ex) alert() 함수는 window 객체의 메서드이다.

 

객체의 대해서 간단하게 설명하였다. 이제 사용자 정의 객체를 만들어 보자.

 

자바스크립트에서 대표적인 객체만드는 방법 2가지를 알아보자

 

1. 리터럴 표기법

  : 리터럴 표기법은 변수를 선언하면서 동시에 값을 지정해 주는 표기 방식이다.

  ex) let a = 10; 이 방법이 리터럴 표기법이다. 위의 book 객체도 리터럴 표기법으로 만든 객체이다.

 

2. 생성자 함수를 사용해 객체를 만드는 방법

 : 객체를 생성하는 생성자 함수를 통해 값을 다르게 넣어 여러 객체를 만들 때 사용함

   위의 리터럴 표기법은 정해진 값을 가진 객체를 한 번만 만들어 내지만 생성자 함수는 여러 객체를 만들 수 있다.

 

위의 book 객체를 생성자 함수로 만들어 보겠다.

Book을 만드는 생성자 함수

 - this 가 가리키는 것은 선언하고 있는 객체 자체이다.

functon Book(title, pages, price, author){
	this.title = title;
    this.pages = pages;
    this.price = price;
    this.author = author;
}

이 생성자 함수를 사용해서 객체를 생성하려면 아래와 같이 작성하면 된다. 

new예약어는 새로운 객체를 만들 때 사용한다.

jsBook = new Book('자바스크립트', 400, 18000, '홍길동')

리터럴 함수와 달리 값을 다르게 넣어주면 새로운 객체를 손쉽게 만들 수 있다.

 

 

자바스크립트 객체에 대해 다시 공부하면서 정리한 내용이다. ㅎㅎ