[JavaScript] 객체 - 객체 특성, 표준 내장 객체, 브라우저 객체 모델

객체

 

객체는 키와 값으로 구성된 속성들의 집합을 의미하는 자료형이다.

객체는 {}를 이용해 생성할 수 있는데, 이런 방법을 리터럴(literal) 방식으로 객체를 생성했다고 표현한다.

그리고 속성이 한 개도 없는 객체를 빈 객체라고 한다.

객체는 데이터의 종류를 가리지 않으므로 모든 자료형의 데이터를 값으로 가진다.

예를 들어, 배열, 숫자, 논리 데이터를 한 객체의 속성으로 추가할 수 있으며, 또 다른 객체나 함수가 들어갈 수도 있다.

 

 

객체 접근 방법

 

객체는 대괄호 연산자나 마침표 연산자로 접근할 수 있다.

객체["키"] = 값;
객체.키 = 값;

 

 

객체 속성 추가 또는 삭제하기

 

객체의 속성에 접근해서 새로운 값을 할당할 때, 존재하지 않는 키라면 새로운 속성이 추가된다.

그리고 delete 키워드로 속성에 접근하면 기존 속성이 삭제된다.

delete 객체.키;

 

 

객체의 특성

 

기본 자료형은 변수에 데이터를 할당할 때 데이터 그 자체가 할당된다. 따라서 다른 변수에 다시 재할당한 후 한쪽 데이터가 변경되어도 서로 영향을 미치지 않는다. 이런 현상을 깊은 복사라고 한다.

객체는 기본 자료형과는 다르게 할당된 변수가 값을 직접 가지고 있는 것이 아니라 데이터가 위치한 주소 값을 가지고 있다. 따라서 같은 주소 값을 공유하는 변수는 주소 값의 데이터가 변경되면 동시에 값이 변경된다. 이런 현상을 얕은 복사라고 한다.

 

 

표준 내장 객체

 

자바스크립트에 이미 정의된 객체를 표준 내장 객체라고 한다.

 

1. 문자열을 다루는 String 객체

*주요 속성과 메서드

구분		설명
속성	length	문자열의 길이를 반환한다.
메서드	includes()	메서드의 매개변수에 인자로 전달되는 문자열이 대상 문자열에 포함되어 있으면 true, 아니면 false를 반환한다.
	replace()	대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 한 부분을 찾아서 다른 데이터로 변경한 새로운 문자열을 반환한다.
	replaceAll()	대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 모든 부분을 찾아서 다른 데이터로 변경한 새로운 문자열을 반환한다.
	split()	메서드의 매개변수에 인자로 전달되는 구분자를 이용해 대상 문자열을 여러 개의 문자열로 분리하고, 분리한 문자열을 새로운 배열로 반환한다.
	toUpperCase()	대상 문자열을 대문자로 변경해 반환한다.
	trim()	대상 문자열의 앞뒤 공백을 제거한 값을 반환한다.
	indexOf()	대상 문자열과 일치하는 첫 번째 문자의 인덱스를 반환한다.

 

2. 배열을 다루는 Array 객체

*주요 속성과 메서드

구분		설명
속성	length	배열의 요소 개수를 반환한다.
파괴적 메서드	push()	배열의 맨 뒤에 데이터를 추가한다.
	pop()	배열의 맨 뒤에서 데이터를 추출한다.
	unshift()	배열의 맨 앞에 데이터를 추가한다.
	shift()	배열의 맨 앞에서 데이터를 추출한다.
	sort()	배열의 요소를 정렬한다.
	reverse()	배열의 요소를 역순으로 정렬한다.
비파괴적 메서드	forEach()	배열의 요소를 하나씩 순회하면서 요소마다 콜백(callback) 함수를 호출한다.
	filter()	배열의 요소를 하나씩 순회하면서 요소마다 콜백 함수를 호출해  true를 반환하는 요소만 추출한다. 추출한 요소로 새로운 배열을 만들고 만들어진 배열을 반환한다.
	find()	배열의 요소를 탐색하면서 주어진 판별 함수를 만족하는 첫 번째 값을 반환한다.
	findIndex()	값 대신 인덱스 숫자를 반환한다는 것만 빼면 find() 메서드와 같다.
	includes()	배열에 특정 값이 포함되어 있는지 확인해서 포함됐으면 true, 아니면 false를 반환한다.
	join()	배열의 모든 요소를 주어진 구분자로 합친다.

 

 

3. 날짜와 시간을 다루는 Date 객체

 

*인스턴스 만들기

const today = new Date(); // Wed Feb 08 2023 22:41:05 GMT+0900 (한국 표준시)
const date1 = new Date(2023, 01, 08); // Wed Feb 08 2023 00:00:00 GMT+0900 (한국 표준시)
const date2 = new Date(2023-02-08); // Wed Feb 08 2023 22:41:05 GMT+0900 (한국 표준시)

 

*날짜 간격 계산

getTime() 메서드는 1970년 1월 1일 12:00 이후의 시간을 밀리초 단위로 반환한다.

const date1 = new Date('2022-12-23');
const date2 = new Date('2022-12-25');
const dateDiff = date2.getTime() - date1.getTime();
const interval = dateDiff / (24 * 60 * 60 * 1000);
console.log(`두 날짜의 차이는 ${interval}일입니다.`); // 두 날짜의 차이는 2일입니다.

 

*Date 객체의 메서드

종류	설명
getFullYear() setFullYear()	연도를 4자리 숫자로 표시한다.
getMonth() setMonth()	월을 0부터 11까지의 숫자로 표시한다.(1월:0, 12월:11)
getDate() setDate()	일을 1부터 31까지의 숫자로 표시한다.
getDay()	요일을 0부터 6까지의 숫자로 표시한다.(일:0, 토:6)
getTime() setTime()	1970년 1월 1일 12:00 이후의 시간을 밀리초(1/1000초) 단위로 표시한다.
getHours() setHours()	시를 0부터 23까지의 숫자로 표시한다.
getMinutes() setMinutes()	분을 0부터 59까지의 숫자로 표시한다.
getSeconds() setSeconds()	초를 0부터 59까지의 숫자로 표시한다.
getMilliseconds() setMilliseconds()	밀리초를 0부터 999까지의 숫자로 표시한다.

 

 

4. 수학 연산을 다루는 Math 객체

 

* 난수 구하기

 random() 메서드는 0이상 1 미만의 난수를 반환한다.

function getMaxRandom(max) {
	return Math.floor(Math.random() * max) + 1;
}
const maxRandom = getMaxRandom(20);
console.log(maxRandom); // 0 이상 20 이하의 무작위 정수

 

*Math 객체의 주요 메서드

종류	설명
Math.floor()	내림
Math.ceil()	올림
Math.round()	반올림
Math.random()	0 이상 1 미만 난수

 

 

브라우저 객체 모델

 

1. 브라우저 객체 모델

브라우저 객체 모델(BOM, Browser Object Model)은 웹 브라우저에서 제공하는 객체로, 브라우저를 제어할 수 있는 여러 기능이 포함되어 있다.

종류	설명
window	웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체
document	웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체
location	웹 브라우저에 현재 표시된 페이지에 대한 URL 정보가 포함된 객체
history	웹 브라우저에 저장된 방문 기록이 포함된 객체
navigator	웹 브라우저 정보가 포함된 객체
screen	웹 브라우저의 화면 정보가 포함된 객체

 

2. window 객체의 속성과 메서드

구분		설명
속성	innerWidth	웹 브라우저 화면의 너비를 px(픽셀) 단위로 나타낸다.
	innerHeight	웹 브라우저 화면의 높이를 px 단위로 나타낸다.
	outerWidth	웹 브라우저 창의 너비를 px 단위로 나타낸다.
	outerHeight	웹 브라우저 창의 높이를 px 단위로 나타낸다.
	screenTop / screenY	웹 브라우저 위쪽 면과 모니터의 간격을 px 단위로 나타낸다.
	screenLeft / screenX	웹 브라우저 왼쪽 면과 모니터의 간격을 px 단위로 나타낸다.
	pageXOffset / scrollX	웹 브라우저 수평 스크롤 위치를 px 단위로 나타낸다.
	pageYOffset / scrollY	웹 브라우저 수직 스크롤 위치를 px 단위로 나타낸다.
메서드	alert()	알림창을 표시한다.
	confirm()	확인창을 표시한다.
	prompt()	입력창을 표시한다.
	open()	새로운 웹 브라우저 창을 연다.
	close()	웹 브라우저 창을 닫는다.
	setTimeout()	일정 시간(ms) 뒤에 콜백 함수를 한 번만 실행한다.
	setInterval()	일정 시간(ms)마다 콜백 함수를 반복적으로 실행한다.
	clearInterval	setInterval() 메서드로 반복 실행되는 함수를 중지한다.
	scrollTo()	웹 브라우저의 스크롤을 특정 위치만큼 이동한다.
	scrollBy()	웹 브라우저의 스크롤을 현재 위치에서 상대적 위치로 이동한다.

 

3. 웹 브라우저에서 새 창 제어하기

window 객체의 open() 메서드는 웹 브라우저에서 새로운 창을 여는 데 사용한다.  open() 메서드는 매개변수로 창의 경로, 이름, 속성을 전달받는다.

window.open(경로, 이름, 속성);

 

4. 웹 브라우저의 스크롤 이동하기

window 객체의 scrollTo() 메서드는 웹 브라우저의 스크롤 위치를 특정 좌표로 이동하게 한다.

그리고 scrollBy() 메서드는 웹 브라우저의 스크롤을 현재 위치에서 상대적인 위치로 이동하게 한다.

window.scrollTo(x좌표, y좌표);
window.scrollBy(x좌표, y좌표);