[JavaScript] 배열(Array)

배열(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]));
*/