자바스크립트(12) 배열-2

자바스크립트 강의 

 

개발일지

학습 진행 내용

 

배열

요소 추가와 삭제

배열을 선언하고 난 이후에 새로운 요소를 더하거나 빼는 경우가 있다.

이 때 사용하는 것이 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 출력

 

배열과 반복문

배열의 요소들을 하나씩 꺼내서 출력해야 하는 코드를 작성해야한다고 했을 때 좀 더 간결한 방법이 있다.

바로 반복문의 활용이다.

 

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가 배열의 길이보다 작을 때에만 반복문 안의 코드 실행 한다.
• 모든 요소를 빠짐없이 다 출력해야 하므로 i는 1씩 증가 한다.

 

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

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

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

배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당한다.

자동으로 배열의 끝까지 반복문이 실행되기 때문에 첫번째 for 문보다 쓰기 편하다.

 

 

연습) 열 개의 상품 가격 데이터를 갖고 있는 배열을 만든다. 반복문을 활용해 상품들의 가격 합계와 평균을 구해보기

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를 활용하면 된다.