개발일지 20221116 JavaScript 기초문법 4 - 배열

1) 배열이란?

같은 형식의 많은 데이터를 순서대로 저장하고자 데이터의 수만큼 변수들을 선언할 때 사용하는 것

같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입!

 

 

2) 배열의 선언

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

1번째 방법은 Array라는 클래스를 활용해서 객체를 만들었다고 생각하면 된다. 직접 Array라는 클래스를 선언한 적은 없지만 자바스크립트 내부적으로 이미 갖고 있기 때문에, 바로 사용하면 됨

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

2번째 방법은 배열을 바로 만드는 방법. 대괄호 안에 배열로 저장할 데이터를 나열한다.

 

3) 배열에 있는 데이터 각각 = 요소 (element)

객체도 속성명을 통해 해당 데이터에 쉽게 접근할 수 있으며, 배열에서는 인덱스index가 객체의 속성명과 같은 역할을 한다.

인덱스는 배열 안의 데이터들이 자리잡은 순서이며, 인덱스는 0부터 시작!

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

console.log(rainbowColors[0]) // red
console.log(rainbowColors[1]) // orage
console.log(rainbowColors[2]) // yellow
console.log(rainbowColors[3]) // green
console.log(rainbowColors[4]) // blue
console.log(rainbowColors[5]) // indigo
console.log(rainbowColors[6]) // violet

 

4) 배열의 길이

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

console.log(rainbowColors.length) // 7

console.log(rainbowColors[rainbowColors.length - 1]) // violet
// length로 배열의 마지막 요소도 쉽게 찾을 수 있음

 

5) 배열 요소 추가와 삭제

push와 pop 메소드를 이용해 배열의 마지막 요소 뒤에 새 요소를 추가 및 삭제할 수 있다

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

rainbowColors.push('ultraviolet') // 배열의 마지막에 ultarviolet 추가
console.log(rainbowColors) // ultraviolet이 추가된 rainbowColors 출력

rainbowColors.pop() // 배열의 마지막 요소 ultraviolet을 제거
console.log(rainbowColors) // ultraviolet이 제거된 rainbowColors 출력

 

6) 반복문으로 배열 출력

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

for (let i = 0; i < rainbowColors.length; i++) {
	console.log(rainbowColors[i])
}

+) 배열의 인덱스는 0부터 시작이니 변수 i의 시작값도 0으로!

i가 rainbowColors.length보다 작을 때까지 반복문 안의 코드 실행

모든 요소를 빠짐없이 다 출력해야 하므로 i는 1씩 증가(i++)

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

for (const color of rainbowColors) {
	console.log(color)
}

반복문을 배열에 사용할 때, 이런 간소화된 for문을 사용하기도 함 

배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당하고, 자동으로 배열의 끝까지 반복문이 실행된다

 

(그런데 나는 손에 익어서 그런가, 반복문으로 배열 출력할때 첫 번째 방법이 더 편한 것 같다ㅠㅋㅋㅋㅋ)