1. 객체란?
▷ 프로그램에서 인식할 수 있는 모든대상
▷ 데이터를 저장하고 처리하는 기본 단위
◎ 자바스크립트 객체 : 자바스크립트 안에 미리 객체로 정의해 놓은 것입니다.
▷ 문서 객체 모델(DOM) : 문서, 이미지, 링크, 텍스트 필드 모두 별도 객체로 관리
▷ 브라우저 관련 객체, 내장 객체(자주 사용하는 요소 저장)
▷ 사용자 정의 객체 : 사용자가 직접 만드는 객체
◎ 객체 인스턴스 생성 방법 : 객체 자체가 아닌 인스턴스 형태로 만들어서 사용합니다.
▷ 인스턴스 : 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것입니다.
ex) (기본형) new 객체명
ex) Date 객체의 인스턴스 만들어 날짜와 시간 표시 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>What time is it?</title>
<style>
body {
font-size:2em;
text-align: center;
}
</style>
</head>
<body>
<script>
var now = new Date(); //Date 인스턴스 생성 후 변수에 저장
document.write("현재 시간은 " + now);
</script>
</body>
</html>현재 시간은 Fri Dec 16 2022 09:14:41 GMT+0900 (한국 표준시)
현재 시간에 대한 결과 값이 출력됩니다.
◎ 프로퍼티(property)와 메서드(method)
▷ 프로퍼티 : 객체의 특징이나 속성(제조사, 모델명, 색상 등등)
▷ 메서드 : 객체에서 할 수 있는 동작(시동 걸기, 움직이기, 멈추기 등등)
<script>
var now = new Date();
document.write("현재 시각은 " + now.toLocaleString()) ; // 로컬 형식으로 표시하기
</script>현재 시각은 2022. 12. 16. 오전 9:23:41
위 코드의 script 부분에 Date 객체의 메서드를 사용합니다. 결과는 현재 날짜와 시간이 다른 형식으로 표기됩니다!
2. 내장 객체(Array 객체)
▷ 배열 생성 방법 : var arr = new Array(3); ( 자바 배열 생성 방법 : int[] arr = new int[3]; )
// 1. 초깃값이 없는 경우
var numbers = new Array(); //배열 크기 미지정
var numbers = new Array(4); //배열 크기 4
// 2. 초깃값이 있는 경우
var numbers = ["one", "two", "three", "four"]; //문자형 배열 선언
var numbers = Array("one", "two", "three", "four"); //Array 객체를 이용한 선언<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h1>배열의 각 요소 </h1>
<script>
var numbers = ["one", "two", "three", "four"];
var i;
document.write("<p>" + numbers[0] + "</p>");
document.write("<p>" + numbers[1] + "</p>");
document.write("<p>" + numbers[2] + "</p>");
document.write("<p>" + numbers[3] + "</p>");
for(i=0; i < numbers.length; i++){
document.write("<p>" + numbers[i] + "</p>");
}
</script>
</body>
</html>배열의 각 요소
one
two
three
four
위와 같은 출력이 나타나게 됩니다. 각각 출력을 해보는 방법과 for문을 이용한 방법은 동일한 결과 값을 출력합니다.
자바 스크립트도 배열의 길이 지정방법이 자바랑 동일하네요!
◎ Array 객체의 메서드
| No | 종류 | 설명 |
| 1 | concat | 기존 배열에 요소를 추가해 새로운 배열을 만듭니다. |
| 2 | every | 배열의 모든 요소가 주어진 함수에 대해 참이면 true, 거짓이면 false를 반환합니다. |
| 3 | filter | 배열 요소 중 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만듭니다. |
| 4 | forEach | 배열의 모든 요소에 대해 주어진 함수를 실행합니다. |
| 5 | indexOf | 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾습니다. |
| 6 | join | 배열 요소를 문자열로 합칩니다. 이때 구분자를 지정할 수 있습니다. |
| 7 | push | 배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환합니다. |
| 8 | unshift | 배열의 시작 부분에 새로운 요소를 추가합니다. |
| 9 | pop | 배열의 마지막 요소를 꺼내 그 값을 결과로 반환합니다. |
| 10 | shift | 배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환합니다. |
| 11 | splice | 배열에 요소를 추가하거나 삭제합니다. |
| 12 | slice | 배열에서 특정한 부분만 잘라냅니다. |
| 13 | reverse | 배열의 배치 순서를 역순으로 바꿉니다. |
| 14 | sort | 배열 요소를 지정한 조건에 따라 정렬합니다. |
| 15 | toString | 배열에서 지정한 부분을 문자열로 반환합니다. 이때 각 요소는 쉼표(,)로 구분합니다. |
▷ concat : 배열끼리 합치는 메서드
▶ 서로 다른 배열 2개를 합쳐서 새로운 배열을 만듭니다.
▶ 기존 배열에 영향을 주지 않습니다.
<script>
var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d"];
var numsChars = nums.concat(chars);
var charsNums = chars.concat(nums);
document.write("nums에 chars 합치면 : ", numsChars, "<br> chars에 nums 합치면: ", charsNums);
document.write("<br>", nums);
document.write("<br>", chars);
document.write("<br>", numsChars);
document.write("<br>", charsNums);
</script>nums에 chars 합치면 : 1,2,3,a,b,c,d
chars에 nums 합치면: a,b,c,d,1,2,3
1,2,3
a,b,c,d
1,2,3,a,b,c,d
a,b,c,d,1,2,3
▷ join : 배열 요소끼리 합치는 메서드
▶ 배열 요소를 연결해서 하나의 문자열로 만들어줍니다.
▶ 요소 사이에 원하는 구분자를 넣을 수 있습니다.
▶ 구분자를 지정하지 않으면 쉼표(,)로 구분됩니다.
<script>
var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d"];
var string1 = nums.join();
document.write("구분자 없이 합치기 : " + string1 + "<br>");
var string2 = chars.join('/');
document.write("구분자 포함 합치기 : " + string2 + "<br>");
</script>구분자 없이 합치기 : 1,2,3
구분자 포함 합치기 : a/b/c/d
▷ push, unshift : 새로운 요소를 추가하는 메서드
▶ push : 배열 맨 끝에 요소를 추가합니다.
▶ unshift : 배열 맨 앞에 요소를 추가합니다.
▶ 배열의 길이 값 반환, 기존의 배열이 바뀝니다.
<script>
var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d"];
var ret1 = nums.push(4, 5);
document.write("length : ", ret1, " | 배열 : ", nums + "<br>");
var ret2 = nums.unshift(0);
document.write("length : ", ret2, " | 배열 : ", nums + "<br>");
</script>length : 5 | 배열 : 1,2,3,4,5
length : 6 | 배열 : 0,1,2,3,4,5
▷ pop, shift : 배열에서 요소를 꺼내는 메서드
▶ pop : 배열 뒤쪽에서 요소를 꺼냅니다.
▶ shift : 배열 앞쪽에서 요소를 꺼냅니다.
▶ 꺼낸 요소를 반환하고, 기존 배열을 꺼낸 요소가 빠진 상태로 변경됩니다.
<script>
var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d"];
var popped1 = chars.pop();
document.write("꺼낸 요소 : ", popped1, " | 배열 : ", chars + "<br>");
var popped2 = chars.shift();
document.write("꺼낸 요소 : ", popped2, " | 배열 : ", chars + "<br>");
</script>꺼낸 요소 : d | 배열 : a,b,c
꺼낸 요소 : a | 배열 : b,c
▷ splice : 중간에 요소를 추가하거나 삭제하는 메서드(잘라내기)
▶ 배열 중간에 2개 이상의 요소를 추가하거나 삭제할 수 있습니다.
▶ 새로운 배열이 결과 값으로 반환됩니다.
<script>
// 인수가 1개인 경우 : 요소 삭제하기
var numbers = [1, 2, 3, 4, 5];
var newNumbers = numbers.splice(2); //numbers[2]부터 끝까지 잘라내기
document.write("<h3>splice 인수 1개</h3>");
document.write("반환된 배열 : " + newNumbers + "<br>");
document.write("변경된 배열 : " + numbers + "<br>");
// 인수가 2개인 경우 : 첫 번째(시작 지점), 두 번째(잘라낼 개수)
var study = ["html", "css", "web", "jquery"];
var newStudy = study.splice(2, 1); //study[2]부터 1개를 잘라내기
document.write("<h3>splice 인수 2개</h3>");
document.write("반환된 배열 : " + newStudy + "<br>");
document.write("변경된 배열 : " + study + "<br>");
// 인수가 3개 이상인 경우 : 첫 번째(시작 지점), 두 번째(잘라낼 개수), 세 번째(추가 요소 지정)
var newStudy2 = study.splice(2, 1, "js"); //study[2]부터 1개를 잘라내고 이 지점에 "js" 추가
document.write("<h3>splice 인수 3개</h3>");
document.write("반환된 배열 : " + newStudy2 + "<br>");
document.write("변경된 배열 : " + study + "<br>");
</script>splice 인수 1개
반환된 배열 : 3,4,5
변경된 배열 : 1,2
splice 인수 2개
반환된 배열 : web
변경된 배열 : html,css,jquery
splice 인수 3개
반환된 배열 : jquery
변경된 배열 : html,css,js
▷ slice : 기존 배열을 바꾸지 않으면서 삭제하는 메서드(복사하기)
▶ 요소를 여러 개 꺼낼 수 있습니다.
▶ 요소를 삭제한 후에도 기존 배열이 바뀌지 않습니다.
<script>
var colors = ["red", "green", "blue", "white", "black"];
var colors2 = colors.slice(2); // color[2]부터 끝까지 내용 가져오기
document.write("<h3>slice 인수 1개 - 내용만 가져오기</h3>");
document.write(colors2 + "<br>");
document.write(colors + "<br>");
var colors3 = colors.slice(2, 4); // color[2]부터 4번째(color[3])까지 내용 가져오기
document.write("<h3>slice 인수 2개 - 내용만 가져오기</h3>");
document.write(colors3 + "<br>");
document.write(colors + "<br>");
</script>slice 인수 1개 - 내용만 가져오기
blue,white,black
red,green,blue,white,black
slice 인수 2개 - 내용만 가져오기
blue,white
red,green,blue,white,black
slice 메서드는 기존 배열에 영향을 주지않고 복사하는 복사(control + c)와 같은 역할입니다.
splice 메서드는 기존 배열의 일부 요소를 삭제하고 붙여넣는 잘라내기(control + x)와 같은 역할입니다.
▷ sort : 배열 요소를 지정한 조건에 따라 정렬합니다.
▶ 기본적으로 오름차순으로 정렬합니다. 기준은 아스키 코드 기준이에요!
<script>
var colors = ["red", "green", "blue", "white", "black"];
var reverse1 = colors.reverse();
document.write("<h3>reverse</h3>");
document.write(reverse1 + "<br>");
var colors4 = colors.sort();
document.write("<h3>sort</h3>");
document.write(colors4 + "<br>");
var numbers = [1, 5, 203, 48, 4];
document.write("<h3>sort</h3>");
numbers.sort();
/*numbers.sort(function(a,b){
if(a>b) return 1;
else if(b>a) return -1;
else return 0;
});*/
/*numbers.sort(function(a,b){
return a-b;
})*/
document.write(numbers);
</script>reverse
black,white,blue,green,red
sort
black,blue,green,red,white
sort
1,203,4,48,5
문자는 오름차순으로 정렬이 되지만, 숫자는 첫글자가 오름차순을 기준으로 정렬이 됩니다.
sort라는 함수는 첫글자를 아스키 코드로 비교하고 같으면 두 번째, 계속 반복이 되면서 오름차순으로 정렬합니다.
주석으로 처리되어 있는 부분은 sort에 function을 새로 지정하면서 숫자들을 오름차순, 내림차순으로 정렬할 수 있게 만듭니다. sort라는 함수 자체를 제대로 이해해야 출력 결과를 이해할 수 있습니다. 자세한건 다음번에 sort함수에 대해 공부해서 코드와 함께 올려볼게요!!
Array의 내장 객체까지 알아보았고 다음 글에서 자바스크립트의 객체에 대해 더 다뤄볼게요~
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
'FrontEnd > java script' 카테고리의 다른 글
| [java script] 브라우저 관련 객체(window, navigator, location) (0) | 2022.12.17 |
|---|---|
| [java script] 객체 2(내장 객체 Date, Math) (0) | 2022.12.17 |
| [java script] 자바 스크립트 함수 2(function) (0) | 2022.12.16 |
| [java script] 자바 스크립트 함수 1(function) (0) | 2022.12.15 |
| [java script] 자바스크립트 반복문(for, while) (0) | 2022.12.15 |
