[codecademy JavaScript] 6장. Arrays

Arrays(배열)

데이터를 구성하고 저장하는 것은 프로그래밍의 기본 개념입니다. 배열은 데이터의 목록을 만드는 자바스크립트의 방법입니다. 배열에 문자열, 숫자 및 부울을 포함한 모든 데이터 유형을 저장할 수 있습니다. 그리고 배열에 저장된 각 항목은 번호가 매겨진 위치를 할당받습니다.

 

---

 

<배열 만들기>

배열은 항목들을 대괄호 ‘[]’로 묶어 만듭니다. 위에서 배열은 모든 데이터 유형을 저장할 수 있다고 배웠습니다.

이렇게 배열은 여러 데이터 유형을 함께 저장할 수 있습니다. 배열 내부의 각 항목을 요소라고 부릅니다. 그리고 배열을 변수에 저장할 수도 있습니다.

 

<요소에 접근하기>

배열의 각 요소는 인덱스라는 번호가 매겨진 위치를 할당받습니다. 인덱스를 이용하여 각 요소에 접근할 수 있습니다. 이때 자바스크립트에서 배열은 0부터 시작한다는 것을 알아두세요. 

만약 존재하지 않는 인덱스에 접근한다면 undefined를 반환할 것입니다. 배열의 요소에 접근하여 해당 값을 수정할 수 있습니다. 또한 배열 뿐 아니라, 문자열에서도 인덱스를 이용하여 각 문자에 접근할 수 있습니다. 

 

<let과 const>

배열은 let과 const 키워드 모두 사용하여 선언할 수 있습니다.

앞서 배웠듯, const 키워드로 선언된 변수는 재할당이 불가능합니다. 그러나 배열의 요소는 변경할 수 있습니다. let 키워드로 선언된 변수에는 재할당도 가능하고, 배열의 요소도 변경할 수 있습니다. const로 선언된 배열에 재할당하면 TypeError가 발생합니다.

위의 예시에서는 let과 const 키워드를 사용하여 각각의 배열을 생성했습니다. 4행과 7행을 보면, let 키워드로 생성된 배열 condiments는 배열의 요소를 변경하거나, 변수에 재할당할 수 있는 것을 알 수 있습니다. 10행에서 보면 let 키워드와 마찬가지로 배열의 요소를 변경하는 것은 const 키워드로 생성된 배열 utensils도 가능합니다. 그러나 12, 13행에서 변수 utensils에 재할당하면 TypeError가 발생합니다.

 

<속성과 메서드>

.length 속성

 

배열의 기본 제공 속성 중 하나는 .length이며, 길이는 배열의 요소 개수를 의미합니다. .length 속성을 이용하여 다음 장에서 배울 for문을 통해 배열의 요소에 쉽게 접근할 수 있으니 잘 알아두는 것이 좋습니다.

 

 

.push() 메서드

 

배열에 요소를 추가하고 싶다면 .push() 메서드를 사용할 수 있습니다. .push()는 배열 끝에 요소를 추가하는 함수입니다. .push()는 하나 또는 콤마로 구분된 여러 개의 인수를 가집니다.이 함수는 초기 배열을 변경하기 때문에 파괴적 배열 메서드라고 불립니다.

 

 

.pop() 메서드

 

.pop() 메서드는 배열의 가장 마지막 항목을 제거합니다. .pop()은 인수를 가지지 않으며, 마지막 요소의 값을 반환값으로 가지는 함수입니다. .push()와 마찬가지로 초기 배열을 변형하는 파괴적 배열 메서드입니다.

 

 

.push(), .pop() 메서드 뿐 아니라 배열을 쉽게 다룰 수 있는 다양한 메서드가 존재합니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array 에서 다른 메서드의 사용법을 배워보세요.

 

 

<배열과 함수>

함수 내부에서 배열을 바꾸면 어떻게 될까요?

 

위에 예시에서 changeArr() 함수에서는 인수로 받은 배열의 3번째 요소 값을 'MUTATED'로 바꿉니다. 7행에서 changeArr에 배열 concept를 전달하였고, 8행에서 배열을 출력한 결과 3번째 요소가 'MUTATED'로 바뀐 것을 알 수 있습니다. 이렇듯 배열을 함수에 전달하면, 함수 내부에서의 배열 변형이 외부에서도 적용된다는 것을 알 수 있습니다. 그 이유는 함수에 전달한 것이 가변 메모리에 저장된 배열의 위치이기 때문입니다.

 

 

<중첩 배열>

배열 안에 다른 배열이 저장될 수 있습니다. 이러한 배열을 중첩 배열이라고도 합니다.

 

배열 numberClusters은 중첩된 배열로 2개의 요소를 가진 배열 3개를 요소로 가지고 있습니다. 중첩된 배열의 요소에 접근하기 위해서는 두 개의 대괄호 ‘[]’가 필요합니다. 첫 번째 괄호는 numberClusters의 요소에 접근하고, 두 번째 괄호는 첫 번째 괄호에서 접근한 요소의 배열에 접근합니다. 3행에서 변수 target은 numberClusters의 2번째 요소인 내부 배열에 첫 번째 요소에 접근합니다. 따라서 4행에서 콘솔에 6이 출력됩니다.

 

---

Quiz

 

1. 배열에 존재하지 않는 인덱스에 접근한다면 (     )를 반환합니다.

2. const 키워드를 사용하면 (    )은 불가능하지만, (    )은 가능하다.

3. 배열의 마지막에 요소를 추가하려면 (     ) 메서드를, 배열의 마지막 요소를 제거하려면 (     ) 메서드를 사용한다.

4. 배열의 마지막에 ‘Seoul’을 추가하는 함수를 만들고, city에 그 함수를 적용하세요.

---

Corner React1

Editor: 이조