배열

배열?

• 같은 형식의 많은 데이터를 순서대로 저장하고자 할 때, 데이터의 수만큼 변수들을 선언해줘야 하는데 이 때 쓰는 것이 바로 배열!
• 같은 타입의 데이터를 하나의 변수에 할당하여 관리하기 위한 데이터 타입

선언

// 1번째 방법
const arr1 = new Array(1, 2, 3, 4, 5)
//클래스를 활용해 객체를 만든 것과 같은 양식! Array라는 클래스를 활용해서 객체를 만들었다고 생각하면 되는데
//우리가 굳이 Array라는 클래스를 선언하지 않아도 자바스크립트 내부적으로 가지고 있어서 사용만 하면 됨!

// 2번째 방법
const arr2 = [1, 2, 3, 4, 5]
//두번째 방법이 간단해서 많이 사용함!

배열 안 데이터

• 배열에 있는 각 데이터를 요소(element)라고 하는데 이 요소들에 접근하는 방법!
• 객체의 속성 = 배열의 인덱스 같은 느낌! 다만, 인덱스는 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

🚨 만약 인덱스를 통해서 데이터에 접근하려고 했을 때 인덱스가 너어어어어무 많으면 반복문을 활용해서 간결하게 확인한다!

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의 값이 하나씩 더해질 때마다 length(아래 설명 있음) 총 길이보다 작을 때에만 반복문이 작동될 수 있도록 한다.

🚨 보다 쉬운 방법으로 작성하는 간단한 형식의 for문

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
for (const color of rainbowColors) {
	console.log(color)
}

• 새로운 color라는 변수를 할당하고 자동으로 배열의 끝까지 반복문이 실행된다.

length

배열이 엄청 많은 데이터를 가지고 있어서 눈으로 봤을 때 길이를 쉽게 알 수 없는데 내가 요소의 갯수가 궁금할 때

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

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

근데!또 요소가 엄청 많은데 그 마지막 요소가 궁금해..!

console.log(rainbowColors[rainbowColors.length - 1])
//배열의 인덱스는 0부터 시작하니까 마지막 요소는 총 길이에서 1을 뺀 값으로 length - 1로 확인이 가능하다!

요소 추가

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

요소 삭제

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

• pop()안에 삭제하고싶은 요소를 넣어주면 해당 요소가 제거되고 빈칸으로 두면 마지막 요소가 제거된다.

예시

const product = [10,20,30,40,50,60,70,80,90,100]
let sum = 0

for (const price of product) {
    sum += price
}

const avg = sum/product.length

console.log(`합계 : ${sum}, 평균 : ${avg}`)

각 요소 가격을 가지는 product라는 변수를 할당하고 재선언될 수 있도록 let으로 sum을 할당해준다.
for구문을 돌리면서 대입연산자를 이용하여 sum은 price가 반복될 때마다 재할당 될 수 있도록 한다.
avg(평균)은 총 합에 각 요소의 갯수를 나누면 되는 부분!
마지막으로 이를 콘솔에 찍어주면 '합계 : 550, 평균 : 55' 요런 값이 나온다!