[Javascript] [16-2] 자바스크립트의 내장 객체

[16-2] 자바스크립트의 내장 객체

-js 내장 객체에는 웹 문서의 계층 구조와 상관없이 나타낼 수 있는 객체가 있음

-Array객체와 Date객체가 대표적

 

1. Array객체

-배열

 

1-1. Array객체의 인스턴스 만들기

초깃값이 없는 경우	초깃값이 있는 경우
var numbers = new Array( ); 혹은 var numbers = new Array(4);	var numbers = ["one", "two", "three", "four"];   //배열 선언 var numbers = Array("one", "two", "three", "four");   //Array 객체를 사용한 배열 선언   ☞초깃값이 있는 배열의 경우, 위와 같이 인스턴스 선언 & 요솟값 할당을 한번에 같이 할 수 있음

 

1-2. Array객체의 length 프로퍼티

-요소의 개수를 알기 위해, Array 객체에 있는 length 프로퍼티 사용

-마침표(.)를 사용해 length 프로퍼티를 작성

 

예시)

for문을 이용해 전체 배열의 요솟값 나열하기

1-3. Array객체의 메서드 종류

.concat( )메서드	-기능 : 서로 다른 배열 2개를 합쳐서 새로운 배열을 만듦 (어느 배열을 먼저 쓰는가에 따라 달라짐) 예시)
.join( )메서드	-기능 : 배열요소끼리 합쳐서 하나의 문자열을 만듦 (각 요소 사이에 구분자('/') 지정할 수도, 지정하지 않으면 쉼표(,)로 구분) 예시)
.push( )    & .unshift( ) 메서드	-배열 맨 끝에 요소를 추가 : push( )메서드 -배열 맨 앞에 요소를 추가 : unshift( )메서드 -원래 있던 배열은 바뀜 예시)
.pop( )   & .shift( ) 메서드	-배열에서 뒤에 있는 요소를 꺼낼 때 : pop( )메서드 -배열에서 앞에 있는 요소를 꺼낼 때 : shift( )메서드 예시)
.splice( ) 메서드	-위의 push( ), unshift( ) : 배열의 맨 뒤나 앞에 요소를 추가   pop( ), shift( ) 메서드 : 맨 뒤나 맨 앞에서 요소를 꺼냄   ㅡ   와는 달리 -splice( )메서드 기능 : 배열 중간 부분에서 요소를 추가하거나 삭제 -괄호( ) 안에 들어있는 인수에 따라 배열 요소를 삭제하거나, 새로운 요소를 추가함 ①인수가 1개인 경우 -인수가 지정한 인덱스의 요소부터 ~ 배열의 맨 끝 요소까지를 삭제 예시) numbers.splice(2) : 인덱스값이 2인 요소 ~ 마지막 요소까지 모두 삭제함 ②인수가 2개인 경우 -첫번째 인수 : 인덱스값 / 두번째 인수 : 삭제할 요소의 개수 예시) study.splice(2, 1) : 인덱스값이 2인 요소부터 요소를 1개 삭제함 ③인수가 3개인 경우 -세번째 인수 : 삭제한 위치에 새로 추가할 요소를 지정 예시)study.splice(2, 1, "js") : 인덱스값이 2인 요소(jquery) 1개를 삭제하고 새로운 요소 "js" 를 추가
.slice( ) 메서드	-기능 : 기존 배열을 바꾸지 않고 요소를 꺼냄 (기존 배열이 바뀌는 pop( ), shift( ) 메서드와는 다름) ①인수 1개 -그 인수를 시작 인덱스로 간주. 지정한 요소 ~ 마지막 요소까지 꺼내서 변환 예시) ②인수 2개 -첫 번째 인수 : 배열의 시작 인덱스 / 두 번째 인수 : 끝 인덱스 바로 직전 인덱스 예시) slice(2, 4) : 인덱스 2 ~ 인덱스3까지 꺼냄

 

-splice( )메서드는 기존 배열에 영향을 주고 vs slice( )메서드는 기존 배열에 영향을 주지 않으므로

☞기존 배열의 일부 요소만 삭제하려면 : splice( )메서드
☞기존 배열에서 꺼낸 요소로 새로운 배열을 만들어 사용하려면 : slice( )메서드

 

 

 

 

2. Date 객체

-날짜 · 시간 정보

 

2-1. Date객체의 인스턴스 만들기

• 현재 날짜 나타내기:  new Date( );
• 특정 날짜 나타내기: new Date("2020-02-25")
• +a 시간정보까지 나타내기: 날짜 다음에 T추가 후 그 뒤에 시간 입력 new Date("2020-02-25T18:00:00")

2-2. Date객체를 사용해 날짜 · 시간 지정하기

 

    *js가 인식할 수 있는 날짜 · 시간 형식

• YYYY-MM-DD 형식 : new Date("2023-04-08")
• YYYY-MM-DDTHH 형식 : new Date("2023-04-08T15:27:00Z")
• MM/DD/YYYY 형식 : new Date("04/08/2023")
• 이름 형식 : new Date("Mon Apr 08 2023 15:27:41 GMT+0900 (대한민국 표준시)")

2-3. Date객체의 메서드

-Date 객체를 만들었다면 → Date 객체에 정의된 메서드 사용할 차례

-3가지 종류 있음 (①날짜/시간 정보를 가져오는 메서드, ②사용자가 원하는 날짜/시간으로 설정하는 메서드, ③날짜/시간 형식을 바꿔 주는 메서드)

날짜 · 시간 정보 가져오기	getFullYear( )	-연도를 4자리 숫자로 표시
	getMonth( )	-0~11 사이의 숫자로 월(month)를 표시 -1월 0 ~ 12월 11
	getDate( )	-1~31 사이의 숫자로 일(date)를 표시
	getDay( )	-0~6 사이의 숫자로 요일을 표시 -일요일 0 ~ 토요일 6
	getTime( )	-1970.1.1 자정 이후로 흐른 시간 -> 밀리 초(1/1000초)로 표시
	getHours( ) getMinutes( ) getSeconds( ) getMilliseconds( )	-0~23 사이의 숫자로 시(hour)를 표시 -0~59 사이의 숫자로 분(minute)을 표시 -0~59 사이의 숫자로 초(second)를 표시 -0~999 사이의 숫자로 밀리초를 표시
날짜 · 시간 설정하기	setFullYear( )	-연도를 4자리 숫자로 설정
	setMonth( )	-0~11 사이의 숫자로 월(month)를 설정 -1월 0 ~ 12월 11
	setDate( )	-1~31 사이의 숫자로 일(date)를 설정
	setTime( )	-1970.1.1 자정 이후로 흐른 시간 -> 밀리 초(1/1000초)로 설정
	setHours( ) setMinutes( ) setSeconds( ) setMilliseconds( )	-0~23 사이의 숫자로 시(hour)를 설정 -0~59 사이의 숫자로 분(minute)을 설정 -0~59 사이의 숫자로 초(second)를 설정 -0~999 사이의 숫자로 밀리초를 설정
날짜 · 시간 형식 바꾸기	toLocaleString( )	-현재 날짜와 시간을 현지 시간(local time)으로 표시
	toString( )	-Data 객체 타입을 -> 문자열로 표시

 

 

3. Math객체

-위에서의 Array객체 & Date객체는 인스턴스 만든 이후에 사용했었음

-but Math객체는 인스턴스 만들 필요 x

이렇게 프로퍼티/메서드 사용하면 됨

 

3-1. Math객체의 프로퍼티

 

 

 

 

3-2. Math객체의 메서드

-주로 수학과 관련된 함수의 결괏값을 반환

round( )

-매개변수의 소수점 이하 부분을 반올림함