[JavaScript] 참조형 - Array (배열 데이터)

Array

배열 데이터

 

 

const 키워드를 통해서 fruits 라는 변수를 만들고, 어떤 값을 할당할건데 그 값은 new 라는 키워드를 통해서 대문자 A로 시작하는 Array 라는 함수를 소괄호를 열고 닫아서 호출한다. 그랬을 때, new 라는 키워드와 함께 호출하는 함수를 생성자 함수라고 하고, 또 다르게는 자바스크립트 클래스 라고 부르는데, 그랬을 때 이 Array 함수를 호출하는 소괄호에 인수로 Apple, Banana, Cherry 라는 텍스트를 순서대로 쉼표로 구분해서 추가해보도록 한다. 그리고나서 만들어진 이 fruits 라는 데이터를 역시 console.log를 통해서 출력을 하고 저장하게 되면, fruits 라는 데이터는 총 3개의 아이템을 가지고 있는 상태이고, 그 내부에는 0번째, 1번째, 2번째 순서대로 과일명이 들어있다고 확인이 된다.

 

 

그리고 그것은 대괄호로 묶여져있고, 그래서 이렇게 new 라는 키워드와 Array 라는 함수를 통해서 총 3개의 문자 데이터를 가지고 있는 배열 데이터를 fruits 라는 이름으로 만들었다. 이렇게 new 라는 키워드로 배열 데이터를 만드는 것이 기본이긴 한데, 이것이 어디까지나 조금 불편한 문법이기 때문에 이 부분에 저 3개의 과일들 문자 데이터 부분을 잘라서 이 Array 함수를 호출하는 것 대신에 대괄호 [ ] 를 사용해서 그 내부에 잘라낸 데이터들을 붙여넣는다. 그러면, 배열을 만드는 방식을 대괄호 [ ] 라는 기호를 통해서 만들었는데 이것을 '리터럴' 방식으로 데이터를 만들었다고 이야기 한다.

 

 

앞서서 백틱 기호를 사용하는 템플릿 리터럴에 대해서 봤었다. 이렇게 대괄호를 사용하는 것을 '배열 (Array) 리터럴' 이라고 부른다. 그래서 기호를 통해서 데이터를 만들면 훨씬 더 간편하게 생성할 수 있다.역시 동일하게 데이터가 출력이 된다. 각각의 문자 데이터에 콘솔에서 볼 수 있는 것 처럼 숫자가 부여되어 있다. 숫자를 통해서 각각 데이터를 조회할 수 있다. 대표적으로 console.log(furits[1]) 데이터에 대괄호를 열고 닫아서 숫자를 1 이라고 작성해보면 1인 바나나가 뜬다. 대괄호를 통해서 숫자 1을 작성하고 저장하게 되면 콘솔창에서 Banana 라는 문자데이터가 출력된다.

 

이렇게 배열 데이터에서 대괄호를 열고 닫아서 숫자로 어떤 특정 데이터를 조회하는 것을 배열 데이터를 인덱싱 한다고 이야기 한다. 대괄호를 작성하는 표기법은 대괄호 표기법 이라고 한다. console.log(furits[1]) 대괄호 표기법으로 첫 번째 아이템인 Banana를 인덱싱 한 것이고, 그것이 콘솔에 출력된 것이다. 그리고 배열 안에 들어있는 각각의 데이터를 배열의 아이템 이라고 부르기도 하고, 혹은 배열의 요소 라고 부르기도 한다. 이 요소는 영어로 Array의 Element 이다. 그래서 아이템과 요소라는 단어도 같이 기억을 해두면 좋을 것 같다.

 

 

숫자가 0부터 시작하니까 Zero based numbering 0부터 번호 매기기 개념으로 아이템이 나열되어져 있는데 마지막 length 속성이 있다. 값이 3으로 입력이 되어져있는데 length는 배열의 길이를 의미한다. 현재 fruits 라는 배열에는 총 3개의 아이템이 들어있다는 것이 length 라는 속성에 명시되어져 있다. 그래서 이 부분의 내용은 fruits.length 라는 점표기법으로 사용하게 되면, 이 배열에 길이를 확인할 수 있다. 저장해보면, 숫자 데이터로 3이 출력되는 것을 볼 수 있다. 그래서 배열 데이터가 어떻게 생긴지를 코드 상에서 당장 볼 수가 없어도 이렇게 length 라는 속성으로 확인을 해보면 숫자를 알 수 있다.

 

 

이 length는 아이템이 총 몇 개가 들어있는지 확인하는 개념이기 때문에 이렇게 숫자 3이 반환이 되는데, fruits의 마지막 아이템을 조회하고 싶다면 Cherry 라는 데이터가 콘솔에 출력되게 하기 위해, fruits 라는 데이터에서 특정 번호로 인덱싱해서 숫자 2가 들어가야 Cherry라는 데이터가 출력이 될 것이다. 그런데, 만약에 fruits 라는 데이터를 당장 눈으로 볼 수가 없고, 그래서 fruits 라는 데이터가 어디에선가 만들어져 있고 당장 눈에 보이지 않는데 그 중에서 마지막 아이템을 인덱싱 하려고 할 때 쓸 수 있는 방법은 숫자 2가 들어가져 있는 부분에서 fruits.length - 1 을 해주는 것이다. 그러면 fruits의 length 값은 숫자 3인 상태고 거기다 - 1을 하니까 결과적으로 2번의 숫자로 인덱싱이 가능해지는 것이다. 해당하는 내용을 저장하고, 확인해보면 동일하게 Cherry 라는 문자가 출력이 된다.

 

 

그래서 length 값에서 -1을 하게 되면 fruits 라는 배열의 길이가 얼만지 모르더라도 마지막 아이템을 조회할 수 있고, 반대로 첫번째 아이템을 조회하려면 단순하게 숫자 0만 적어주면 된다. 당연하게도 배열의 길이와 상관없이 첫 번째 아이템은 0번째니까 말이다. 배열 데이터는 우리가 사용할 수 있는 다양한 자바스크립트 데이터를 이렇게 쉼표로 구분해서, 대괄호로 묶어놓은 형태의 데이터를 말하고, 그 안에는 각각의 자바스크립트 데이터가 0번째 부터 쉼표로 구분되서 나열이 되어져 있다. 그리고 나열된 그 각각의 배열 아이템을 조회할 때 Zero-Based-Numbering을 기준으로 해서 대괄호 표기법으로 숫자를 적어주면 되는 것이고, 그 배열에 아이템이 몇 개 들어있는지 확인하기 위해서는 length 라는 속성을 사용할 수 있다.