[자바스크립트] 객체 (1)

객체

- 프로그램에서 인식할 수 있는 모든 대상

- 데이터를 저장하고 처리하는 기본 단위

 

자바스크립트 객체

- 자바스크립트 안에 미리 객체로 정의해 놓은것

- 문서객체 모델(DOM) : 문서 뿐만 아니라 웹 문서 안에 포함된 이미지,링크, 텍스트 필드 등 모두 별도의 객체로 관리

-브라우저 관련 객체 : 웹 브라우저 정보를 객체로 관리

- 내장 객체 : 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해 놓음

 

사용자 정의 객체

- 필요할 때마다 사용자가 직접 만드는 객체

 

객체 인스턴스 만들기

- 객체는 객체 자체가 아니라 인스턴스 형태로 만들어서 사용

 

인스턴스

- 객체를 틀처럼 사용해서 같은 모양으로 찍어낸것 (new 객체명)

var now = new Date(); // Date객체의 인스턴스를 만들고 now변수에 저장
document.write("현재 시각은 " + now.toLocalString()) ;	// Date 객체의 메서드 사용해서 현재 날짜와 시간 표시

 

프로퍼티

- 객체의 특징이나 속성

메서드

- 객체에서 할 수 있는 동작

---

내장객체 - Array 객체

배열 만들기

1) 초깃값이 없는 경우

// Array객체를 이용하여 배열을 생성
var arr = new Array(); // 배열의 크기를 지정하지 않음
var arr2 = new Array(4); //배열의 크기를 지정함

2) 초깃값이 있는 경우

var arr = ["one","two","three","four"]; // 배열선언
var arr2 = Array("one","two","three","four"); // Array 객체를 사용한 배열 선언

※ 배열의 크기 : Array객체의 length 프로퍼티(arr.length)를 사용하여 배열의 크기를 구할 수 있다.

 

Array 객체의 메서드

- 아래의 링크를 통해 Array객체를 자세히 알 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Array

Array() 생성자 - JavaScript | MDN

 

자주 사용하는 Array 객체 메서드

- concat : 기존 배열에 요소를 추가해 새로운 배열 만듬

• 서로 다른 배열 2개를 합쳐서 새로운 배열을 만듦
• 기존 배열에 영향을 주지 않음
• 반환시 배열형

- join : 배열 요소를 문자열로 합침

• 배열 요소를 연결해서 하나의 문자열로 만듦, 이때 요소 사이 원하는 구분자를 지정할 수 있음
• 구분자를 지정하지 않으면 쉼표(,)로 구분
• 반환시 문자열형

- push : 배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환

• 배열의 마지막 요소 뒤에 새로운 요소 추가
• 배열의 길이값이 반환되며 기존배열이 바뀜

- unshift : 배열의 시작부분에 새로운 요소 추가

• 배열의 첫 번째 요소 앞에 새로운 요소 추가
• 배열의 길이값이 반환되며 기존배열이 바뀜

- pop : 배열의 마지막 요소를 꺼내 그 값을 결과로 반환

• 배열의 마지막 요소를 꺼내서 반환
• 기존 배열은 꺼낸 요소가 빠진상태로 변경됨

- shift : 배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환

• 배열의 첫 번째 요소를 꺼내서 반환
• 기존 배열은 꺼낸 요소가 빠진 상태로 변경됨

var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d"];

// concat() - 두 개의 배열 합치기
var numsChars = nums.concat(chars);
var charsNums = chars.concat(nums);

// join() - 배열 내의 요소 합치기
var string1 = nums.join(); // 구분자 지정안함 (,로 구분됨)
var string2 = chars.join("/"); //구분자 지정함(/로 구분됨)

// push() - 배열 끝에 요소 추가
var ret1 = nums.push(4, 5);

// unshift() - 배열 앞에 요소 추가
var ret2 = nums.unshift(0);

// pop() - 마지막 요소 꺼내서 반환
var popped1 = chars.pop();

// shift() - 첫번째 요소 꺼내서 반환
var popped2 = chars.shift();

출력 값
numsChars : 1,2,3,a,b,c,d    // nums배열 요소 뒤에 chars배열의 요소가 합쳐져 새로운 배열 생성
charsNums : a,b,c,d,1,2,3    // chars배열 요소 뒤에 nums배열의 요소가 합쳐져 새로운 배열 생성
string1 : 1,2,3                    // 구분자를 지정하지 않고 nums배열의 요소를 합침
string2 : a/b/c/d                // 구분자를 지정하여 nums배열의 요소를 합침
ret1 : 5                              // nums배열 마지막 요소 뒤에 4, 5를 추가하여 배열의 길이가 3 → 5가됨
nums : 1,2,3,4,5               // 위의 과정에서 nums배열의 요소가 1, 2, 3, 4, 5가 됨
ret2 : 6                             // nums배열 첫 번재 요소 앞에 0을 추가하여 배열의 길이가 5 → 6이 됨
nums  : 0,1,2,3,4,5            // 위의 과정에서 nums 배열의 요소가 0, 1, 2, 3, 4, 5가 됨
popped1 : d                       // 배열의 마지막 요소를 꺼내 반환
chars : a,b,c                      // 위의 과정에서 마지막 요소가 삭제됨
popped2 : a                       // 배열의 첫 번째 요소를 깨내 반환
chars  : b,c                        // 위의 과정에서 첫 번째 요소가 삭제됨

 

- splice : 중간에 요소를 추가하거나 삭제함

• 배열 중간에 2개 이상의 요소를 추가하거나 삭제할 수 있음
• 새로운 배열이 결괏값으로 반환됨
• 인수가 1개일 경우 : 인수가 지정한 인덱스의 요소부터 배열의 맨끝 요소까지 반환 후 삭제
• 인수가 2개일 경우 : 첫번째 인수는 인덱스값, 두번째 인수는 삭제할 요소의 개수
• 인수가 3개 이상일 경우 :  첫 번째 인수는 배열에서 삭제할 시작위치, 두 번째 인수는 삭제할 개수, 세번째 요소부턴 삭제한 위치에 새로 추가할 요소 지정

- slice : 배열의 특정한 부분만 잘라냄

• 요소를 여러 개 꺼낼 수 있음
• 요소를 삭제한 후에도 기존 배열은 바뀌지 않음
• 인수가 1개일 경우 : 인수가 지정한 인덱스 요소부터 마지막 요소까지 꺼내서 반환
• 인수가 2개 일 경우 : 첫번 째 인수는 시작 인덱스, 두번 째인수는 끝 인덱스의 직전 인덱스

var numbers = [1, 2, 3, 4, 5];
var study = ["html", "css", "web", "jquery"];
var colors = ["red", "green", "blue", "white", "black"];

//splice() - 중간에 요소를 추가하거나 삭제, 기존배열에 반영됨
var newNumbers = numbers.splice(2); 		// 인수가 1개일 경우
var newStudy = study.splice(2, 1); 		// 인수가 2개일 경우
var newStudy2 = study.splice(2, 1, "js"); 	// 인수가 3개 이상일 경우

//slice() - 추출한 요소로 배열을 만듬, 기존 배열엔 반영안됨
var colors2 = colors.slice(2); 		//인수가 1개일 경우
var colors3 = colors.slice(2, 4); 	// 인수가 2개일 경우

출력 값
newNumbers : 3, 4, 5     // numbers[2]요소 요소부터 끝까지 잘라내어 반환
numbers : 1, 2               // 위의 과정에서 반환된 요소는 삭제되고  2개의 요소만 남음
newStudy : web             // study[2]의 요소부터 1개의 요소를 반환
study : html,css,jquery    //위의 과정에서 반환된 요소는 삭제되고 3개의 요소만 남음
newStudy2 : jquery         // study[2]의 요소 1개를 반환
study : html,css,js          // 위의 과정에서 반환된 요소는 삭제되고 3번째 인수의 값인 'js'가 추가됨
colors2 : blue,white,black  // colors[2]의 요소부터 마지막 요소까지 반환
colors3 : blue,white         // colors[2]의 요소부터 colors[4]의 앞 요소 즉, colors[3]의 요소 까지 반환
colors : red,green,blue,white,black  // 위의 과정에도 기존의 배열에 반영이 되지 않음

※ 기존배열의 일부 요소만 삭제하려면 splice()메서드를 사용하고,

    기존 배열에서 꺼낸 요소로 새로운 배열을 만들어 사용하려면 slice()메서드를 사용하는 것이 좋다.

 

- indexOf : 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾음

- sort : 배열요소를 지정한 조건에 따라 정렬

- reverse : 배열의 배치 순서를 역순으로 바꿈

var chars = ["a", "e", "b", "f", "c", "d"];

// indexOf() - 인수에 해당하는 요소가 처음으로 나오는 인덱스 반환
var dIndex = chars.indexOf("d");

// reverse() - 배열의 요소를 반대순서로 정렬
chars.reverse();

// sort() - 배열의 요소를 오름차순으로 정렬
chars.sort();

출력 값
dIndex : 2                               // chars배열에서 "d"요소가 처음나오는 인덱스인 2를 반환
chars.reverse() : d,c,f,b,d,e,a   // chars배열의 요소 순서를 반대로 정렬함
chars.sort() : a,b,c,d,d,e,f          //chars배열의 요소를 오름차순 순서로 정렬함

* sort() 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN

---

내장 객체 - Date 객체

Date 객체 인스턴스 만들기

1. 현재 날짜로 설정할 경우
   • new Date();
2. 특정 날짜로 설정할 경우 - 괄호 안에 날짜 또는 날짜와 시간 입력
   • new Date("2022-12-16");
   • new Date("2022-12-16T18:00:00");

자바스크립트의 날짜와 시간 입력 방식

YYYY-MM-DD 형식	YYYY-MM-DDTHH 형식
MM/DD/YYYY 형식	이름형식

 

Date 객체의 메서드

• 날짜/시간 정보를 가져오는 메서드
• 날짜/시간 정보를 설정하는 메서드
• 날짜/시간 형식을 바꿔주는 메서드
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

Date - JavaScript | MDN

 

---

내장 객체 - Math 객체

Math 객체의 특징

• 수학 계산과 관련된 메스드가 많이 포함되어 있지만 수학식에서만 사용하는 것은 아님
• 무작위 수가 필요하거나, 반올림이 필요할 경우 Math 객체의 메서드가 자주 사용됨
• Math객체는 인스턴스를 만들지 않고 프로퍼티와 메서드를 사용할 수 있음
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

Math - JavaScript | MDN

 

자주 사용하는 Math 객체 메서드

- abs : 절댓값을 반환

- ceil : 매개변수의 소수점 이하 부분을 올림

- floor : 매개변수의 소수점 이하 부분을 버림

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

- max : 매개변수 중 최댓값을 반환

- min : 매개변수 중 최솟값을 반환

- random : 0과 1사이의 무작위 수를 반환

Math.abs(-1);			// -1의 절댓값인 1 출력
Math.ceil(3.14);		// 소숫점 이하부분을 올림하여 4 출력
Math.floor(2.67);		// 소숫점 이하부분을 내림하여 2 출력
Math.round(5.24);		// 소숫점 이하부분을 반올림하여 5 출력
Math.max(3,1,5,8);		// 인수 중 가장 큰 수인 8 반환
Math.min(3,1,5,8);		// 인수 중 가장 작은 수인 1 반환
Math.random() 			// 0 ~ 1 사이 숫자가 무작위로 반환됨
Math.random()*100 + 1 	// 1~100 사이 숫자가 무작위로 반환됨