[javascript] 객체(Object)

jinwonShen·2022년 8월 16일

javascript

목록 보기

8/52

👍 객체란?

객체를 흔히 "복합자료형"이라고도 부른다. 그 이유는 숫자, 문자열 등 여러가지 자료형이 포함되기 때문이다.
현실 세계에서 인지하는 물체에 대한 모델을 만들기 위해 변수와 함수를 그룹화 한 것을 말한다.
객체와 함수는 객체 내에서 새로운 이름으로 불린다.

자바스크립트는 객체기반 언어이다.

변수는 데이터 값을 하나 밖에 저장하지 못하지만, 객체는 데이터 값을 필요한 대로 만들어 사용할 수 있다.

객체의 데이터는 '이름 : 값'의 쌍으로 이루어져 있으며 이것을 속성(property)이라고 한다.

👉 객체 문법

객체 내에서 변수는 속성(property)이라고 불린다.

const hotel = {                            // 속성 : 이 영역이 변수이다.
	name : 'Lahan',                       
    rooms : 40,                            
    booked : 25,                           
    gym : true,                            
    
    checkAvail : function(){               // 메서드 : 이 영역이 함수이다.
    	return this.rooms - this.booked;   
        }                                  
    }

객체 내에서 함수는 메서드(method)라고 불린다.

const hotel = {
	name : 'Lahan',
    rooms : 40,
    booked : 25,
    gym : true,
    roomType : ['트윈','더블','스위트'],
    
    checkAvail : function(){
    	return this.rooms - this.booked;
        }
    }

👉 객체의 분류

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

👉 사용자 정의 객체 - 객체 리터럴

<script>
	const hotel = {
    	name : 'Lahan',
        rooms : 40,
        booked : 25,
        gym : true,
        roomType : ['트윈','더블','스위트'],
        
        checkAvail : function(){
        	return this.rooms - this.booked;
            }
        }
        
	console.log(hotel,name);
    console.log(hotel,rooms);
    console.log(hotel,booked);
    console.log(hotel,gym);
    console.log(hotel,roomType[2]);
    console.log(hotel,checkAvail());
</script>

🤞 결과

👉 사용자 정의 객체 - 생성자 함수

new와 객체 생성자는 빈 객체를 생성하고 객체에 속성과 메서드를 추가 할 수 있다.
new키워드와 object() 생성자 함수를 이용하여 새로운 객체를 생성한다.
이 함수는 자바스크립트에서 기본적으로 제공되며, 객체를 생성하기 위한 용도로 사용된다.
마침표 표기법을 이용하여 생성된 빈 객체에 속성과 메서드를 추가한다.
속성과 메서드를 추가하기 위한 구문은 반드시 세미콜론으로 끝을 맺어야 한다.

	const hotel = new object();
    
    hotel.neme = 'Lahan';                 // 속성 : 이 영역이 변수이다.
    hotel.rooms = 40;
    hotel.booked = 25;
    
    hotel.checkAvail : function(){        // 메서드 : 이 영역이 함수이다.
    	return this.rooms - this.booked;
        };

속성 값을 변경할 때 리터럴 방식과 생성자 함수 모두 사용 가능하다.
hotel.name = 'park'; hotel [name] = 'Lahen'; delete hotel.name;
속성을 제거할 때는 delete 키워드를 사용한다.
속성값만 삭제할 때 hotel.name = '';

👉 생성자 표기법을 이용하여 여러 객체 생성하기

간혹 비슷한 모델을 표현하기 위해 여러 개의 객체를 생성해야 할 경우가 있다.
객체 생성을 위한 템플릿처럼 사용한다.

세 개의 매개 변수는 객체의 속성에 대입 할 값을 전달 받기 위한 것이다.
메서드는 이 함수를 이용해 생성된 객체마다 동일하게 적용된다.

function Hotel(name, rooms, booked){
	this.name = name;                       // 속성 : 이 영역이 변수다.
    this.rooms = rooms;
    this.booked = booked;
    
    this.checkAvail : function(){           // 메서드 : 이 영역이 함수다.
	   	return this.rooms - this.booked;
       };
   }

일반적인 함수 이름은 소문자로 시작하는 반면에 생성자 함수 이름은 new 키워드와 함께
첫 글자는 대문자로 시작해야 한다.
규칙을 통해 객체를 생성하기 위한 것임을 인지하도록 하는 것이다.

	    (객체)              (생성자함수)
const lahanHotel = new Hotel('Lagan', 40, 25);
const parkHotel = new Hotel('Park', 120, 77);

👉 객체를 생성하는 여러 방법들

객체를 생성한 후 속성과 메서드를 추가하는 방법

// 축약형 표기법

const hotel = {}
hotel.name = 'Lahan';
hotel.rooms = 40;
hotel.booked = 25;
hotel.checkAvail : function(){
	return this.rooms - this.booked;
};

// 객체 생성자 표기법

const hotel = new Object();
hotel.name = 'Lahan';
hotel.rooms = 40;
hotel.booked = 25;
hotel.checkAvail : function(){
	return this.rooms - this.booked;
};

속성과 메서드를 사전에 정의하여 객체를 생성하는 방법

// 축약형 표기법

const hotel = {
	neme = 'Lahan',
    rooms = 4,
    booked = 25,
    checkAvail : function(){
    	return this.rooms - this.booked;
        }
    };

// 객체 생성자 표기법

function Hotel(name, rooms, booked) {

	this.name = name;
    this.rooms = rooms;
    this.booked = booked;
    
    this.checkAvail : function(){
    	return this.rooms - this.booked;
        }
    };
const lahanHotel = new HOtel('Lahan', 40, 25);
const parkHotel = new Hotel('Park', 120, 77);

👉 내장 객체

브라우저는 브라우저 창과 이 창이 현재 보여주고 있는 페이지 등을 표현하기 위한 내장 객체를 가지고 있다. 이런 내장 객체들은 인터렉티브한 웹 페이지를 개발하기 위한 유용한 도구로 사용될 수 있다.

브라우저 객체 모델

현재 브라우저 창이나 탭을 표현하기 위한 객체들을 가지고 있다. 이런 객체들은 주로 브라우저의 히스토리 목록이나 장치의 화면 등을 모델화한 것들이다.

문서 객체 모델

현재 페이지를 표현하기 위해 사용되는 객체들이다. 이들은 페이지 내의 각 요소들을 위한 개별적인 객체들을 생성한다.

전역 자바스크립트 모델

자바스크립트 언어가 모델로서 생성해야 할 필요가 있는 것들을 표현한다. 예를 들어, 날짜와 시간을 처리하는 객체를 제공한다.

## 👉 브라우저 객체 모델 : window 객체 - 최 상위 객체는 window 객체로 현재 브라우저 창이나 탭을 표현하는 객체이다.

window : 현재 브라우저 창이나 탭

Document : 현재 로드된 웹 페이지
History : 브라우저 히스토리에 기록된 웹 페이지들
Location : 현재 페이지의 URL
Navigator : 브라우저와 관련된 정보
Screen : 장치의 디스플레이 정보

👉 window 객체 속성 종류

window -	설명
window.innerHeight	창의 높이(브라우저 창 테두리 및 사용자 인터페이스 부분은 제외)(단위는 픽셀)
window.innerWidth	창의 너비(브라우저 창 테두리 및 사용자 인터페이스 부분은 제외)(단위는 픽셀)
window.pageXoffset	문서의 가로 스크롤 크기(단위는 픽셀)
window.pageYoffset	문서의 세로 스크롤 크기(단위는 픽셀)
window.screenX	화면의 좌측 상단으로부터 현재 마우스 포인터의 X 좌표(단위는 픽셀)
window.screenY	화면의 우측 상단으로부터 현재 마우스 포인터의 Y 좌표(단위는 픽셀)
window.location	현재 URL(혹은 파일 경로)
window.document	현재 창에 로드 된 페이지를 표현
window.history	현재 창이나 탭을 통해 로드되었던 페이지들의 상세 정보를 제공
window.history.length	브라우저 창 또는 탭의 history 객체에 보관된 페이지의 개수
window.screen	screen 객체에 대한 참조
window.screen.width	screen 객체에 접근하여 width 속성 값을 조회 (단위는 픽셀)
window.screen.height	screen 객체에 접근하여 height 속성 값을 조회 (단위는 픽셀)

👉 window 객체 메서드 종류

window -	설명
window.alert()	메세지를 포함하는 대화상자 출력 (대화상자를 닫으려면 확인버튼을 반드시 클릭)
window.open()	매개변수로 지정된 URL을 표시하는 새로운 브라우저 창을 생성
window.print()	브라우저에게 사용자가 현재 페이지를 인쇄하려 한다는 것을 알린다.

👉 문서 객체 모델 : document 객체

문서 객체 모델(DOM:Document Object Model)은 현재 웹페이지의 모델을 생성한다. 최상위 객체는 document 객체이며, 전체 페이지를 표현한다.
자식 객체로는 페이지의 다른 요소들을 표현하는 객체들이 사용된다.

document

<html>

<head>
<title>
<body>
<div>
<p>

👉 문서 객체 모델 속성과 메서드

속성	설명
document.title	현재 문서의 제목
document.lastModified	현재 문서의 가장 마지막으로 수정된 날짜
document.URL	현재 문서의 URL을 문자열로 리턴한다.
document.domain	현재 문서의 도메인을 리턴한다.

메서드	설명
document.write()	문서에 텍스트를 출력한다.
document.getElementById()	id특성 값이 일치하는 요소가 존재한다면 해당 요소를 리턴한다.
document.querySelectorAll	매개변수로 전달된 css선택자와 일치하는 요소의 목록을 리턴한다.
document.creatElement()	새로운 요소를 생성한다.
document.creatTextNode()	새로운 텍스트노드를 생성한다.

👉 전역자바스크립트 객체

전역 객체는 어떤 특정 모델을 표현하지는 않는다. 객체들은 자바스크립트 언어의 각기 다른 부분을 담당하는 관련 객체들의 집합이다. 전역 객체의 이름은 String처럼 주로 대문자로 시작한다.

String : 문자열 값을 다룬다.
Number : 숫자열 값을 다룬다.
Boolean : 불리언 값을 다룬다.
Date : 날짜를 표현하며 조작한다.
Math : 수학값을 다룬다.
RegEx : 텍스트를 구성하는 문자열 내의 패턴처리를 담당.

- 전역객체 : String

문자열 값을 다룰 때는 주로 String 객체 사용

메서드	설명
toUpperCase()	대문자로 변환
toLowerCase()	소문자로 변환
charAt()	해당 문자열의 인덱스 번호를 리턴
indexOf()	해당 문자열이 시작하는 인덱스 번호를 리턴
lastIndexOf()	해당 문자열의 인덱스 번호 범위 리턴(첫번째는 범위에 속하지만 마지막은 범위에서 제외)
split()	문자열의 양 끝에 있는 공백 문자를 제거한 후 리턴
trim()	문자열의 양 끝에 있는 공백 문자를 제거한 후 리턴
replace()	찾아 바꾸기 (한 번만 실행)

- 전역객체 : Number

숫자 값을 다룰 떄는 Number 객체가 제공하는 메서드와 속성을 사용할 수 있다.

메서드	설명
inNaN()	현재 값이 숫자가 아닌지 여부를 판단
toFixed()	특정 소수점 자리를 반올림(결과는 문자로 리턴)
toPrecision()	지정된 자릿수까지만 반올림(결과는 문자로 리턴)
toExponential()	숫자를 지수 표기법으로 변환한 문자열을 리턴

- 전역객체 : Math

Math 객체는 수학 상수 및 함수를 위한 속성과 메서드를 제공한다.

속성	설명
Math.PI	PI 값을 리턴

메서드	설명
Math.round()	숫자를 정수로 올림/내림한다.
Math.sprit(n)	양의 제곱근을 리턴
Math.ceil()	지정된 숫자를 자산보다 큰, 가장 가까운 정수로 올림
Math.floor()	지정된 숫자를 자신보다 작은, 가장 가까운 정수로 내림
Math.random()	0과 1사이의 임의의 숫자를 생성, 0은 포함되지만 1은 포함되지 않음

- 전역객체 : Date 객체 (날짜 및 시간)

아래 메서드를 이용하여 날짜와 시간을 지정하고 조회할 수 있다.

메서드		설명
getDate()	setDate()	해당 월의 날짜(1일~31일 사이)를 리턴/지정
getDay()		날짜의 요일을 리턴(0~6)사이의 값을 리턴
getFullYear()	setFullYear()	연도를 리턴/지정(4자리 숫자)
getHours()	setHours()	시각을 리턴/지정(0~23)
getMiliseconds()	setMiliseconds()	밀리초를 리턴/지정(0~999)
getMinutes()	setMinutes()	분(0~59) 리턴/지정
getMonth()	setMonth()	월을 리턴/지정(0~11)
getSeconds()	setSeconds()	초를 리턴/지정(0~59)
getTime()	setTime()	UTC 표준시 기준 1970/1/1 0:0:0를 기점으로 현재 밀리초를 리턴/지정

jinwonShen

하면 된다. | 좋은 FE 개발자 되기

이전 포스트

[javascript] 표현식(Expression)과 연산자(Operator)

다음 포스트