내장 객체(Built-in object) : 자바스크립트에서 미리 객체로 정의되어 있는 객체.
문서 객체 모델(DOM) : 웹 문서 자체에 대한 객체. 포함된 이미지를 비롯한 요소들도 각각 별도의 객체.
웹 브라우저 객체 : 웹 브라우저에서 사용하는 정보에 대한 객체.
사용자 정의 객체 : 사용자가 직접 만들어 정의한 객체.
let book = {
title: "Javascript",
pages: 500,
}
객체와 인스턴스
인스턴스 : 객체의 실체화. 객체라는 틀을 기본으로 실체화 시킨 것.
new 예약어 : 객체의 인스턴스를 생성시킨다.
let now = new Date();
프로퍼티와 메서드
프로퍼티 : 객체의 특징이나 속성.
메서드 : 객체의 동작, 행위.
let now = new Date();
document.write(`Current time is ${now.toLocaleString()}`)
자바스크립트 내장 객체
Array 객체
선언
// No initial value
let arr1 = new Array();
let arr2 = new Array(4);
// Initial value
let arr3 = ["one", "two", "three", "four"];
let arr4 = Array("one", "two", "three", "four");
length 프로퍼티
let numbers = ["one", "two", "three", "four"];
for (let i = 0; i < numbers.length; i++) {
document.write(`<p>${numbers[i]}</p>`);
}
메서드
메서드
설명
concat
기존 배열에 다른 배열을 합쳐서 새로운 배열을 만든다. 결과는 기존 배열에 영향을 주지 않는다.
every
배열의 모든 요소가 주어진 함수에 대해 참이면 true, 아니면 false 반환.
filter
배열 요소 중에서 주어진 필터링 함수를 통과한(true) 요소들만 골라 새로운 배열을 만든다.
forEach
배열의 모든 요소에 주어진 함수를 실행함.
indexOf
주어진 값과 일치하는 배열 요소의 인덱스를 반환한다. 첫번째로 일치하는 요소의 인덱스를 반환한다.
join
배열 요소를 문자열로 합친다. 구분자 지정을 할 수 있다.
push
배열의 끝에 새 요소를 추가하고 길이를 반환한다.
원본 배열이 변경된다.
unshift
배열의 시작에 새 요소를 추가한다.
원본 배열이 변경된다.
pop
배열의 마지막 요소를 꺼내서 결과로 반환한다.
원본 배열이 변경된다.
shift
배열의 첫번째 요소를 꺼내 결과로 반환한다.
원본 배열이 변경된다.
splice
배열에 요소를 추가하거나 삭제한다.
변경된 배열이 반환된다.
원본 배열이 변경된다.
slice
배열에 특정한 부분만 잘라 냅니다.
잘라낸 배열을 반환한다.
원본이 유지된다.
reverse
배열의 배치 순서를 역순으로 변경한다.
sort
배열 요소를 지정한 조건에 따라 정렬한다.
toString
배열에서 지정한 부분을 문자열로 반환한다. 각 요소는 쉼표로 구분한다.
splice 메서드
let study = ['html', 'css', 'javascript', 'jquery', 'react', 'nodejs'];
document.write(`배열: ${study}<br>`);
document.write(`<hr>`);
// 인수가 1개일 경우 : 지정한 인덱스 요소부터 끝까지 삭제.
let js = study.splice(2);
document.write(`반환된 배열: ${js}<br>`);
document.write(`변경된 배열: ${study}`);
document.write(`<hr>`);
// 인수가 2개일 경우 : 첫번째 인수는 인덱스 값, 두번째 인수는 삭제할 개수.
let jquery = js.splice(1, 1);
document.write(`반환된 배열: ${jquery}<br>`);
document.write(`변경된 배열: ${js}`);
document.write(`<hr>`);
// 인수가 3개 이상일 경우
// 첫번째 인수는 삭제할 시작 위치, 두번째 인수는 삭제할 개수,
// 세번째 인수는 삭제한 위치에 새로 추가할 요소.
let modernjs = js.splice(1, 0, 'typescript');
document.write(`반환된 배열: ${modernjs}<br>`);
document.write(`변경된 배열: ${js}`);
document.write(`<hr>`);
/*
배열: html,css,javascript,jquery,react,nodejs
반환된 배열: javascript,jquery,react,nodejs
변경된 배열: html,css
반환된 배열: jquery
변경된 배열: javascript,react,nodejs
반환된 배열:
변경된 배열: javascript,typescript,react,nodejs
*/
slice 메서드
let colors = ["red", "green", "blue", "white", "black"];
// 인수가 1개인 경우 : 시작 인덱스 ~ 마지막 까지 모두 꺼낸다.
document.write(colors.slice(2));
document.write("<hr>");
// 인수가 2개인 경우: 첫번째 인수는 시작 인덱스, 두번째 인수는 끝 인덱스
// 배열을 잘라 낼 때 시작 위치와 끝 위치를 지정한 건데,
// 시작 위치는 포함하고 끝 위치는 포함하지 않음.
document.write(colors.slice(2,4));
// YYYY-MM-DD
new Date("2026-02-09");
// YYYY-MM-DDTHH
new Date("2026-02-09T22:26:23");
// YYYY-MM-DDTHHZ : 'Z' 는 국제 표준시(UTC)
new Date("2026-02-09T22:26:23Z");
// MM/DD/YYYY
new Date("02/09/2026");
// 이름 형식
new Date("Mon Feb 09 2026 22:29:59 GMT+0900 (한국 표준시)")
| 구분 | 설명 |
| --- | --- |
| availHeight | 화면의 UI 영역을 제외한 영역의 높이 |
| availWidth | 화면의 UI 영역을 제외한 내용 표시 영역의 너비. |
| colorDepth | 화면에서 픽셀을 렌더링할 때 사용하는 색상 수. |
| height | UI 영역을 포함한 화면의 높이. |
| orientation | 화면의 현재 방향. |
| pixelDepth | 화면에서 픽셀을 렌더링할 때 사용하는 비트 수. |
| width | UI 영역을 포함한 화면의 너비. |
| **메서드** | **설명** |
| lockOrientation() | 화면 방향 잠그기. |
| unlockOrientation() | 화면 방향 잠금 해제하기. |
```jsx
document.write(`<p><b>screen.availWidth: </b>${screen.availWidth}</p>`);
document.write(`<p><b>screen.availHeight: </b>${screen.availHeight}</p>`);
document.write(`<p><b>screen.width: </b>${screen.width}</p>`);
document.write(`<p><b>screen.height: </b>${screen.height}</p>`);
```
