[JavaScript] 배열 (1)

배열 (Array) 이란?

자바스크립트에서 데이터를 표현하기 위한 방법으로 기본타입과 객체를 배웠다.

이걸로도 우리는 분명 많은 것들을 할 수 있다.

하지만! 같은 형식의 많은 데이터를 순서대로 저장하고자 할 때에는 데이터의 수만큼 많은 변수들을 선언해줄 수 밖에 없다.

이 때 쓰는 것이 바로 배열!

 

배열의 선언!

 

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

 

 

// 첫 번째 방법

const arr1 = new Array(1,2,3,4,5)

// 두 번째 방법

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

console.log(arr1[3]) // 4
console.log(arr2[2]) // 3
console.log(arr2) // [1, 2, 3, 4, 5]

 

여기서 첫 번째 방법은 우리가 크래스를 활용하여 객체를 만든것과 유사한 것 처럼 보인다.

 

맞다 

 

Array 라는 클래스를 선언한 적 없지만, JavaScript 내부적으로도 이미 갖고있는 것.

 

그래서 우리는 Array 라는 클래스를 선언하지 않고도 활요할 수 있는것.

 

 

배열 안의 데이터

배열에 있는 데이터를 각각 우리는 요소(element) 라고 부른다..

당연히 이 요소들에 쉽게 접근해서 바로 쓸수도 있어야 한다.

객체도 속성명을 통해 해당 데이터에 쉽게 접근할 수 있었다.

배열에서는 인덱스(index) 가 객체의 속성명과 같은 역할을 해준다.

 

인덱스는 배열 안의 데이터들이 자리잡은 순서라고 생각해주면 된다.

특이한 점은 이 인덱스가 0부터 시작한다는 사실! 

 

// rainbowColors라는 변수를 선언하고 -> 각각의 문자열 데이터들을 배열에 담아서 변수에 저장(할당)
const rainbowColors = ['red','orange','yellow','green','blue','indigo','violet']

console.log(rainbowColors[0]) // 0번 인덱스를 통해서 데이터에 접근. red
console.log(rainbowColors[1]) // 1번 인덱스를 통해서 데이터에 접근. orange
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

 

배열의 길이

배열은 같은 형식의 데이터를 순서대로 ( 순 서 대 로 !) 저장하는 것.

 

그렇다면 이 배열이 얼마나 많은 데이터를 갖고 있는지, 그 길이를 알 필요도 있지 않을까?

 

위의 예시에서 rainbowColors 는 요소의 갯수가 7개니까 그나마 눈으로 셀 수 있었지만,

 

배열 안의 요소가 이보다 훨씬 더 많다면, 정말 만만치 않은 일이 될거다.

 

이때! 사용하는것이 바로 length 라는 속성.

 

 

// rainbowColors라는 변수를 선언하고 -> 각각의 문자열 데이터들을 배열에 담아서 변수에 저장(할당)
const rainbowColors = ['red','orange','yellow','green','blue','indigo','violet']

console.log(rainbowColors[0]) // 0번 인덱스를 통해서 데이터에 접근. red
console.log(rainbowColors[1]) // 1번 인덱스를 통해서 데이터에 접근. orange
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

//배열의 길이를 출력
console.log(rainbowColors.length)

 

해당 length를 활용하여 알 수 있는 것은.

 

// rainbowColors라는 변수를 선언하고 -> 각각의 문자열 데이터들을 배열에 담아서 변수에 저장(할당)
const rainbowColors = ['red','orange','yellow','green','blue','indigo','violet']

console.log(rainbowColors[0]) // 0번 인덱스를 통해서 데이터에 접근. red
console.log(rainbowColors[1]) // 1번 인덱스를 통해서 데이터에 접근. orange
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

// 배열의 길이를 출력
console.log(rainbowColors.length)

// 배열의 길이를 알 수 있다면 마지막 요소를 알 수 있다.
// 마지막 요소의 인덱스 번호는 [rainbowColors.length-1]
console.log(rainbowColors[rainbowColors.length-1])