자바스크립트에서 배열 다루는 방법에 대하여 알아보겠습니다.
배열은 여러항목의 컬렉션을 단일 변수에 저장할때 사용합니다.
자바스크립트의 배열은 다른 언어의 배열과는 다릅니다. 흡사 다른언어의 리스트와 더 비슷합니다.
자바스크립트는 동적타이핑 언어이므로 다음과 같이 정수, 실수, 문자열, 함수,객체 등 모든 요소를 배열의 요소로 사용가능합니다. 그리고 요소의 추가/삭제도 가능합니다.
|
[1, 3.14, '문자열', true, ()=>{alert('Hi!!');}, {name:"한사람", age:22}, [11,22,33]]
|
이제 하나하나 알아 보도록 하겠습니다.
배열만들기
자바스크립트에서는 배열을 만들때 Array객체를 이용하거나 [](대괄호)를 이용합니다.
빈 배열의 생성은 다음과 같이 합니다.
| // 빈 배열 만들기
let ar1 = new Array();
let ar2 = [];
document.write(`${typeof(ar1)}(${ar1.length}개) : ${ar1}<br>`); // object(0개) :
document.write(`${typeof(ar2)}(${ar2.length}개) : ${ar2}<br>`); // object(0개) : |
배열의 타입은 object입니다.
배열 요소의 개수는 length속성을 사용합니다.
Array객체의 생성자에 양수 1개를 지정하면 지정 요소의 개수를 가지는 배열이 만들어 집니다.
|
// 크기가 10인 배열 만들기
let ar3 = new Array(10);
document.write(`${typeof(ar3)}(${ar3.length}개) : ${ar3}<br>`); // object(10개) : ,,,,,,,,,
ar3.fill(1); // 배열 모든 요소의 값을 변경
document.write(`${typeof(ar3)}(${ar3.length}개) : ${ar3}<br>`); // object(10개) : 1,1,1,1,1,1,1,1,1,1
|
값이 빈 10개의 요소가 있는 배열이 생성되었습니다. fill()메서드를 이용하면 모든 요소에 동일한 값으로 채울 수 있습니다.
Array객체의 생성자에 값을 여러개 지정하면 지정값을 요소로하는 배열이 만들어 집니다.
|
// 초기값을 부여해서 배열 만들기
let ar4 = new Array(1, 2, 3, 4);
let ar5 = [1,2 ,3, 4];
document.write(`${typeof(ar4)}(${ar4.length}개) : ${ar4}<br>`); // object(4개) : 1,2,3,4
document.write(`${typeof(ar5)}(${ar5.length}개) : ${ar5}<br>`); // object(4개) : 1,2,3,4
|
배열의 요소에는 어떠한 값도 가능합니다. 다차원의 배열도 가능합니다.
|
// 배열의 요소는 어떤 자료형이든지 가능하다.
let ar6 = [11, '문자열', true, {name:'한사람',age:22}, function(){alert('반갑습니다.');},[1,2,3],[[1,2],[3,4]]];
document.write(`${typeof(ar6)}(${ar6.length}개) : ${ar6}<br>`);
// object(7개) : 11,문자열,true,[object Object],function(){alert('반갑습니다.');},1,2,3,1,2,3,4 |
ex01.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
|
<!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 ar1 = new Array();
let ar2 = [];
document.write(`${typeof(ar1)}(${ar1.length}개) : ${ar1}<br>`);
document.write(`${typeof(ar2)}(${ar2.length}개) : ${ar2}<br>`);
// 크기가 10인 배열 만들기
let ar3 = new Array(10);
document.write(`${typeof(ar3)}(${ar3.length}개) : ${ar3}<br>`);
ar3.fill(1); // 배열 모든 요소의 값을 변경
document.write(`${typeof(ar3)}(${ar3.length}개) : ${ar3}<br>`);
// 초기값을 부여해서 배열 만들기
let ar4 = new Array(1, 2, 3, 4);
let ar5 = [1,2 ,3, 4];
document.write(`${typeof(ar4)}(${ar4.length}개) : ${ar4}<br>`);
document.write(`${typeof(ar5)}(${ar5.length}개) : ${ar5}<br>`);
// 배열의 요소는 어떤 자료형이든지 가능하다.
let ar6 = [11, '문자열', true, {name:'한사람',age:22}, function(){alert('반갑습니다.');}];
document.write(`${typeof(ar6)}(${ar6.length}개) : ${ar6}<br>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 배열 요소의 반복(for, for ~ in, for ~ of, forEach) (0) | 2024.10.23 |
|---|---|
| [JavaScript] 배열 요소의 추가/수정/삭제 하기 (2) | 2024.10.23 |
| [JavaScript] 정적 타입 (Static Typing) & 동적 타입 (Dynamic Typing) (2) | 2024.10.23 |
| [JavaScript] 순수 함수 & 비 순수 함수 & 고차함수 (1) | 2024.10.18 |
| [JavaScript] 일급 객체 & 일급 함수 (1) | 2024.10.18 |
