배열(Array)
- '여러 개'의 데이터를 '순차적'으로 나열한 자료 구조
- 다양한 타입을 하나의 배열에 저장 가능
- 0부터 시작하는 인덱스 번호를 가짐(1씩 증가)
- - 각각의 데이터를 "요소"라고 부름
- - 크기가 고정 X / 프로그램 실행 중 동적으로 사용 가능
배열 사용 목적
- 집합적 데이터 관리 용이
- 순차적 접근
- 다양한 데이터 타입을 함께 저장
배열 생성
1) 리터럴(literal, 문자그대로의) 방식
- 가장 직관적이고 간편함
- [ ](대괄호) 안에 원하는 요소들을 , (콤마)로 구분하여 나열
2) Array 생성자 사용 방식
- 새로운 배열 생성 시 배열의 크기나 초기값을 지정하는 방법
배열 요소 접근 & 수정
- 각 요소는 고유한 인덱스를 통해 접근 & 수정 가능
1) 요소 접근
- 배열명[인덱스번호]
2) 요소 수정
- 배열명[인덱스번호] = 수정 데이터 할당
배열의 길이
- 배열명.length 속성
- 배열의 마지막 요소 인덱스 번호 === 배열의 길이 - 1
배열 탐색 및 정보 확인
1) indexOf()
- 배열의 지정된 요소를 찾고 그 요소의 첫 번째 인덱스를 반환 (없으면 -1 반환)
2) lastIndexOf()
- 배열의 끝부터 시작하여 요소를 탐색 (없으면 -1 반환)
3) includes()
- 배열에 특정 요소가 존재하는지 확인
- 해당 결과를 boolean 값으로 반환
배열 조작 함수(기능)
1) 요소 추가
- push() : 배열의 끝에 하나 이상의 요소를 추가
- 수정된 배열의 길이를 반환
2) 요소 삭제
- pop() : 배열의 마지막 요소를 제거, 그 제거된 요소를 반환 (빈 배열은 undefined 반환)
더보기
더보기
(추가 기능)
shift() : 배열의 첫 번째 요소를 제거, 반환
unshift() : 배열의 시작 부분에 하나 이상의 요소를 추가 - 수정된 배열의 길이 반환
splice() : splice(삭제할 요소 시작 인덱스, 삭제할 요소의 개수) - 삭제
splice(시작 인덱스, 0, 아이템 나열, ...) - 추가
3) 요소 정렬 & 순서 변경
- sort() : 배열 요소 정렬 (오름차순)
- reverse() : 배열 요소 정렬 (내림차순)
자료형
더보기
더보기
// == 일반 자료형 ==
// 일반 자료형은 원본 데이터와 복사된 데이터가 별도로 저장
// : 서로 영향을 미치지 않는다
let num1 = 10;
let num2 = num1;
console.log(num2); // 10
num2 = 20;
console.log(num1); // 10
console.log(num2); // 20
// == 참조 자료형 ==
let array01 = [11, 22, 33];
let array02 = array01;
// array02 = [1, 2, 3];
// console.log(array01); // [ 11, 22, 33 ]
// console.log(array02); // [ 1, 2, 3 ]
array01[1] = 55;
console.log(array01); // [ 11, 55, 33 ]
console.log(array02); // [ 11, 55, 33 ]
array02[2] = 66;
console.log(array01); // [ 11, 55, 66 ]
//? 원본과 복사본의 독립성을 보장
// : 스프레드 연산자(...)
// : 배열 또는 객체의 요소를 개별 요소로 확장하거나
// , 여러 요소를 하나의 형태로 결합할 때 사용
// 1) 개별 요소 확장
let sports = ['축구', '야구', '농구'];
let copy = ['배구', ...sports , '펜싱']; // 독립적인 주소 체계를 가짐
copy[1] = 'baseball';
console.log(sports); // [ '축구', '야구', '농구' ]
console.log(copy); // [ '배구', 'baseball', '야구', '농구', '펜싱' ]
// 2) 하나의 형태로 결합
let mergeSports1 = [...sports, ...copy];
let mergeSports2 = [...copy, ...sports];
console.log(mergeSports1); // ['축구', '야구', '농구', '배구' 'baseball', '야구', '농구', '펜싱']
console.log(mergeSports2); // ['배구', 'baseball', '야구', '농구' '펜싱', '축구', '야구', '농싱']
자바스크립트 배열의 기능
배열과 문자열 사이의 변환
1) join() - 연결하다
- 배열의 모든 요소를 연결하여 하나의 문자열로 변환
- 구분자를 전달(제공하지 않을 경우 쉼표가 기본값)
2) split() - 분리하다
- 문자열을 특정 구분자를 기준으로 분리하여 배열로 변환
다차원 배열
- 배열의 요소로 또 다른 배열을 포함하는 구조
- 중첩 배열(2차원 배열, 3차원 배열 ... n차원 배열)
예제 코드
더보기
더보기
//! 1. 배열 합계 구하기
let array = [1, 2, 3, 4, 5];
function sumArray(array) {
let sum = 0;
let length = array.length;
for(let i = 0; i < length; i++){
// array[i]
// sum = sum + array[i]
// sum = sum + array[1]
// sum = sum + array[1] + array[2]
// sum = sum + array[1] + array[2] + array[3] + ...
sum += array[i];
}
return sum;
}
console.log(sumArray(array)); // 15
console.log(sumArray([24, 13, 25, 32])); // 94
//! 2. 특정 수 이상의 요소 필터링
// 배열 안에서 10 초과의 요소만 필터링
function filterTen(array) {
let filtered = []; // 10이상의 요소만 담을 새 배열 생성
let length = array.length;
for (let i = 0; i < length; i++) {
if(array[i] > 10){
filtered.push(array[i]);
}
}
return filtered;
}
console.log(filterTen([3, 25, 31, 2, 6, 11, 23])); // [ 25, 31, 11, 23 ]
console.log(filterTen([13, 5, 1, 28, 6, 10, 21])); // [ 13, 28, 21 ]
//! 3. 배열 요소 검색
function containsElement(array, element) {
for (let i = 0; i < array.length; i++){
if(array[i] === element){
return true;
}
}
return false;
}
console.log(containsElement([1, 2, 3, 4, 5], 3)); // true
console.log(containsElement([1, 2, 3, 4, 5], 6)); // false
//! 4. 배열 평균 구하기
function findAverage(array) {
let sum = 0;
let length = array.length;
for (let i = 0; i < length; i++){
sum += array[i];
}
return sum / length;
}
console.log(findAverage([10, 20, 30, 40, 50])); // 30
//! 5. 최댓값 찾기
// - 배열의 첫 번째 요소를 max라는 변수에 담기
// - 배열을 순회하면서 max보다 큰 값이 있을 경우 max를 해당 값으로 재할당
function findMax(array) {
let max = array[0];
let length = array.length;
for (let i = 1; i < length; i++){
if(array[i] > max){
max = array[i];
}
}
return max;
}
console.log(findMax([10, 3, 45, 78, 6])); // 78
console.log(findMax([10, 3, 45, 38, 6])); // 45
/*
function findMax1(array) {
max = Math.max(array);
return max;
}
console.log(findMax([10, 3, 45, 78, 6]));
*/
'JavaScript' 카테고리의 다른 글
[JavaScript] 내장 객체 (0) | 2024.08.08 |
---|---|
[JavaScript] 이벤트(Event) (0) | 2024.08.07 |
[JavaScript] 객체 (0) | 2024.08.06 |
[JavaScript] 함수 심화 (0) | 2024.08.06 |
[JavaScript] Function (0) | 2024.08.05 |