배열(Array)의 선언 & 데이터 & 길이

1️⃣ 배열(Array) 이란?

자바스크립트에서 데이터를 표현하기 위한 방법으로 기본타입과 객체를 배웠다. 이걸로도 분명 많은 것들을 할 수 있다. 하지만 같은 형식의 많은 데이터를 순서대로 저장하고자 할 때는 데이터의 수만큼 변수들을 선언해줄 수밖에 없었다. 이 때 쓰는 것이 바로 배열이다. 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입이라고 기억해두시면 좋다!

 

2️⃣ 배열의 선언

숫자 1, 2, 3, 4, 5로 이루어진 배열을 선언하는 방법은 아래처럼 두 가지가 있다.

 

// 1번째 방법
const arr1 = new Array(1, 2, 3, 4, 5)

 

// 1번째 방법은 앞서 우리가 클래스를 활용해 객체를 만든 것과 똑같다. Array라는 클래스를 활용해서 객체를 만들었다고 생각하면 된다. 우리가 직접 Array라는 클래스를 선언한 적은 없지만 자바스크립트 내부적으로 이미 갖고 있는 것. 그래서 우리는 바로 사용 하기만 하면 된다.

👍// 2번째 방법

const arr2 = [1, 2, 3, 4, 5]

// 2번째 방법은 배열을 바로 만드는 방법이다. 대괄호 안에 우리가 배열로 저장할 데이터를 쭉 나열해주면 된다. 정말 간단! 그래서 배열을 만들때는 1번째보다는 2번째 방법을 많이 사용한다.

 

3️⃣ 배열 안의 데이터

배열에 있는 데이터 각각을 우리는 요소 (element) 라고 부른다. 당연히 이 요소들에 쉽게 접근해서 바로 쓸수도 있어야 한다. 객체도 속성명을 통해 해당 데이터에 쉽게 접근할 수 있었다. 배열에서는 인덱스(index) 가 객체의 속성명과 같은 역할을 해준다.

 

인덱스는 배열 안의 데이터들이 자리잡은 순서라고 생각해주면 된다. 특이한 점은 이 인덱스가 0부터 시작한다는 사실!

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

console.log(rainbowColors[0]) // o번 인덱스를 통해서 데이터에 접근. red
console.log(rainbowColors[1]) // 1번 인덱스를 통해서 데이터에 접근. orage
console.log(rainbowColors[2]) // 2번 인덱스를 통해서 데이터에 접근. yellow
console.log(rainbowColors[3]) // 3번 인덱스를 통해서 데이터에 접근. green
console.log(rainbowColors[4]) // 4번 인덱스를 통해서 데이터에 접근. blue
console.log(rainbowColors[5]) // 5번 인덱스를 통해서 데이터에 접근. indigo
console.log(rainbowColors[6]) // 6번 인덱스를 통해서 데이터에 접근. violet

 

 

4️⃣ 배열의 길이

배열은 같은 형식의 데이터를 순서대로  저장하는 것! 그렇다면 이 배열이 얼마나 많은 데이터를 갖고 있는지, 그 길이를 알 필요가 있다. 위의 예시에서 rainbowColors는 요소의 갯수가 7개니까 그나마 눈으로 셀 수 있었지만 배열 안의 요소가 이보다 훨씬 더 많다면 정말 만만치 않은 일이 될 것이다. 이 때 사용하는 것이 바로 length 라는 속성입니다!

 

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

console.log(rainbowColors.length) // 7을 출력

console.log(rainbowColors[rainbowColors.length - 1]) // length 를 응용하여 배열의 마지막 요소도 쉽게 찾아서 출력 가능!