자바스크립트 객체(1)

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.

객체

자바스크립트 한정으로 프로그램에서 인식할 수 있는 모든 대상을 객체라 가르킨다.

객체 종류

• 문서 객체 모델(DOM) - 웹 문서 또한 객체이고 삽입된 이미지, 링크 등도 객체이다.
• 브라우저 관련 객체 - 웹 브라우저에서 사용하는 정보, history, location 객체 등이 있다.
• 내장 객체 - 자바스크립트 안에 미리 객체로 정의 되어 있는 객체

 

객체를 사용할 때에는 참조 형태를 이루어야 한다. 즉 자체로는 사용하지 못하고 인스턴스로 만들어 사용해야하는데, 만들 때는 new 예약어를 사용하여 뒤에 객체 이름을 적으면 된다.
new 예약어


객체에는 특성을 나타내는 프로퍼티, 동작을 표현하는 메서드가 있다. 그리고 마침표(.)를 통해 프로퍼티와 메서드를 작성할 수 있다. 사용 방법은 인스턴스명 뒤에 마침표를 붙이고 프로퍼티나 메서드 이름을 작성하면 된다.

var now = new Date(); //Date라는 객체에 인스턴스 생성
documet.write("현재 시각은 " + now.toLocaleString()); //now라는 인스턴스에 toLacaleString이라는 date 메서드 사용

 

이때 메서드는 함수와 같은 역할이기 때문에 이름 옆에 괄호를 넣어야 한다.

내장 객체

내장 객체 중 계층 구조와 상관없이 나타낼 수 있는 객체가 있다. 그 중 Array객체와 Date객체가 대표적이다.

 

Array 객체

내장 객체 중에서 배열을 다룬다.

var number = new Array(); // 초기값이 없고 배열의 크기를 지정하지 않음
var number = new Array(4); // 초기값이 없고 배열의 크기를 지정
var number = ["one", "two", "three", "four"]; // 초기값이 있는 배열 선언
var number = Array("one", "two", "three", "four"); // 초기값이 있고 Array 객체를 사용한 배열 선언

Array 객체의 메서드

종류	설명
concat	기존 배열에 요소를 추가하여 새로운 배열을 만듬
every	모든 요소가 주어진 함수에 참이면 true , 아니면 false를 반환함
filter	요소 중 주어진 필터링 함수에 대해 true인 요소만 새로운 배열을 만듬
forEach	모든 요소에 주어진 함수를 실행
indexOf	주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾는다
join	배열 요소를 문자열로 합친다. 이때 구분자를 지정할 수 있다.
push	배열 맨 끝에 요소를 추가하고 새로운 length(개수)를 반환
unshift	배열 시작부분에 새로운 요소를 추가
pop	배열에서 마지막 요소를 꺼내 그 값을 결과로 반환
shift	배열 시작 요소를 꺼내 그 값을 결과로 반환
splice	배열에 요소를 추가하거나 삭제
slice	배열 특정 부분만 잘라낸다.
reverse	배열 배치 순서를 역순으로 변경
sort	배열 요소를 지정한 조건에 따라 정렬
toString	배열에서 지정한 부분을 문자열로 반환, 각 요소는 쉼표로 구분

concat 메서드
concat 메서드는 서로 다른 2개의 배열을 합쳐 새로운 하나의 배열을 만들수 있다.
다만, 어떤 배열을 먼저 작성하지에 따라 배열에 순서가 달라진다.

var num1 = [1, 2, 3];
var num2 = [a, b, c];
var allNum = num1.concat(num2); // num1에 num2 배열을 합치기 

위 배열을 [ 1, 2, 3, a, b, c]이다. 반대로 num2.concat(num1)으로 사용했다면 [a, b, c, 1, 2, 3]이 된다.

 

 

join 메서드
배열 요소를 하나의 문자열로 만들어 주는 메서드이며 구분자(/)를 넣을 수 있고 따로 지정하지 않으면 수미표로 구분한다.

var num1 = [1, 2, 3, 4, 5];
num1.join();  // 1,2,3,4,5
num1.join(/); // 1/2/3/4/5

 

push, unshift 메서드
요소를 추가할 때 사용하는 메서드이며 끝에 추가는 push, 시작 부분에 추가는 unshift 메서드를 사용한다. 그리고 length 값으로 반환한다.
다만, 배열에 요소를 추가하면 기존의 배열이 바뀐다는 점을 주의해야한다.

var num1 = [1, 2, 3, 4, 5];
var ret1 = num1.push(7,8); // 기존 배열 뒤에 7,8 요소 추가
document.write(ret1) ; // 값은 갯수인 7이 반환된다.

 

pop, shift 메서드

앞에 요소를 꺼낼대는 pop, 뒤에 요소를 꺼낼 때는 shift 메서드를 사용한다. 값은 꺼낸 요소값을 반환하며 기존 배열이 변경된다.

var num1 = [1, 2, 3, 4, 5];
var popped1 = num1.pop(); // 기존 배열 뒤에 하나를 제거 
document.write( popped1); // 값은 마지막 요소값인 5가 반환된다.

 

splice 메서드
원하는 위치에 요소를 추가, 삭제할 수 있다. splice() 괄호 안에 들어 있는 인수에 개수에 따라 배열의 요소를 삭제하거나 추가한다. 그에 맞춰 기존 배열도 수정된다.

인수가 1개인 경우

인수가 인덱스 값이 되고, 그 인덱스 요소부터 끝까지 삭제한다.

var num1 = [1, 2, 3, 4, 5];
var num2 = num1.splice(2) ; // 인덱스 번호가 2번인 3 요소부터 끝까지 삭제
document.write(num2); // 반환된 값 3,4,5

인수가 2개인 경우

첫번째 인수는 인덱스 값, 두번째 인수는 삭제할 요소의 갯수를 말한다.

var num1 = [1, 2, 3, 4, 5];
var num2 = num1.splice(2, 2) ; // 인덱스 번호가 2번인 3 요소부터 2개 요소 삭제
document.write(num2); // 반환된 값 3,4

인수가 3개 이상인 경우

첫 번째 인수는 인덱스 값, 두 번째 인수는 삭제할 요소의 갯수, 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정한다.

var num1 = [1, 2, 3, 4, 5];
var num2 = num1.splice(2, 2, a, b) ; // 인덱스 번호가 2번인 3 요소부터 2개 요소 삭제
document.write(num2); // 반환된 값 3,4
document.write(num1); // 변경된 배열 1, 2, a, b, 5

 

slice 메서드
기존 배열을 변경하지 않고 요소를 꺼낼 수 있다.

인수가 1개인 경우

인수를 시작 인덱스로 생각하고 지정된 요소부터 끝까지 변환한다.

var num1 = [1, 2, 3, 4, 5];
var num2 = num1.slice(2) ; // 인덱스 번호가 2번인 3 요소부터 2개 요소 삭제
document.write(num2); // 반환된 값 3,4, 5
document.write(num1); // 변경된 배열 1, 2, 3, 4, 5 (변함 없음)

인수가 2개인 경우

첫 번째 인수는 시작 인덱스, 두 번째 인수는 끝나는 인덱스를 지정하고 그 사이에 요소를 반환한다.

var num1 = [1, 2, 3, 4, 5];
var num2 = num1.slice(2 , 4) ; // 인덱스 번호가 2번인 3 요소부터 4번인 4요소 까지 삭제
document.write(num2); // 반환된 값 3, 4
document.write(num1); // 변경된 배열 1, 2, 3, 4, 5 (변함 없음)

 

 

Date 객체

날짜와 시간 정보를 나타낼 수 있다. 달력으로 표시 할 수도 있고 지금까지 몇일이 지났는지 등 응용이 가능하다.

시간, 날짜 입력 방식

1. YYYY-MM-DD
   다 작성할 필요 없고, 필요에 따라 연도만, 연/월, 연/월/일을 사용하면 된다.
2. YYYY-MM-DDTHH
   시간을 표기하기 전에 T를 붙이고 HH:MM:SS 형태를 사용한다. 마지막에 Z를 붙이면 국제 표준시로 표시가 된다
3. MM/DD/YYYY
   연도를 뒤에 표기하고 싶다면 사용할 수 있는 형식이다.
4. 이름 형식
   달과 요일을 표기할 수 있다. January처럼 전체를 표기할 수 있고, Jan으로 줄여 표기할 수도 있다. new Date("Mon Jan 10 2022 15:00:10 GMT+0900")
   Date객체 메서드는 크기 정보를 가져오는 메서드, 설정하는 메서드, 형식을 바꿔주는 메서드가 있다. 이때 가져오는 메서드와 설정하는 메서드는 앞에 get과 set에 따라 구분하고 나머지 이름은 동일하다.

 

날짜, 시간 정보 가져오기 / 설정하기 ( 설정하기는 get 대신 set으로 변경)

구분	설명
getFullYear	연도를 4자리 숫자로 표시
getMonth	0~11 사이의 숫자로 월 표시(0이 1월)
getDate	1~31 사이의 숫자로 일 표시
getDay	0~6숫자로 요일 표시 (0은 일요일)
getTime	1970년 1월 1일 자정 이후에 시간을 밀리 초로 표시
getHours	0~23 사이의 숫자로 시를 표시
getMinutes	0~59 사이의 숫자로 분을 표시
Seconds	0~59사이의 숫자로 초를 표시
Milliseconds	0~999 사이의 숫자로 밀리 초를 표시

 

형식 바꾸기

구분	설명
toLocaleString	현재 날짜와 시간을 현지 시간으로 표시
toString	DATE 객체 타입을 문자열로 표시