자바스크립트로 배열의 Push,Pop,Sort, Reverse구현하기

1. Push 메서드 구현하기

개요

Push 메서드는 배열의 끝에 하나 이상의 요소를 추가하는 용도로 사용됩니다. 이번 장에서는 자바스크립트의 기본 배열 메서드인 Push를 직접 구현해보도록 하겠습니다.

알고리즘 동작

1. 입력된 요소를 배열의 마지막 인덱스 다음 위치에 추가합니다.
2. 배열의 길이를 1 증가시킵니다.
3. 새로운 길이를 반환합니다.

구현

다음은 Push 메서드의 구현 예시입니다.

Array.prototype.pushCustom = function (...elements) {
  const startLength = this.length;
  let argIndex = 0;

  for (let i = startLength; i < startLength + elements.length; i++) {
    this[i] = elements[argIndex++];
  }

  return this.length;
};

사용법

다음은 pushCustom 메서드의 사용 예시입니다.

const fruits = ['apple', 'banana'];

console.log(fruits.pushCustom('orange')); // 3
console.log(fruits); // ['apple', 'banana', 'orange']

console.log(fruits.pushCustom('grape', 'kiwi')); // 5
console.log(fruits); // ['apple', 'banana', 'orange', 'grape', 'kiwi']

요약

Push 메서드는 배열 끝에 요소를 추가하는 메서드로, 위 예시를 참고하여 직접 구현할 수 있습니다. PushCustom 메서드를 사용하면 기존 배열에 요소를 쉽게 추가할 수 있습니다.

2. Pop 메서드 구현하기

개요

Pop 메서드는 배열의 마지막 요소를 제거하고 반환합니다. 이번 장에서는 자바스크립트의 기본 배열 메서드인 Pop을 직접 구현해보도록 하겠습니다.

알고리즘 동작

1. 배열의 마지막 요소를 제거합니다.
2. 배열의 길이를 1 감소시킵니다.
3. 제거된 요소를 반환합니다.

구현

다음은 Pop 메서드의 구현 예시입니다.

Array.prototype.popCustom = function () {
  if (this.length === 0) return;

  const removedElement = this[this.length - 1];
  delete this[this.length - 1];
  this.length--;

  return removedElement;
};

사용법

다음은 popCustom 메서드의 사용 예시입니다.

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.popCustom()); // 'orange'
console.log(fruits); // ['apple', 'banana']

console.log(fruits.popCustom()); // 'banana'
console.log(fruits); // ['apple']

요약

Pop 메서드는 배열의 마지막 요소를 제거하고 반환하는 메서드입니다. 위 예시를 참고하여 직접 PopCustom 메서드를 구현하면 배열의 마지막 요소를 쉽게 제거할 수 있습니다.

3. Sort 메서드 구현하기

개요

Sort 메서드는 배열의 요소를 정렬합니다. 이번 장에서는 자바스크립트의 기본 배열 메서드인 Sort를 직접 구현해보도록 하겠습니다.

알고리즘 동작

1. 배열의 첫 번째 요소부터 마지막 요소까지 반복하면서 인접한 요소끼리 비교합니다.
2. 비교 시, 두 요소의 값을 문자열로 바꾼 뒤 Unicode 순서로 비교합니다.
3. 정렬 순서에 맞지 않은 경우, 요소를 교환합니다.
4. 모든 요소에 대해 반복하며 정렬을 완료합니다.

구현

다음은 Sort 메서드의 구현 예시입니다.

Array.prototype.sortCustom = function () {
  for (let i = 0; i < this.length - 1; i++) {
    for (let j = i + 1; j < this.length; j++) {
      if (String(this[j]) < String(this[i])) {
        [this[i], this[j]] = [this[j], this[i]];
      }
    }
  }

  return this;
};

사용법

다음은 sortCustom 메서드의 사용 예시입니다.

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

console.log(numbers.sortCustom()); // [1, 2, 3, 4, 5]

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.sortCustom()); // ['apple', 'banana', 'orange']

요약

Sort 메서드는 배열을 정렬하는 메서드로, 위 예시를 참고하여 직접 SortCustom 메서드를 구현할 수 있습니다. SortCustom 메서드를 사용하면 배열의 요소를 쉽게 정렬할 수 있습니다.

4. Reverse 메서드 구현하기

개요

Reverse 메서드는 배열의 요소들을 반전시킵니다. 이번 장에서는 자바스크립트의 기본 배열 메서드인 Reverse를 직접 구현해보도록 하겠습니다.

알고리즘 동작

1. 배열의 첫 번째 요소와 마지막 요소를 바꿉니다.
2. 두 번째 요소와 끝에서 두 번째 요소를 바꿉니다.
3. 위 과정을 배열의 중간까지 반복합니다.

구현

다음은 Reverse 메서드의 구현 예시입니다.

Array.prototype.reverseCustom = function () {
  let i = 0;
  let j = this.length - 1;

  while (i < j) {
    [this[i], this[j]] = [this[j], this[i]];
    i++;
    j--;
  }

  return this;
};

사용법

다음은 reverseCustom 메서드의 사용 예시입니다.

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

console.log(numbers.reverseCustom()); // [5, 4, 3, 2, 1]

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.reverseCustom()); // ['orange', 'banana', 'apple']

요약

Reverse 메서드는 배열의 요소들을 반전시키는 메서드입니다. 위 예시를 참고하여 직접 ReverseCustom 메서드를 구현하면 배열의 요소를 간단히 반전시킬 수 있습니다.

5. 마무리

이번 글에서는 자바스크립트의 기본 배열 메서드 중 push, pop, shift, unshift, slice, splice, indexOf, includes, filter, map, reduce, forEach, some, every, sort, reverse 메서드를 직접 구현해보는 방법에 대해 알아보았습니다.

각 메서드는 배열을 다루는 다양한 기능을 제공하며, 이를 구현하고 사용함으로써 배열을 보다 유연하게 다룰 수 있습니다. 각 메서드의 동작과 알고리즘에 대해 자세히 알아보고, 예제 코드를 통해 실제 사용법을 익혔습니다.

이러한 배열 메서드들은 자바스크립트에서 흔히 사용되는 기능들이므로, 메서드들의 동작 원리를 이해하고 직접 구현해보는 것은 프로그래밍 실력 향상에 도움이 될 것입니다. 또한 직접 구현함으로써 자신만의 커스텀 메서드를 만들어 사용할 수도 있습니다.

앞으로도 자바스크립트의 다양한 기능들을 탐구하고, 이를 실제 코드에 적용하여 프로그래밍 실력을 향상시켜 나가는 것을 추천합니다.