배열 array는 특정 변수를 선언한 후 해당 변수에 순차적으로 여러 개의 값 data를 저장합니다.
값의 종류가 수백, 수천 개씩 많아지면 관리가 어렵습니다. 특정 변수로 값을 모으고 배열 array를 지정하여 값을 추가하거나 제거하는 등 다양한 방법으로 관리할 수 있습니다. 배열 array에 저장된 값 data들은 작성된 순서에 따라 0, 1, 2, 3 등 인덱스를 갖습니다. 배열 array의 개념을 이해하기 위해 예제 코드를 만들어 보겠습니다.
자바스크립트 array 배열 만들기
배열 array는 자바스크립트의 html 버전 태그인 <script> 태그에 대괄호 [ ] 기호를 이용해 만듭니다. 우선 html 기본 코드를 작성합니다. title은 array sample로 하겠습니다. <script> 태그에 배열되는 값을 저장할 특정 변수를 선언합니다. 변수 선언을 위해 var 키워드를 사용합니다. 변수는 animals로 하겠습니다. animals에 등호 eaual을 입력하고 대괄호 [ 를 엽니다. 이제 값을 작성합니다. 값은 " "로 문자 string 타입으로 작성하겠습니다. 값과 값의 구분은 콤마 comma , 로 합니다. 대괄호 ]를 닫고 세미콜론 ;으로 마무리합니다. 변수를 지정한다는 것은 dog, cat, bird 등 값을 그룹으로 묶어 animals라는 이름을 지정해주는 것과 같습니다.
<! DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title> array sample </title>
</head>
<body>
<script>
var animals = ["dog", "cat" , "bird"];
</script>
</body>
</html>
자바스크립트 array 값 가져와 웹페이지에 출력하기
변수를 지정해 만든 배열의 값을 불러와 사용해보겠습니다. 값을 불러와서 웹페이지에 출력하는 자바스크립트 명령의 html 버전인 document.write(변수 이름 [불러올 값의 인데스 숫자]);를 사용합니다. 인덱스 숫자는 0부터 시작합니다. 가장 먼저 작성된 값이 인덱스 0을 갖습니다. 이후 순서대로 1, 2, 3 등 인덱스를 갖습니다. 제일 처음 작성된 인덱스 0의 값 dog, 두 번째 작성된 인덱스 1의 값 cat, 세 번째 작성된 인덱스 2의 값 bird 모두 출력해보겠습니다. 별도 서식이 지정되지 않은 상태기 때문에 띄어쓰기 없이 값이 나란히 dogcatbird로 출력됩니다.
<! DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title> array sample </title>
</head>
<body>
<script>
var animals = ["dog", "cat" , "bird"];
</script>
<script>
document.write(animals [0]);
document.write(animals [1]);
document.write(animals [2]);
</script>
</body>
</html>
자바스크립트 array 값의 개수를 가져와 출력하기
변수에 저장된 값이 총 몇 개가 있는지 확인할 수 있습니다. 값의 개수를 확인하여 웹 페이지에 출력해보겠습니다. document.write(변수의 이름. length); 형식을 사용합니다. 별도의 <script> 태그에 값의 개수를 불러오는 명령을 입력하겠습니다. 실제 값의 개수 3이 출력됩니다.
<! DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title> array sample </title>
</head>
<body>
<script>
var animals = ["dog", "cat" , "bird"];
</script>
<script>
document.write(animals [0]);
document.write(animals [1]);
document.write(animals [2]);
</script>
<script>
document.write(animals.length);
</script>
</body>
</html>
자바스크립트 array에 값 추가하기
새로운 값을 추가하는 방법은 변수 이름. push('추가하려는 값'); 의 형식을 사용합니다. 값 lion과 bear를 추가하는 명령을 별도의 <script> 태그에 추가해줍니다. 추가해야 할 태그는 다음과 같습니다.
<script>
animals.push('lion');
animals.push('bear');
</script>
'코딩' 카테고리의 다른 글
| 자바스크립트 JavaScript 배열 array 이용해 반복문 Loop 만들기 (0) | 2020.09.10 |
|---|---|
| 자바스크립트 JavaScript 반복문을 위한 while , var 변수 i = 0 선언 (0) | 2020.09.09 |
| 리팩토링 - 중복 제거하여 코드 효율화하기 - this , var 키워드 활용 (0) | 2020.09.06 |
| html onclick 속성과 자바스크립트를 활용해 서식 변경 버튼 만들기 (0) | 2020.09.06 |
| JavaScript 자바스크립트 조건문 if else 기본 원리 (0) | 2020.09.06 |
댓글