본문 바로가기

Javascript

배열과 반복문 & 요소 추가와 삭제

1️⃣ 배열 선언 후 요소 추가와 삭제

  • 배열을 선언하고 난 이후에 새로운 요소를 더하거나 빼야 할 때 이 때 사용하는 것이 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 출력

 

2️⃣ 배열과 반복문

✅배열의 요소들을 하나씩 꺼내서 출력해야 하는 코드를 작성해야한다고 했을 때 좀 더 간결한 방법은 바로 반복문을 활용하면 된다.

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

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

이 반복문을 좀 더 자세히 분석해보면,

  1. 배열의 인덱스는 0부터 시작이니 변수 i의 시작값도 0으로!
  2. i가 배열의 길이보다 작을 때에만 반복문 안의 코드 실행
  3. 모든 요소를 빠짐없이 다 출력해야 하므로 i는 1씩 증가

✅ 배열과 함께 좀 더 자주 쓰이는 간단한 형식의 for 문도 있다.

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

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

배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당합니다. 자동으로 배열의 끝까지 반복문이 실행되기 때문에 첫번째 for 문보다 쓰기 편하다.

 

😅 Q. 열 개의 상품 가격 데이터를 갖고 있는 배열을 만든다. 반복문을 활용해 상품들의 가격 합계와 평균을 구하려면,

 

const priceList = [1000, 2000, 5000, 7000, 10000, 9000, 3000, 15000, 20000, 17000]
let sum = 0

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

const avg = sum / priceList.length
console.log(`합계: ${sum}, 평균: ${avg}`)

반복문을 활용해 배열 안의 요소들에 접근하고 그 값들을 sum이라는 변수에 계속 누적시키고 있다. 이렇게 평균을 구할 때는 앞서 구한 sum과 배열의 length를 활용하면 된다!