[자바스크립트] - Array 배열 ★

배열(Array)★★★★★

변수에는 데이터가 하나만 저장된다. 하지만 하나의 변수에 여러 데이터를 묶어 저장하고자 할 때 '배열(Array)'을 사용한다.
배열은 초콜릿 상자처럼 초콜렛이 몇 개든 상관없이 하나의 박스에 담은 것과 같다. 
즉 변수 안에 배열이 담겨 있으면 배열 안에는 데이터가 수없이 나열될 수 있다.
배열에는 어떤 데이터든지 넣을 수 있고 배열 안에 배열도 들어갈 수 있다. 변수 안에 함수 넣으면 그것도 넣을 수 있다. 객체도 들어갈 수 있다. 

     
배열을 표기할 때 보통 [ ]를 이용하여 표기한다. 
배열 안에 들어있는 데이터는 순서대로 '인덱스 번호'를 부여받는다. 
'인덱스 번호'는 0부터 부여받으며 마지막 데이터까지 부여받는다. 


[ 기본형 ]

1. var 참조변수 = [데이터1, 데이터2, 데이터3...];
 : 참조 변수안에 데이터가 담긴 배열을 저장함. 

 var arr1 = [30, "김땡땡", true];

2. 참조변수[0];
: 참조 변수의 배열 안에 인덱스 번호 '0'번의 데이터를 불러오겠다 / 필요한 데이터를 뽑아낼 때 사용 / 필요한 데이터의 순번을 [ ] 안에 넣어준다. 

var data1 = arr1[0];

3. var [변수1, 변수2] = [데이터1, 데이터2];
: Destructuring 문법/ 여러 개의 변수에 데이터를 순서대로 할당하는 문법/  데이터1은 변수1에 들어가고 데이터2              는 변수2에 들어간다. (순차적으로 들어감) ES6 버전에서 새로 생긴 최신 문법. 

---

변수 arr1에 30, 김땡땡, true 값을 넣어줬다. 

그 뒤 변수 data1에는 arr[1]로 arr1의 배열 안에 있는 두번째 김땡땡 데이터를 불러왔다. 

배열 안에 30이 인덱스 번호 0 / 김땡땡이 인덱스 번호 1 / true가 인덱스 번호 3이 되는 것. 

 

*arr1의 배열 안에 있는 인덱스 번호 0을 데리고와서 변수 data1에 '복사'저장한 것이다. 

= arr1에서 인덱스 번호 0 번의 데이터가 data1로 빠져나간게 아니라는 이야기 

---

예제) 배열은 for문과 자주 같이 쓰인다. ( 이 방법  많이 쓴다.)

 

//for문과 자주 같이 쓰인다.

      var arr2 = ["하이", true, 10, 41, "780", "안녕", "김땡땡", false];

      //length : 배열 안의 데이터의 총 갯수

      for (var i = 0; i < arr2.length; i++) {

        document.write(arr2[i], "<br>");

      }

 

1. 변수 arr2에 하이, true, 10,41등 배열을 담아놓은 상태 

2. 반복문 for -> 변수 i의 초깃값은 0(인덱스 번호가 0번부터 부여받으니깐 초깃값 0), 만약 i가 변수 arr2의 데이터 총 갯수보다 작다면 document.write로 arr2[i]를 실행해라

3. <=를 쓰면 안된다. 0부터 시작하기때문에 

4. 데이터의 총 갯수보다 작을 때까지 document.write를 실행하는 거니깐 배열 안에 데이터들이 브라우저에 다 출력된다.

 

* length = 배열 안의 데이터의 총 갯수