배열

배열의 개념

같은 타입의 원소들을 효율 저으로 관리할 수 있는 기본 자료형.
주로 같은 타입의 변수가 여러개 필요한 경우 자주 사용함.

장점

하나의 변수 이름으로 동일한 타입의 데이터를 그룹화하여 관리 할 수 있고, 인덱스로 원하는 데이터에 임의 접근 할 수 있다.

배열 선언

1. 리터럴을 이용하는 법

const arr = [0, 0, 0, 0, 0, 0];

2. 배열 생성자를 이용하는 법

const arr1 = new Array(6); // [undefined, undefined, . . . ]
const arr2 = [ . . . new Array(6)].map((_, i) =› i + 1); // [1, 2, 3, 4, 5, 6]

3. Array.fill() 함수를 사용하는 방법

const arr = new Array(6). fill(0); // [0, 0, 0, 0, 0, 0]

선언된 배열은 사진과 같이 저장되며 배열의 인덱스로써 접근 가능하다. 인덱스는 0번부터 시작한다.

배열과 차원

배열은 다차원 배열을 사용할 때도 많으나 컴퓨터 메모리 구조는 1차원이기 때문에 다차원 배열도 1차원 공간에 저장이 된다. 즉 배열은 차언과는 무관하게 메모리에 연속 할당된다.

1차원 배열
가장 간단한 배열의 형태를 가진다. 배열의 각 데이터는 메모리의 낮은 주소에서 높은 주소 방향으로 연이어 할당된다. 사진을 참고하자.

2차원 배열
2차원 배열은 1차원 배열의 확장이다. 선언 방법은 아래와 같다.

/ / 2차원 배열을 리터럴로 표현
const arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];
/ / arr[2][3]에 저장된 값을 출력
console. log(arr[2][3]); // 12
/ / arr[2][3]에 저장된 값을 15로 변경
arr[2][3] = 15;
/ / 변경된 값을 출력
console. log(arr[2][3]); // 15


/ / 크 기 가 3 * 4 인 배 열 을 선 언 하 는 예
const arr = [. new Array(3)]-map((_, i) => new Array(4). fill(i));
/ / [ [ 0 , 0 , 0 , 0 ] , [ 1 , 1 , 1 , 1 ] , [ 2 , 2 , 2 , 2 ] ]

1차원 배열과 접근방법은 비슷하다. 행과 열을 명시해 []연산자를 2개 연이어 사용한다는 점만 다르다. 사진을 참고하자

배열의 효율성

배열 연산의 시간 복잡도

배열은 임의 접근이라는 방법으로 배열의 모든 위치에 있는 데이터에 단 한 번에 접근할 수 있다. 즉 데이터에 접근하는 시간복잡도는 O(1)이다.

배열에 데이터를 추가하는 경우는 어디에 저장하느냐에 따라 시간 복잡도가 달라진다.

맨 뒤에 데이터를 삽입 할 경우

• 맨 뒤에 삽입 할 경우 바로 접근 할 수 있으며, 다른 데이터에 영향을 주지 않는다. 시간복잡도는 O(1)이다.

맨 앞에 데이터를 삽입 할 경우

• 다른 데이터들이 한 칸씩 이동해야 한다.즉 미는 연산이 필요하다. 시간복잡도는 O(N)이다.

중간에 데이터를 삽입 할 경우

• 중간에 삽입 할 경우 삽입한 데이터 뒤에 있는 다른 데이터들이 한 칸씩 이동해야 한다.즉 미는 연산이 필요하다.시간 복잡도는 최악의 경우를 예상하기 때문에 시간복잡도는 O(N)이다.

배열 선택시의 고려 할 점

데이터에 자주 접근하거나 읽어야 하는 경우 배열을 사용하면 좋은 성능을 낼 수 있다.
그 예로, 그래프를 표현할 때 배열을 활용하면 임의 접근을 할 수 있으므로 간선 여부도 시간 복잡도 O(1)로 판단할 수 있다.
하지만 배열은 메모리 공간을 충분히 확보해야 하는 단점이 존재하기에 아래와 같은 사항을 고려해야 한다.

1. 할당할 수 있는 메모리 크기를 확인해야 한다.
   배열로 표현하려는 데이터가 너무 많으면 런 타임에서 배열 할당에 실패할 수 있다. 운영체제마다 배열을 할당할 수 있는 메모리의 한 계치는 다르지만 보통은 정수형 1차원 배열은 1000만 개, 2차원 배열은 3000* 3000 크기 를 최대로 생각한다.
2. 중간에 데이터 삽입이 많은지 확인해야 한다.
   배열은 선형 자료구조이기 때문에 중간이나 처음에 데이터를 빈번하게 삽입하면 시간 복잡도가 높아져 실제 시험에서 시간 초과가 발생 할 수 있다.

자주 사용하는 배열 기법

배열에 데이터 추가

1. push() 메서드로 추가 => 맨 끝에 데이터 추가

const arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4];

2. concat() 메서드로 추가 => 배열을 이어붙여 새 배열 반환

let arr = [1, 2, 3];
arr = arr.concat([4, 5]); // [1, 2, 3, 4, 5]

3. 스프레드 연산자로 추가 => 새 배열을 만들며 요소 추가 가능

let arr = [1, 2, 31;
arr = [...arr, ...[4, 5]]; // [1, 2, 3, 4, 5]

4. unshift() 메서드로 추가 => 맨 앞에 데이터 추가

const arr = [1, 2, 3];
arr.unshift(0); // [0, 1 , 2, 3];

5. splice() 메서드로 추가 => 특정 위치에 데이터 삽입 가능
   splice는 중간에 데이터를 추가할때 사용한다. 아래와 같은 매개 변수를 사용한다.

array splice(start[, deleteCount[, item1[, item[, •..1]]])

첫번째 매개 변수 start 는 시작지점을 의미한다.
두번째 매개변수 deleteCount는 삭제할 데이터의 수를 의미하고 그 뒤로, 추가할 데이터를 받는다.

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 0, 9999); // [1, 2, 9999, 3 , 4, 5]

배열에 데이터 삭제

1. pop() 메서드로 삭제 => 맨 마지막 데이터 삭제

const arr = [1, 2, 3, 4, 5];
const poppedElement = arr.pop(); // 5
console.log(arr); // [1, 2, 3, 4]

2. shift() 메서드로 삭제 => 맨 앞의 데이터 삭제

const arr = [1, 2, 3, 4, 5];
const shiftedElement = arr.shift(); // 1
console.log(arr); // [2, 3, 4, 5]

3. splice() 메서드로 삭제 => 특정 위치에 데이터 삭제 가능
   아까 본 splice() 메서드를 통해 데이터를 삭제 할 수 있다 첫번째 매개변수로 시작점을 저아고, 두번째로 삭제할 갯수를 정하면 된다. 삭제시에는 세번째 매개변수는 생략한다.

const arr = [1, 2, 3, 4, 5];
const removedElements = arr. splice(2, 2); // [3, 4]
console. logarr); // [1, 2, 5J

고차 함수를 이용하여 데이터에 특정 연산 적용

자바스크립트는 배열에 map(), filter(), reduce()와 같은 유용한 고차 함수를 기본으로 제공한다. 이를 이용하여 기존 배열에 기반하여 새로운 배열을 만들수 있고, 이런 고차 함수를 이용하면 기존 반복문, 조건문을 이용한 복잡한 로직을 대체할 수 있다.
map(), filter(), reduce()와 같은 고차함수는 인수로 함수를 받는다.

1. 배열에 제곱 연산 적용 예(map)

배열의 map() 메서드를 이용하면 배열 내의 각 데이터를 변경할 수 있다.
map() 메서드는 각 데이터를 순회하며 연산한 결과를 반환한다.

const numbers = [1, 2, 3, 4, 5];
const squares = numbers map(num => num * num); // [1, 4, 9, 16, 25]

중요한 건, 배열의 고차 함수는 연산을 마친 배열을 반환할 뿐이지 연산 대상을 직접 바꾸지 않는다는 것이다.

2. 짝수 필터링 예(filter)

filter() 메서드를 이용하여 원하는 조건에 해당하는 값만 남긴 배열을 만들 수 있다.
filter() 메서드는 각 데이터의 요소를 순회하면서 조건을 만족하는 요소만 모아 "새로운 배열"을 반환한다.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers. filter (num => num % 2 === 0); / [2, 4]

3. 전체 합 예(reduce)

reduce()는 배열의 모든 요소를 하나의 값으로 줄이기(reduce) 위해 사용하는 고차 함수.
reduce(callback, initialValue) 형태로 사용되고,
배열의 각 요소를 차례로 순회하면서, 이전 결과(누적값)와 현재 요소를 기반으로 누적 계산을 수행한다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers. reduce(a, b) => a + b); // 15

reduce 추가 설명

const result = arr.reduce((accumulator, currentValue, index, array) => {

  return newAccumulator;
}, initialValue);

accumulator = 누적된 값
currentValue = 현재 순회 중인 요소
index(선택사항) = 현재 인덱스
array(선택사항) = 원래 배열
initialValue = 초기 누적값 (생략시 첫 번째 요소가 기본값이 됨)