언어공부/JavaScript&jQuery
자바 스크립트(JavaScript) 기초 문법 - 내장객체 (배열 객체)
yeony
2021. 7. 24. 18:30
자바 스크립트(JavaScript) 기초 문법
내장 객체
내장 객체(Built-in Object)란 브라우저의 자바스크립트 엔진에 내장된 객체를 말하며, 필요한 경우 객체를 생성해서 사용할 수 있다. 내장 객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math), 정규 표현 객체(RegExp Object)등이 있다.
배열 객체
변수에는 데이터가 한 개만 저장된다. 여러 개의 데이터를 한 곳에 저장을 하려면 배열 객체(Array Object)를 생성하면 된다. 자바스크립트 배열은 여러개의 타입을 혼합해서 저장할 수 있다.
<script>
var car_color="black", car_price=30000000, car_model="X5";
//변수를 이용해 3개의 데이터를 저장하려면 3개의 변수가 필요하다.
//배열 객체를 사용하면 하나의 배열 객체로 3개의 데이터를 저장한다.
//배열 객체는 아래의 3가지 방법으로 생성할 수 있다.
var car=new Array();
car[0]="black";
car[1]=30000000;
car[2]="X5";
var car =new Array("black",30000000,"X5");
var car=["black",30000000,"X5"];
</script>
각각의 데이터는 배열로 나누어진 저장소에 나열되며, 각각의 저장소에는 인덱스 번호가 부여된다. 인덱스 번호는 0부터 시작된다.
배열객체에 저장된 데이터 불러오기
<scirpt>
var car=["black",30000000,"X5"];
//데이터 불러오기 1
document.write(car[0]);//black 출력
document.write(car[1]);//30000000 출력
document.write(car[2]);//X5 출력
//데이터 불러오기 2
for (var i=0; i<car.length; i++){
document.write(car[i],"<br/>");
}
//데이터 불러오기 3
for (var k in car){
document.write(car[k],"<br/>");
}
</script>
배열명.length는 배열크기 즉 배열원소 개수를 반환한다. 여기서 car.length는 3이다.
배열 객체의 메소드 및 속성
| 종류 | 설명 |
| join(연결문자) ex)join("-") | 배열 객체의 데이터를 연결문자 기준으로 1개의 문자형 데이터로 반환한다. |
| reverse( ) | 배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환한다. |
| sort( ) | 배열 객체의 데이터를 오름차순으로 정렬한다. |
| slice(index1, index2) | 배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져온다. |
| splice( ) | 배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있다. |
| concat( ) | 2개의 배열 객체를 하나로 결합한다. |
| pop( ) | 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제한다. |
| push(new data) | 배열 객체의 마지막 인덱스에 새 데이터를 삽입한다. |
| shift( ) | 배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제한다. |
| unshift(new data) | 배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입한다. |
| length | 배열에 저장된 총 데이터의 개수를 반환한다. |
자바 스크립트 배열은 다른 언어 배열과는 다르게 키를 통해서 값을 저장하였다 다시 추출할 수 있다. 키는 단순 문자열이고 인덱스 번호 대신에 키를 사용해 값을 저장하고 다시 가져올 수 있다. 이러한 배열을 연관배열이라고 하며, 입력양식 필드에서 값을 가져오거나 반대로 값을 초기화 설정할 때 아주 편리하다.
<script>
var fruits=new Array();
fruits['a']='사과';
//인덱스 번호 대신 키이름 a에 사과 원소 값을 저장한다. >>자바스크립트에서 연관배열이라고 한다.
fruits['b']='바나나';
fruits['p']='복숭아';
document.write(fruits['a']+"<br/>");//사과 출력
//키 이름 a를 통해서 원소값을 가져옴
document.write(fruits['b']+"<br/>");//바나나 출력
document.write(fruits['p']+"<hr/>");//복숭아 출력
</script>
인덱스 번호 대신 키에 값을 저장한다. 배열객체에 저장된 데이터를 불러올때는 인덱스 대신 키를 넣어 불러올 수 있다.
<body>
<form name="myForm">
입력1:<input type="text" name="a0" size="14"/> <br/><br/>
입력2:<input type="text" name="a1" size="14"/> <br/><br/>
입력3:<input type="text" name="a2" size="14"/> <br/><br/>
<input type="button" value="초기화" onclick="init();"/>
</form>
<script>
function init(){
for (var i=0;i<3;i++){
document.myForm["a"+i].value=i;
//myForm배열명 형태로 사용되고,
//a0,a1,a2 text 네임 속성명이 키이름으로 사용된 연관 배열 형식이다.
//입력박스에 0,1,2 값이 대입된다.
}
}
</script>
</body>
초기화 버튼을 누르면 0, 1, 2가 각 textarea 안에 대입된다.
