j24. 자바스크립트 배열

자바스크립트 배열

자바스크립트 배열 (JavaScript Arrays) 은 하나의 변수 (a single variable) 에 여러개의 값 (multiple values) 을 저장할 때 사용됩니다.

<p id="myRoom1"></p>

<script>
var myRoom2 = ["desk", "bed", "bookshelf"];
document.getElementById("myRoom1").innerHTML = myRoom2[0];
</script>

---

배열 (array) 은 한번에 하나 이상의 값 (value) 을 가질 수 있는 특별한 변수 입니다.

위의 예에서 myRoom2 라는 하나의 변수에 여러개의 항목 즉, desk, bed, bookshelf 등을 저장할 수 있었습니다.

이와 같이 배열 (array) 은 하나의 이름에 여러개의 값 들을 담을 수 있고, 이들 값 들에 인덱스 번호 (index number) 를 참조하여 접근 (access) 할 수 있습니다.

---

자바스크립트 배열 (JavaScript Array) 을 생성하는 방법은 배열 이름 (array literal) 을 사용하는 것입니다.

var array-name = [item1, item2, ... , item-N];
var myRoom2 = ["desk", "bed", "bookshelf"];

---

다른 방법으로는 자바스크립트 키워드 (JavaScript Keyword) new 를 사용하여, 배열을 생성하고 그 안에 값을 할당하는 방법이 있습니다.

var myRoom2 = new Array("desk", "bed", "bookshelf")

위의 두가지 방법은 완전히 동일합니다. 따라서 new Array() 를 사용할 필요가 없습니다.

단순한 것이 읽기도 좋고 실행 속도도 좋으니, 첫번째 배열 이름 (array literal) 을 바로 붙이는 방법을 사용합니다.

---

배열의 요소에 접근하려면 인덱스 번호 (index number) 를 사용합니다.

myRoom2 배열의 첫번째 요소에 접근하려면 

var things = myRoom2[0];  //배열의 첫번째 요소, "desk" 가 변수 things 에 담길 것입니다.

---

myRoom2 배열의 첫번째 요소의 값을 바꾸려면,

myRoom2[0] = "chair";

배열은 0 부터 시작합니다. [0] 은 배열의 첫번째 요소를 의미합니다.

---

하나의 배열 안에 다양한 객체 (Different Objects) 을 가질 수 있습니다.

그리고 자바스크립트 변수 (JavaScript variables) 도 객체가 될수 있고, 배열도 또한 특별한 형태의 객체 입니다.

결과적으로, 하나의 배열 내에, 여러개의 다른 타입의 변수 들을 가질 수 있습니다.

즉, 하나의 배열내에 객체 들을 갖을 수도 있고, 함수들을 갖기도 하고, 아니면 다른 배열 들을 가질 수도 있습니다.

myRoom3[0] = Math.sqrt(9);	//9의 제곱근 값을 배열의 첫번째 요소로 할당합니다.
myRoom3[2] = myRoom2;	//다른 배열을 배열의 요소로 갖습니다.

---

배열은 자신의 "요소 (elements)" 에 접근하기 위해 번호 (numbers) 를 사용합니다.

var myRoom2 = ["desk", "bed", "bookshelf"];
myRoom2[0];

위의 예에서 myRoom2[0] 은 "desk" 를 반환할 것입니다.

---

반면 객체는 자신의 "멤버 (members)" 에 접근하기 위해 이름 (names) 을 사용합니다.

var myDesk = {name:"doubleDesk", legs:4, height:80};
myDesk.name;

위의 예에서 myDesk.name 은 "doubleDesk" 을 반환 할 것입니다.

---

자바스크립트 배열의 강점은 내장된 배열 속성과 함수 들을 사용할 수 있다는 것 입니다.

var myNum = myRoom2.length;         //length 속성으로 myRoom2 배열의 요소의 숫자를 구합니다. 여기에서는 3이 될 것입니다.
var myOrder = myRoom2.sort();         //sort() 메서드로 myRoom2 배열의 요소를 알파벳 순서로 정렬합니다.

---

배열에 새로운 요소 (a new element) 를 추가하는 방법은 push 메서드 를 사용하는 것입니다.

var myRoom2 = ["desk", "bed", "bookshelf"];
myRoom2.push("chair");                //myRoom2 배열에 새로운 요소 "chair" 를 추가하였습니다.

한편, 배열에 새로운 요소를 추가할 때 length 속성을 사용할 수 도 있습니다.

var myRoom2 = ["desk", "bed", "bookshelf"];
myRoom2[myRoom2.length] = "chair";

---

기본형 for loop 구문을 사용하여 배열의 요소를 순환 (loop) 합니다.

배열의 요소를 순환 (루프, loop) 하는 방법은 "for 루프" 를 사용하는 것이 가장 좋습니다.

<p>기본형 for loop 구문을 사용하여 배열의 요소를 순환 (loop) 합니다.</p>

<button onclick="myRoomFunction()">배열의 요소를 모두 나열합니다.</button>

<p id="myRoom5"></p>

<script>
function myRoomFunction() {
var i;
var text = "<ul>";
var myRoom6 = ["desk", "bed", "bookshelf", "chair"];
for (i = 0; i < myRoom6.length; i++) {
text += "<li>" + myRoom6[i] + "</li>";
}
text += "</ul>";
document.getElementById("myRoom5").innerHTML = text;
}
</script>

---

다수의 프로그래밍 언어들은 배열에 이름으로 인덱스 (indexes, 색인) 를 붙이는 것을 지원합니다.

이름으로 인덱스를 붙인 배열 들을 연관배열 (associative  array) 또는 해시 (hashes) 라고 합니다.

그런데 자바스크립트 에서는 이름으로 인덱스를 붙인 배열은 지원하지 않습니다.

자바스크립트에서, 배열은 항상 숫자로 인덱스를 사용해야 합니다.

var myRoom6 = [];
myRoom6[0] = "desk";
myRoom6[1] = "bed";
myRoom6[2] = "bookshelf";        //자바스크립트 에서는 숫자 인덱스를 사용하여 배열에 접근합니다.
var myLen = myRoom6.length;         // myRoom6.length 은 배열요소의 개수 3을 반환합니다.
var myFirst = myRoom6[0];             //myRoom6[0] 은 "desk" 를 반환합니다.

자바스크립트에서 만일, 이름으로 인덱스를 붙이면, 자바스크립트는 이 배열을, 일반 객체로 전환할 것입니다.

이렇게 되면, 배열 메서드나 속성은 제대로 작동하지 않게 되므로 유의해야 합니다.

---

자바스크립트 에서는, 배열은 숫자 인덱스를 사용합니다.

반면 자바스크립트에서, 객체 (objects) 는 이름을 갖는 인덱스를 사용합니다.

따라서 배열은, 숫자 인덱스를 사용하는, 객체의 특별한 종류라고 볼 수 있습니다.

---

자바스크립트는 인덱스에 이름을 붙이는 연관배열 (associative arrays) 형태를 사용하지 않습니다.

따라서 문자열로 각 요소에 이름을 붙이고 싶을 때는 객체 (objects) 를 사용합니다.

반면, 숫자로 각 요소를 사용하려고 할 경우에는 배열 (arrays) 을 사용합니다.

---

가급적 new Array() 로 배열을 생성하는 방법은 피하길 바랍니다.

자바스크립트의 내장된 배열 생성자 (built-in array constructor) 인 new Array() 는 사용할 필요가 없습니다.

대신에 대괄호 [] 를 사용하기 바랍니다.

These two different statements both create a new empty array named points:

var myArray = new Array(1, 2, 3, 4, 5, 6);
var myArray = [1, 2, 3, 4, 5, 6];

위의 두개의 배열 모두 6개의 숫자를 갖는 새로운 배열을 생성 합니다만 아래 쪽으로 사용하길 권고합니다.

---

그 이유는 new 키워드가 코드를 혼란 스럽게 할 수 있기 때문입니다. 즉, new 키워드 가 원하지 않았던 결과를 생성할 때가 있습니다.

var myArray2 = new Array(100, 200, 300);  //3개의 요소를 갖는 배열 하나가 생성됩니다.
var myArray2 = new Array(100);       //이 경우에는 정의되지 않은 요소 (undefined elements) 100 개를 갖는 배열이 생성됩니다.

---

new Array(100) 을 사용한 경우, "100" 이라는 값이 입력된 것이 아니라, 100 개의 요소를 갖는 배열이 생성됩니다.

<p>new Array(100) 을 사용한 경우, "100" 이라는 값이 입력된 것이 아니라, 100 개의 요소를 갖는 배열이 생성됩니다.</p>

<p id="myArray3"></p>

<script>
var myArray2 = new Array(100);
document.getElementById("myArray3").innerHTML = myArray2.length;
</script>

---

변수를 보고 배열인지 아닌지 어떻게 알 수 있을 까요?

문제는 자바스크립트 typeof 연산자 (JavaScript operator typeof) 는 배열을 담고 있는 변수에 대해, "객체, object" 라고 반환합니다.

typeof 연산자 (typeof operator) 는 자바스크립트 배열도 하나의 객체 이기 때문에 "객체, object"를 반환하는 것입니다.

첫번째 방법은, 자바스크립트 표준 (ECMAScript 5) 으로 Array.isArray() 라는 새로운 메서드를 만들어 놓았습니다.

var myArray = ["a", "b", "c", "d"];
Array.isArray(myArray);

그런데 이 자바스크립트 표준 (ECMAScript 5) 이 오래된 브라우저에서는 작동하지 않는 문제가 또 있습니다.

---

instanceof 연산자 (operator) 를 사용하여, "Array" 라는 단어가 객체의 프로토타입 (object prototype) 에 포함되어 있는지를 조사하여, 포함된 경우 "true" 를 반환합니다.

그래서 instanceof 연산자 (instanceof operator) 를 사용하면, 주어진 생성자 (a given constructor) 로 생성된 객체 (an object) 이면 true 를 반환해 주게 됩니다.

<p>instanceof 연산자 (operator) 를 사용하여, "Array" 라는 단어가 객체의 프로토타입 (object prototype) 에 포함되어 있는지를 조사하여, 포함된 경우 "true" 를 반환합니다.</p>

<p id="myInstanceof1"></p>

<script>
var myInstanceof2 = ["a", "b", "c", "d"];
document.getElementById("myInstanceof1").innerHTML = myInstanceof2 instanceof Array;
</script>

---

[광고] Udemy 동영상 강의로 보기