배열의 요소에 접근하기 위해서는 [](대괄호)안에 위치값(index)을 지정하여 사용합니다.
위치값(index)은 항상 0부터 시작합니다.
요소의 개수가 n개일 경우 위치값(index)의 범위는 0 ~ n-1까지 입니다.
다른 언어와 다르게 위치값(index)의 범위를 넘는 값을 지정해도 에러가 발생하지 않습니다. undefined가 나옵니다.
|
let ar = ["밤","배","감","사과","대추"]; document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
document.write(`요소의 개수(length 속성) : ${ar.length}개<br>`);
// 첨자를 이용하여 개별요소에 접근한다.(첨자는 0부터 시작한다.)
document.write(`1번 요소 접근 : ${ar[0]}<br>`);
document.write(`2번 요소 접근 : ${ar[1]}<br>`);
document.write(`3번 요소 접근 : ${ar[2]}<br>`);
document.write(`4번 요소 접근 : ${ar[3]}<br>`);
document.write(`5번 요소 접근 : ${ar[4]}<br>`);
// 첨자의 범위를 넘어가도 에러는 아니다.
document.write(`6번 요소접근 : ${ar[5]}<br>`);
|
다음은 실행 결과 입니다.
| object(5개) : 밤,배,감,사과,대추 요소의 개수(length 속성) : 5개 1번 요소 접근 : 밤 2번 요소 접근 : 배 3번 요소 접근 : 감 4번 요소 접근 : 사과 5번 요소 접근 : 대추 6번 요소접근 : undefined |
요소에 새로운 값을 지정하면 값이 수정이 됩니다.
요소의 범위를 넘어가는 위치값(index)를 사용하면 새로운 요소가 추가 됩니다. 중간에 빈 부분이 있으면 undefined가 추가 됩니다.
|
// 값 변경
ar[2] = '포도';
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
// 값 추가
ar[5] = '딸기';
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
// 중간에 undefined가 삽입됨
ar[8] = '다래';
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
document.write(`${ar[5]} ${ar[6]} ${ar[7]} ${ar[8]} <br>`);
|
다음은 실행 결과 입니다.
| object(5개) : 밤,배,포도,사과,대추 object(6개) : 밤,배,포도,사과,대추,딸기 object(9개) : 밤,배,포도,사과,대추,딸기,,,다래 딸기 undefined undefined 다래 |
요소의 삭제는 delete 명령을 사용할 수 있지만 delete명령은 내용만 삭제되고 배열의 크기는 변경되지 않습니다. 배열의 크기까지 변경하려면 splice메서드를 이용해야 합니다.
|
// 삭제 : 요소를 지우지만 자리는 남겨 둡니다. 즉, 배열의 길이는 변하지 않습니다.
delete ar[5];
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
// 배열.splice(시작인덱스, 지울갯수[,교체할배열항목[, ...]]);
ar.splice(5,3);
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
|
다음은 실행 결과 입니다.
| object(9개) : 밤,배,포도,사과,대추,,,,다래 object(6개) : 밤,배,포도,사과,대추,다래 |
ex02.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript Array</title>
<script>
let ar = ["밤","배","감","사과","대추"];
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
document.write(`요소의 개수(length 속성) : ${ar.length}개<br>`);
// 첨자를 이용하여 개별요소에 접근한다.(첨자는 0부터 시작한다.)
document.write(`1번 요소 접근 : ${ar[0]}<br>`);
document.write(`2번 요소 접근 : ${ar[1]}<br>`);
document.write(`3번 요소 접근 : ${ar[2]}<br>`);
document.write(`4번 요소 접근 : ${ar[3]}<br>`);
document.write(`5번 요소 접근 : ${ar[4]}<br>`);
// 첨자의 범위를 넘어가도 에러는 아니다.
document.write(`6번 요소접근 : ${ar[5]}<br>`);
// 값 변경
ar[2] = '포도';
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
// 값 추가
ar[5] = '딸기';
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
// 중간에 undefined가 삽입됨
ar[8] = '다래';
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
document.write(`${ar[5]} ${ar[6]} ${ar[7]} ${ar[8]} <br>`);
// 삭제 : 요소를 지우지만 자리는 남겨 둡니다. 즉, 배열의 길이는 변하지 않습니다.
delete ar[5];
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
// 배열.splice(시작인덱스, 지울갯수[,교체할배열항목[, ...]]);
ar.splice(5,3);
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 배열 unshift(), shift(), push(), pop() (1) | 2024.10.23 |
|---|---|
| [JavaScript] 배열 요소의 반복(for, for ~ in, for ~ of, forEach) (0) | 2024.10.23 |
| [JavaScript] 배열 생성하기 (0) | 2024.10.23 |
| [JavaScript] 정적 타입 (Static Typing) & 동적 타입 (Dynamic Typing) (2) | 2024.10.23 |
| [JavaScript] 순수 함수 & 비 순수 함수 & 고차함수 (1) | 2024.10.18 |
