[JavaScript] 배열

📌배열(Array)

자바스크립트의 배열은 일반적인 배열의 요소를 흉내낸 특수 객체다.

자바스크립트에 배열이라는 타입은 존재하지 않으며 객체로 취급한다. 자바스크립트의 배열은 일반적인 의미의 배열, 즉 '각 요소가 동일한 데이터 크기를 가지며 연속적으로 나열된 자료구조'가 아닌 희소 배열로, 각 메모리 공간은 동일은 크기를 갖지 않아도 되며 연속적으로 이어져있지 않을 수도 있다. 

자바스크립트 배열은 해시 테이블로 구현된 객체로, 일반적인 배열과 달리 인덱스로 배열 요소에 접근하는 경우에는 속도가 느리지만 특정 요소를 검색하거나 삽입 또는 삭제하는 경우 빠른 속도를 보인다. 

 

 

📌확인

`isArray()`

전달된 인자가 배열이면 `true`를 반환한다.

 

 

📌삽입

`push()` 

배열의 맨 뒤에 요소를 삽입하고 변경된 배열의 길이 `length` 프로퍼티를 반환한다.

 

`concat()`

인수로 전달된 값 또는 배열을 원본 배열의 마지막 요소르 추가한뒤 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.

 

`unshift()`

배열의 맨 앞에 요소를 삽입하고 변경된 배열의 길이 `length` 프로퍼티를 반환한다. 원본 배열이 변경된다.

 

원본 배열을 변경하지 않기 위해 스프레드 문법을 사용할 수 있다.

 

const arr = [1, 2];

const newArr = [3, ...arr];

// newArr = [3, 1, 2]
// arr = [1, 2]

 

 

 

`fill()`

배열의 모든 요소를 인수로 전달받은 값으로 채운다. 원본 배열이 변경된다.

 

 

 

📌변경

`splice` 함수를 사용하여 특정 요소를 다른 요소로 변경할 수 있다. 원본 배열이 변경된다.

두번째 인자, 즉 개수가 0이라면 삭제 없이 삽입만 진행한다.

세번째 인자, 즉 인덱스와 개수 뒤의 인자가 없으면 삭제만 진행한다.

 

const arr = [1, 2, 3, 4];

// 원본 배열 arr에서 인덱스 1부터 2개의 요소를 삭제한 뒤 해당 자리에 20과 30을 넣는다.
const result = arr.splice(1, 2, 20, 30);

// result = [1, 20, 30, 4];

 

 

 

📌제거

`pop()`

마지막 요소를 제거하고 해당 요소를 반환한다. 원본 배열이 변경된다.

 

 

`shift()`

맨 처음 요소를 제거하고 해당 요소를 반환한다. 원본 배열이 변경된다.

 

 

`filter()`

인자로 전달받은 콜백 함수의 조건을 만족하는 요소만 남기고 삭제한다.

모든 요소를 순회하면서 인자로 전달받은 함수를 반복 호출한 뒤, 반환값이 `true`를 만족하는 요소로만 구성된 새로운 배열을 반환한다. 이때 원본 배열은 변경되지 않는다.

 

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

arr = arr.filter( e => e !== 3 );

// arr = [1, 2, 4, 5];

 

 

[Lv.1][같은 숫자는 싫어] 에서 주어진 요구사항처럼 같은 요소가 연속될 경우 삭제하려고 할 때, 다음과 같이 사용할 수 있다.

마지막 인덱스 + 1는 참조할 요소가 없으므로 `undefined`이 된다.

 

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

arr.filter( (val, index) => val !== arr[index + 1]);

// arr = [1, 2, 3, 4, 5, 1, 2]

 

 

 

중복 요소를 완전히 제거할 때도 사용할 수 있다.

 

const arr = [1, 2, 3, 4, 4, 4, 5, 1, 2];

const result = arr.filter( (val, i, _arr) => _arr.indexOf(val) === i);

// result = [1, 2, 3, 4, 5]

 

 

 

다만 중복 요소를 제거할 때는 `Set`을 사용하는 것을 추천한다.

 

const arr = [1, 2, 3, 4, 4, 4, 5, 1, 2];

const result = [...new Set(arr)];

// result = [1, 2, 3, 4, 5]

 

 

 

 

 

📌자르기(부분 배열)

`slice()`

인자로 전달된 범위의 요소들을 복사하여 배열로 반환한다. 원본 배열은 변경되지 않는다.

첫번째 인자(start)는 복사를 시작할 인덱스. 음수인 경우 배열 끝에서의 인덱스를 뜻한다. 예를 들어 `slice(-2)`는 배열의 마지막 두 개 요소를 복사하여 배열로 반환한다.

두번째 인자(end)는 복사를 종료할 인덱스. 이 인덱스는 복사되지 않는다. 즉, 복사할 때 `start` 인덱스부터 `end - 1` 인덱스까지의 요소만 복사된다. 생략 시 배열의 길이가 기본값이 된다.

 

 

📌정렬

`sort()`

배열을 오름차순으로 정렬한다. 기본적으로 문자열로 변환 후 정렬하기 때문에 두 자리 수 이상의 숫자가 있을 경우 원하는 형태로 반환되지 않는다.

 

const arr = [2, 11, 3, 5, 4, 12];

arr.sort()	//	[11, 12, 2, 3, 4, 5]가 된다.
arr.sort( (a, b) => a - b);	// [2, 3, 4, 5, 11, 12] 올바른 오름차순 정렬

 

 

 

`reverse()`

배열을 역순으로 뒤집고 해당 배열을 반환한다. 원본 배열이 변경된다.

 

 

📌결합

`join()`

배열의 모든 요소를 합쳐서 문자열로 반환한다. 인자가 없으면 각 요소 사이에 `,`을 삽입하여 반환한다.

 

 

📌검색

`indexOf()`

인자로 전달된 요소의 인덱스를 반환한다. 

 

`includes()`

인자로 전달된 요소가 존재하면 `true`를 반환한다.(ES7)

 

 

📌복사

배열의 식별자는 주소값을 가지기 때문에 다른 식별자에 값을 할당하면 같은 배열을 참조하게 된다.(얕은 복사)

의도와 달리 기존 배열을 수정하면 복사한 배열도 수정되는 결과를 낳는다.

 

let arr = [2, 3, 1, 5, 4];
let copy = arr;

arr.sort();

// arr = [1, 2, 3, 4, 5];
// copy = [1, 2, 3, 4, 5];

 

 

같은 요소를 가진 다른 배열을 만들고 싶다면 점 연산자(...)를 사용하여 요소를 할당해준다.

 

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

arr.sort();

// arr = [1, 2, 3, 4, 5]
// copy = [2, 3, 1, 5, 4]

 

 

📌2차원 배열 복사

각 행마다 동일하게 깊은 복사를 해준다.

 

let arr1 = [[1, 2], [3,4]];
let arr2 = arr1.map(e => [...e]);

arr2[0][0] = 0;

// arr1 = [[1, 2], [3,4]]
// arr2 = [[0, 2], [3,4]]

 

 

📌순회

`forEach()`

모든 요소를 순회하며 인자로 받은 콜백 함수를 반복 호출한다.

 

const numbers = [1, 2, 3];
const pows = [];

numbers.forEach( item => pows.push(item ** 2) );

// pows = [1, 4, 9]

 

 

`map()`

자신을 호출한 배열의 모든 요소를 순회하며 인자로 전달 받은 콜백 함수를 반복 호출하고 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.

 

 

const numbers = [1, 4, 9];

const roots = numbers.map( item => Math.sqrt(item) );

// roots = [1, 2, 3]
// numbers = [1, 4, 9]

 

 

`reduce()`

자신을 호출한 배열의 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 이때, 콜백 함수의 반환 값을 다음 순회 시 콜백 함수의 첫번째 인자로 전달한다. 

 

function factorial (...numbers : number[]) : number{
    return numbers.reduce((acc, num) => acc * num, 1)
};

 

 

 

 

📌배열 구현하기

• `constructor`: 배열의 초기 상태를 정의한다. length는 배열의 길이를 나타내며, data는 요소를 저장한다.
• `push(element)`: 배열 끝에 요소를 추가한다. 추가된 후 배열의 길이를 반환한다.
• `pop()`: 배열의 마지막 요소를 제거하고 반환한다.
• `get(index)`: 주어진 인덱스에 있는 요소를 반환한다.
• `delete(index)`: 주어진 인덱스의 요소를 제거하고 배열을 재정렬한다.
• `_shiftItems(index)`: 요소를 제거할 때 배열의 요소들을 재정렬한다.
• `print()`: 현재 배열의 상태를 출력한다.

 

 

class MyArray {
    constructor() {
        this.length = 0; // 배열의 길이
        this.data = {}; // 요소를 저장할 객체
    }

    // 요소를 배열에 추가
    push(element) {
        this.data[this.length] = element;
        this.length++;
        return this.length;
    }

    // 마지막 요소 제거
    pop() {
        if (this.length === 0) return undefined;
        this.length--;
        const removedElement = this.data[this.length];
        delete this.data[this.length];
        return removedElement;
    }

    // 특정 인덱스의 요소 반환
    get(index) {
        return this.data[index];
    }

    // 특정 인덱스의 요소 제거
    delete(index) {
        const removedElement = this.data[index];
        this._shiftItems(index);
        return removedElement;
    }

    // 요소들을 인덱스 0부터 재정렬
    _shiftItems(index) {
        for (let i = index; i < this.length - 1; i++) {
            this.data[i] = this.data[i + 1];
        }
        delete this.data[this.length - 1];
        this.length--;
    }

    // 배열 출력
    print() {
        console.log(this.data);
    }
}