[JS-중급편-OOP] 2.배열(Array)

 

 

종이에 목록을 적고 있다고 가정해 봅시다. 식료품들이라고 부릅시다.

 

이제 종이에 0으로 시작하는 번호 목록과 원하는 식료품들 이름을 작성합니다.

 

 

위 그림처럼 단순히 사물의 목록을 작성한 건데, 사실 위 그림이 배열의 실제 사례가 됩니다.

 

식료품이라는 종이가 당신의 배열이 될 것입니다.

 

구입해야 하는 식료품 항목을 배열 값이라고 합니다.

 

이 튜토리얼에서는 식료품 쇼핑을 통해 자바스크립트에서 가장 일반적인 빌트인 타입인 배열(Array)에 대해 알아보겠습니다.

 

 

배열 만들기

 

배열을 만드는 가장 쉬운 방법은 브래킷을 사용하는 것입니다.

 

다음은 빈 배열로 초기화된 groceries 변수입니다.

 

var groceries = [];

 

왼쪽에는 변수 이름이 있고 오른쪽에는 이 변수를 빈 배열로 초기화하는 한 쌍의 브래킷이 있습니다.

 

배열을 만들기 위한 이 브래킷 방식은 배열 리터럴 표기법으로 더 잘 알려져 있습니다.

 

처음부터 일부 항목이 포함된 배열을 만들고 싶을 것입니다.

 

비어 있지 않은 배열을 만들려면 원하는 항목을 괄호 안에 넣고 쉼표로 구분합니다.

 

var groceries = ["Milk", "Eggs", "Frosted Flakes", "Salami", "Juice"];

 

이제 내 groceries 배열에 우유, 계란, 프로스트 플레이크, 살라미, 주스가 포함되어 있습니다.

 

쉼표가 없으면 대신 하나의 거대한 항목만 갖게 됩니다.

 

이제 배열을 선언하는 방법을 배웠습니다.

 

데이터를 저장하고 작업하는 데 실제로 어떻게 사용할 수 있는지 살펴보겠습니다.

 

 

 

배열 값에 접근하기

 

배열의 좋은 점 중 하나는 배열에 쉽게 액세스 할 수 있을 뿐만 아니라 배열 값에도 쉽게 액세스 할 수 있다는 것입니다.

 

식료품 목록에서 항목을 강조 표시하는 것과 유사합니다.

 

 

 

알아야 할 것은 개별 항목에 액세스하기 위한 절차입니다.

 

배열의 항목에는 0으로 시작하는 숫자가 할당됩니다.

 

위의 예에서 Milk 값은 0, Eggs 값은 1, Frosted Flakes 값은 2로 지정됩니다.

 

공식 용어로 인덱스 값이라고합니다.

 

식료품 배열이 다음과 같이 선언되었다고 가정 해 보겠습니다.

 

var groceries = ["Milk", "Eggs", "Frosted Flakes", "Salami", "Juice"];

 

원하는 항목에 액세스하려면 그 항목의 인덱스 값을 전달하기만 하면 됩니다.

 

groceries[1]

 

인덱스 값은 브래킷을 사용하여 배열로 전달됩니다.

 

이 예에서는 인덱스 위치 1을 참조하므로 Eggs 값을 참조합니다.

 

2를 넣으면 Frosted Flakes를 반환합니다.

 

더 이상 값이 남지 않을 때까지 인덱스 값을 계속 전달할 수 있습니다.

 

인덱스 값으로 사용할 수있는 숫자 범위는 배열 길이보다 하나 적습니다.

 

그 이유는 앞의 다이어그램에서 볼 수 있듯이 인덱스 값이 0으로 시작하기 때문입니다.

 

배열에 5 개의 항목 만 있는 경우 grocery[6] 또는 grocery[5]를 표시하려고하면 undefined 메시지가 표시됩니다.

 

한 단계 더 깊숙이 나가보면, 실제 상황에서는 각 항목에 개별적으로 액세스하는 대신 프로그래밍 방식으로 배열을 액세스하는 것을 원할 겁니다.

 

이전에 배운 for 루프를 사용하여 알아봅시다.

 

for (var i = 0; i < groceries.length; i++) {
	var item = groceries[i];
}

 

루프의 범위는 0에서 시작하여 배열의 전체 길이 (length 속성에 의해 반환 됨)에서 한개 전에 끝납니다.

 

이것은 앞서 언급했듯이 배열 인덱스 값이 0에서 시작하여 배열 길이에 대해 반환 된 값의 1을 뺀 값으로 루프가 지속되기 때문입니다.

 

그리고 예에 있는, length 속성은 배열에있는 모든 항목의 개수를 반환합니다!

 

 

배열에 항목 추가하기

 

배열을 맨 처음 초기화한 상태로 두는 경우는 거의 없습니다.

 

항목을 추가하고 싶을 것입니다.

 

배열에 항목을 추가하려면 push 메서드를 사용합니다.

 

groceries.push("Cookies");

 

push 메서드는 배열에서 직접 호출되며 추가 할 데이터를 전달합니다.

 

push 메소드를 사용하면 새로 추가 된 데이터가 항상 배열의 끝에 있습니다.

 

예를 들어, 초기 배열에서 위 코드를 실행하면 식료품 배열 끝에 쿠키가 추가 된 것을 볼 수 있습니다.

 

 

 

배열의 시작 부분에 데이터를 추가하려면 unshift 메서드를 사용합니다.

 

groceries.unshift("Bananas");

 

데이터가 배열의 시작 부분에 추가되면 새로 삽입된 데이터 때문에 모든 기존 항목의 색인 값이 1씩 증가합니다.

 

 

 

 

그 이유는 배열의 첫 번째 항목의 인덱스 값이 항상 0이기 때문입니다.

 

이는 원래 0 번째 항목이 차지한 공간이 새 데이터를 위한 공간을 만들기 위해 자신과 그 아래의 모든 항목을 밀어 내야 함을 의미합니다.

 

push 와 unshift 메서드는 배열에 신규 아이템을 추가할 때 쓰는데, 이 함수가 리턴하는 게 있습니다.

 

새로운 배열의 길이를 리턴합니다.

 

alert(groceries.push("Cookies")); // returns 6

 

위 코드처럼 push와 unshift가 리턴하는 값이 새 배열의 길이라는 걸 꼭 기억해 둡시다.

 

사실 꽤 유용하지는 않지만요.

 

 

 

 

 

배열에서 아이템 삭제하기

 

배열에서 항목을 제거하려면 pop 이나 shift 메소드를 사용할 수 있습니다.

 

pop 메서드는 배열에서 마지막 항목을 제거하고 제거된 마지막 항목을 리턴합니다.

 

var lastItem = groceries.pop();

 

shift 메서드는 배열의 반대쪽 끝에서 pop 메서드와 동일한 작업을 수행합니다.

 

마지막 항목이 제거되고 반환되는 대신 shift 메서드는 배열에서 첫 번째 항목을 제거하고 반환합니다.

 

var firstItem = groceries.shift();

 

배열의 시작 부분에서 항목이 제거되면 나머지 모든 요소의 인덱스 위치가 1 씩 감소하여 간격을 채 웁니다.

 

 

 

unshift 나 push를 사용하여 배열에 항목을 추가 할 때 해당 메서드 호출에서 반환 된 값은 배열의 새 길이입니다.

 

하지만 pop 이나 shift 메서드를 호출 할 때는 리턴항목이 다릅니다.

 

shift 나 pop을 사용할때 반환된 값은 제거 된 항목 자체입니다!

 

 

배열에서 항목 찾기

배열 내부의 항목을 찾으려면 indexOf 및 lastIndexOf라는 두 가지 기본 제공 메서드가 있습니다. 

 

이러한 메서드는 배열을 스캔하고 일치하는 요소의 인덱스 위치를 반환하는 방식으로 작동합니다.

 

indexOf 메서드는 검색중인 항목의 첫 번째 항목을 반환합니다.

 

var groceries =["milk", "eggs", "frosted flakes", "salami", "juice"]; 
var resultIndex = groceries.indexOf("eggs",0); 
 
alert(resultIndex); // 1

 

resultIndex 변수는 groceries 배열에 indexOf를 호출 한 결과를 저장합니다.

 

indexOf를 사용하려면 시작할 인덱스 위치와 함께 찾고있는 요소를 전달합니다.

 

groceries.indexOf("eggs",0);

 

이 경우 indexOf가 반환하는 값은 1이됩니다.

 

lastIndexOf 메서드는 사용 방법이 indexOf와 비슷하지만 요소가 발견 될 때 반환되는 내용이 약간 다릅니다. 

 

indexOf가 검색중인 요소의 첫 번째 항목을 찾는 경우 lastIndexOf는 검색중인 요소의 마지막 항목을 찾아 해당 요소의 인덱스 위치를 반환합니다.

 

배열에 없는 요소를 검색 할 때 indexOf와 lastIndexOf는 모두 -1 값을 반환합니다.

 

 

배열 합치기

 

마지막으로 할 일은 두 개의 개별 배열로 구성된 새 배열을 만드는 방법을 살펴 보는 것입니다.

 

good, bad라는 두 개의 배열이 있다고 가정 해 보겠습니다.

 

var good = ["Mario", "Luigi", "Kirby", "Yoshi"]; 
var bad = ["Bowser", "Koopa Troopa", "Goomba"];

 

이 두 배열을 하나의 배열로 결합하려면 더 크게 만들려는 배열을 골라 그 배열에서 concat 메서드를 사용하고 병합하려는 배열을 인수로 전달합니다.

 

반환되는 것은 good 배열과 bad 배열을 합친게 됩니다.

 

var goodAndBad = good.concat(bad); 
trace(goodAndBad);

 

위 예에서 concat 메서드는 새 배열을 반환하기 때문에 goodAndBad 변수는 concat 메서드의 결과를 저장하는 새로운 배열이 됩니다.

 

goodAndBad 내부 요소의 순서는 첫번째가 good 배열, 두번재가 bad 배열 순으로 합쳐졌습니다.

 

 

결론

지금까지 배열에 대해 알아햐 할것을 정리해 봤습니다.

 

배열은 자바스크립트에서 아마도 가장 자주 사용할 것입니다.

 

다음편에는 문자열 객체에 대해 알아봅시다.