배열 (Array)
여러 개의 값을 하나의 변수에 저장하기 위해 사용되는 데이터 구조
◉ 배열 특징
- 값들은 배열 안에 순서대로 저장
- 각 값은 해당 위치에 대한 인덱스를 가짐
- 일반적으로 동일한 데이터 타입의 요소들을 포함하지만, 서로 다른 데이터 타입의 요소들로 배열 구성 가능
- 배열 공간이 동적/가변적
- 인덱스를 사용하여 특정 위치의 요소에 접근/수정 가능
- 다양한 메서드와 속성이 있어 배열 조작/검색에 유용
◉ 배열 선언
배열 리터럴([])을 사용한 배열 선언
let 변수명 = [];: 빈 배열 선언let 변수명 = [요소1, 요소2, 요소2, ...];: : 요소들로 구성된 배열 선언 및 초기화
Array 생성자를 사용한 배열 선언
let 변수명 = new Array(n);: 요소가 n개인 배열 선언- 배열이 생성되면 각 요소는 초기값 undefined로 설정됨 -> 초기화 및 요소 추가 필요
let 변수명 = new Array(요소1, 요소2, 요소3, …);: 요소들로 구성된 배열 선언 및 초기화
자바스크립트 내장객체인 Array를 사용한 배열 선언
let 변수명 = Array.of(요소1, 요소2, 요소3,...);: 요소들로 구성된 배열 선언 및 초기화
◉ 배열의 요소 변경/삭제
요소 변경
배열명 = [요소1, 요소2, …];: 배열의 전체 요소 변경- 배열 공간이 동적/가변적이므로 요소 개수는 선언했을 때 길이보다 초과 가능
배열명[인덱스] = 값;: 인덱스를 통한 배열의 특정 위치 요소 변경
요소 삭제
- delete 배열명[인덱스]; : 배열의 특정 인덱스에 있는 요소 삭제
◉ 배열 객체의 속성
배열명.length;: 배열의 요소 개수 = 배열의 길이
◉ 배열 객체의 메서드
배열명.push(값);: 배열의 끝에 요소 추가배열명.unshift(값);: 배열의 시작 부분에 요소 추가배열명.pop();: 배열의 마지막 요소 삭제 및 반환배열명.shift();: 배열에서 첫 번째 요소를 삭제 및 반환배열명.splice(인덱스[, 삭제여부][, 값]);: 인덱스를 통해 배열의 특정 위치의 요소를 추가하거나 삭제- 삭제여부 : 1이면 삭제, 0이면 추가 (생략 시 1)
- 값 : 삭제여부가 0일 때(추가하는 경우)만 삽입할 요소 작성
배열명1.concat(배열명2);: 배열1에 배열2를 합치기배열명.join([구분자]);: 배열의 요소들을 합쳐서 하나의 문자열 반환- 구분자 생략 시, 기본 쉼표(,)로 요소 합침
배열명.slice(시작인덱스[, 끝인덱스]);: 배열의 시작인덱스부터 끝인덱스-1 까지의 요소를 배열로 반환- 끝인덱스 생략 시, 시작인덱스부터 배열의 마지막 끝 요소까지 배열로 반환
배열명.reverse();: 배열의 배치 순서를 역순으로 바꿈배열명.forEach((현재요소의 값, 현재요소의 인덱스, 원본 배열 객체)=>{실행문});: 배열의 모든 요소에 대해 주어진 함수를 실행- 함수의 3가지 매개변수는 순서대로 현재 요소의 값, 현재 요소의 인덱스, 원본 배열 객체 를 나타내고, 이를 나타내는 매개변수명은 원하는대로 지정 가능
- 일반적으로 currentValue, index, array와 같은 관례적인 이름 사용
- 콜백 함수의 매개변수 개수에 따라 매개변수가 첫 번째부터 차례로 적용
→ 매개변수는 1개만 사용하면 현재 요소의 값만, 2개 사용하면 현재 요소의 값과 인덱스
반복문으로 배열에 저장된 요소의 값 출력 해보기
// for문으로 하는 방법 2가지 for(let i=0; i<배열명.length; i++) { document.write(배열명[i]);} for(let i of 배열명) { document.write(i); } // 배열의 메서드 forEach()사용하기 배열명.forEach((element, index) ⇒ { document.write(index,element); }) // element는 반복할 때마다의 현재 요소의 값, index는 현재 요소의 인덱스를 나타냄.
◉ 예시
과목수, 과목명, 점수 입력받 총점, 평균 구해서 표로 나타내기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>array practice</title>
<style>
table, td {
border: 1px solid black; /* 테이블 테두리 속성 지정*/
}
</style>
</head>
<body>
<script>
// 초기화
let subNum = 0;
let subName = [];
let subScore = [];
let totalScore = 0;
let avgScore = 0;
// 과목 수 입력 받기
subNum = Number(prompt('과목 수 입력'));
// 과목 수만큼 과목명 입력 받기
for (let i=0; i<subNum; i++){
subName.push(prompt(`${i+1}번째 과목 이름 입력`));
}
console.log(subName); // 과목이름 배열 확인하기
// 각 과목들의 점수 입력 받기
for (let i=0; i < subName.length; i++) {
subScore.push(Number(prompt(`${subName[i]}의 점수 입력`)));
totalScore += subScore[i];
}
// 과목들의 평균 구하기
avgScore = parseInt(totalScore / subNum);
// 테이블로 만들기 - document.write() 안에 백팁(`)을 이용하여 html에 작성했던 것처럼 table태그 작성
document.write(`<table> <tr bgcolor='pink'>`)
for (let i=0; i<subNum; i++) {
document.write(`<td> ${subName[i]}</td>`)
}
document.write(`<td>총합</td><td>평균</td></tr> <tr>`)
for (let i=0; i<subScore.length; i++) {
document.write(`<td> ${subScore[i]}</td>`)
}
document.write(`<td>${totalScore}</td><td>${avgScore}</td></tr> </table>`)
</script>
</body>
</html>
개발, 분석 배운 내용 정리하기!