배열
연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다.
배열의 구성요소
- Index 색인 : 자동으로 0부터 부여된다.
- element 원소 : 배열 내부의 임의의 값
배열의 선언
[ ] 중괄호를 사용하여 선언한다.
var list = ['a', 'b', 'c'];배열 원소 추가하는 4가지 방법
1. .push()
- 맨 앞에 하나의 원소를 추가한다.
2. .concat([])
- 배열의 맨 뒤에 배열을 추가한다.
3. .unshift()
- 맨 앞에 하나의 원소를 추가한다.
4. .splice(index, howmany, element1, element2,,,)
- index는 배열에서 추가할 위치, howmany는 index로부터 제거될 원소의 수, element는 추가할 원소
- return 값은 삭제된 데이터 이다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var list = ['a','b','c'];
list.push('d'); //.push는 맨 뒤에 하나의 원소를 추가해준다.
list = list.concat(['e','f']); //.concat은 맨 뒤에 배열을 추가해준다.
list.unshift('z'); //.unshift는 맨 앞에 하나의 원소를 추가해준다.
list.splice(2,3,'g','h'); //.splice는 원하는 위치에 원하는 개수의 원소를 지우고 원소를 추가한다.
document.write(list);
</script>
</body>
</html>배열 원소 제거하는 2가지 방법
1. .shift()
- 맨 앞 원소를 하나를 제거한다.
2. .pop()
- 맨 뒤 원소 하나를 제거한다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var list = ['a','b','c','d','e'];
list.shift(); //.shift는 맨 앞 원소 하나 제거
list.pop(); //.pop은 맨 뒤 원소 하나 제거
document.write(list);
</script>
</body>
</html>배열을 정렬하는 3가지 방법
1. .sort()
-배열을 오름차순으로 정렬
2. .reverse()
-배열을 내림차순으로 정렬
3. .sort(sortfunc)
-배열을 sortfunc이라는 사용자 지정 기준에 맞추어 정렬
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var list = ['b','d','a','c'];
list.sort(); //배열을 오름차순으로 정렬
document.write(list);
document.write("<br/>")
list.reverse(); //배열을 내림차순으로 정렬
document.write(list);
</script>
</body>
</html>객체
- 배열의 index를 사용자가 임의로 지정하여 값을 저장하는 형태
- 배열은 index가 0부터 자동으로 값에 지정된다.
- 다른 언어에서 연관배열(associative array), 맵(map), 딕서너리(Dictionary)와 개념이 유사하다.
객체의 구성 요소
- key : 배열의 index와 유사하지만 사용자가 임의로 지정한다는 것이 다르다.
- value : key값에 대응되는 값
- 객체 안에는 함수도 들어갈 수 있다.
- 객체 안에는 객체도 들어갈 수 있다.
객체를 선언과 호출
객체를 선언하는 3가지 방법
- { } 대괄호를 사용하여 선언한다.
- 빈 객체를 생성한 후 key와 value를 따로 집어넣는다.
- new를 사용하여 빈 객체를 생성한 후 key와 value를 따로 집어넣는다.
객체를 호출하는 3가지 방법
- [ ] 대괄호에 key를 넣어 대응하는 value를 호출한다.
- 함수의 형태로 key를 넣어 대응하느 value를 호출한다.
- [ ] 대괄호 안에 연산을 통해 key를 넣어 대응하는 value를 호출한다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//객체를 정의하는 3가지 방법
var grades1={'abc001':10,'abc002':8, 'abc003':5};
//변수에 객체를 바로 집어넣는다.
var grades2 = {};
grades2['abc001'] = 10;
grades2['abc002'] = 8;
grades2['abc003'] = 5;
//빈 객체 변수를 선언하고 값을 집어넣는다.
var grades3 = new Object();
grades3['abc001'] = 10;
grades3['abc002'] = 8;
grades3['abc003'] = 5;
//new를 사용하여 객체를 선언하고 값을 집어넣는다.
//객체 값을 가져오는 방법
grades1['abc001']; //[] 대괄호를 이용하여 값을 가져온다.
grades1.abc001; //.key 함수 형태로 값을 가져온다.
grades1['abc'+'001']; //[] 대괄호 안의 연산을 하여 값을 가져온다.
</script>
</body>
</html>for ~ in 문을 통해 객체를 호출하기
- 배열과 객체 모두 사용가능하다.
객체 예시
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var grades = {'abc001' : 10, 'abc002':8, 'abc003':5};
for(var name in grades){
document.write("key : "+ name + " value " + grades[name]+"<br/>");
}
//for ~ in 구문을 활용하여 반복문의 형태로 객체를 불러온다.
</script>
</body>
</html>객체 안에 객체와 함수가 들어간 경우
- this : 이 함수가 속해있는 개체를 가리키는 약속되어 있는 변수
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var grades = {
'list' : {'abc001':10,'abc002':8, 'abc003':5},
'show' : function(){
for(var name in this.list){
document.write("key : "+ name + " value : " + this.list[name] + "<br/>");
}
//객체 안에는 함수도 저장할 수 있다.
}
}
alert(grades['list']['abc001']); //객체의 key값과 객체 안의 객체의 key값을 차례로 사용한다.
grades['show'](); //객체 안의 함수를 호출한다.
</script>
</body>
</html>