JavaScript 입문 : 객체 - 배열 (Array) 기본 (1) - 기본형, 순서, 배열안 배역, length(), push(), unshift()

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

이제 객체 (Object)에 대해 공부를 해 볼 시간입니다. 객체 즉 어떤 목적이 되는 대상은 배열(Array), 함수(Function) 그리고 배열이나 함수가 아닌 객체로 나쥘 수 있다고 합니다. 

 

먼저 배열에 대해 공부해 보도록 합니다. 

 

▒ 배열 (Array) 기본

 

배열은 말 그대로 배분해서 나열했다는 의미입니다. 배열의 기본은 대괄호 [     ]를 사용하는데 있습니다. 책에서는 변수 선언할 때 상수인 const를 사용하는군요. 

 

1. 기본형

 

즉, 기본형은 다음과 같이 나타냅니다. 

 

const 변수명 = [ 'A', 'B', 'C' ] ;

 

그럼 기본 사용방법에 대해 알아보도록 하죠. 다음과 같이 동물을 나타낼 떼 각각 변수로 선언할 수 있습니다.

이는 동물이 추가될 때마다 변수를 계속 추가해야만 하기 때문에 비효율적입니다. 이럴경우 배열(Array)를 사용합니다. 

 

2. 배열의 순서

 

이제는 배열의 순서를 지정해서 불러올 수 있습니다. 지난 시간에도 항상 언급했듯이 코딩에서 순서는 1이 아닌 0부터 시작합니다. 즉, 호랑이의 순서는 0번째입니다. 

 

이런 순서면 개의 순서는 2번째 순서입니다. 다음을 참조하세요. 2번째 순서인 개를 console.log로 불러 왔습니다.

 

3. 배열안의 배열 

 

배열안에다 배열을 구성할 수 있습니다.  다음 예를 보도록 하지요.

arrayArray 변수의 1번째 Index는 [3, 4, 5] 인게 확인이 됩니다. 그러면 3 만 출력할 수 있을까요? 이 부부은 배열을 끝내고 시도해 봐야겠습니다. arrayArray[ 1[0] ] 이런식은 안되네요...

 

4. 요소 (Element) 개수 : .length

 

배열안에 있는 항목 하나하나를 요소 (Element)라고 부릅니다. 이 요소의 개수를 셀때 .length를 사용합니다. 배열안에 4개의 요소가 있습니다. 다음과 같이 활용합니다. 

여기서 하나 발견할 수 있는 규칙이 있습니다. Index 0을 찾는거는 쉽습니다. 바로 num[0]; 하면 됩니다. 하지만 마지막 Index는 어떻게 찾을까요?

 

5. 마지막 Index 찾기

 

찾는 규칙은 index의 마지막 내용은 총개수의 하나가 모자릅니다. 즉,

 

index 마지막 내용 = 변수.length - 1

 

로 나타낼 수 있습니다. 상당히 많은 배열의 개수가 적용될 때 마지막 Index를 찾기 위한 규칙으로 보면 됩니다. '3'을 출력하기 위한 방법은 다음과 같이 나타낼 수 있습니다. 

6.  요소(Element) 추가 

 

배열안에 있는 요소를 추가할 수도 있습니다. 변수명에 원하는 Index 번호를 사용하면 됩니다. 예를 들어 보죠.

 

1부터 4까지 있는 배열에 마지막 Index에 'end'라고 추가해 보죠.

그럼 맨 앞에 '0'을 문자열로 추가하고 싶군요. 다음과 같은줄 알았는데 추가가 아니라 수정이 되었습니다. 

 

수정이 되지 않고 배열안 맨 앞으로 추가하고 싶을때는 .unshift(  ) 함수를 사용합니다. 

맨 뒤에 추가하는 방법은 length - 1 외에 .push(  ) 함수를 더 많이 사용한다고 합니다. 의 letter 변수 마지막에 .push(  )를 사용하여 'e'라는 글씨를 반영하겠습니다.

 

---

 

그럼 다시 배열안의 배열에서 3을 나타내는 방법을 고민해 봅시다. 일단 다른 방법이 있을 수 있지만 현재의 내 실력으로는 변수명을 2개 만들고 지정하면 됩니다. 다음과 같습니다.