자바스크립트(11) 배열 -1

자바스크립트 강의 

 

개발일지

학습 진행 내용

 

배열

배열(Array) 이란?

 

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

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

 

 하지만 같은 형식의 많은 데이터를 순서대로 저장하고자 할 때는,

데이터의 수만큼 변수들을 선언해야 하는 수고로움이 있다.

 

이 때 배열을 쓰면 좋다.

 

👉배열은, 같은 타입의 데이터들을 하나의 변수에 할당하여 관리 할 때 사용하는 데이터 타입이다.

 

배열의 선언

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

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

// 2번째 방법
const arr2 = [1, 2, 3, 4, 5]

 

1번째 방법은 앞서 우리가 클래스를 활용해 객체를 만든 것과 똑같다.

Array라는 클래스를 활용해서 객체를 만든것이다. 내가 직접 Array라는 클래스를 선언한 적은 없지만

자바스크립트 내부적으로, 이미 갖고 있다. 바로 사용하면 된다.

 

2번째 방법은 배열을 바로 만드는 방법이다. 대괄호 안에 우리가 배열로 저장할 데이터를 쭉 나열해주면 된다.

정말 간단하다. 그래서 배열을 만들때는 보통 1번째보다는 2번째 방법을 많이 사용한다.

 

배열 안의 데이터

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

배열에서는 인덱스(index)를 통해 해당 데이터에 쉽게 접근할 수 있다.

 

인덱스란?

👉 인덱스는 배열 안의 데이터들이 자리 잡은 순서다.

 

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

(※ JS를 외국 사람이 만들어서 외국인들의 숫자 인식 개념이 들어있기 때문. 외국사람들은 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

 

배열의 길이

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

그렇다면 이 배열이 얼마나 많은 데이터를 갖고 있는지, 그 길이를 알 필요가 있다.

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

배열 안의 요소가 이보다 훨씬 더 많다면 힘들다. 이 때 사용하는 것이 바로 length 라는 속성이다.

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

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

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