배열의 falsy 인덱스에 요소 삽입하기

JavaScript로 개발하다 보면 배열의 특정 자리에 요소를 삽입해야 하는 상황이 자주 생깁니다. 이번 글에서는 배열 안에서 첫 번째 falsy(거짓 같은) 값이 있는 인덱스를 찾아 그 자리에 새 요소를 끼워 넣는 pushAtFalsy() 함수를 직접 만들어 보겠습니다.

요구 사항 정리

함수는 삽입할 요소 하나를 인자로 받으며, 호출된 배열(this)에 직접 반영합니다.
배열을 처음부터 순회하면서 가장 먼저 만나는 falsy 값(빈 슬롯, null, false, undefined 등)의 인덱스를 찾습니다.
찾은 인덱스의 값을 전달받은 요소로 교체합니다.
끝까지 탐색해도 빈 자리가 없다면 요소를 배열의 맨 마지막에 추가합니다.

접근 방식

구현 아이디어는 간단합니다. 먼저 반복문으로 배열을 훑으며 비어 있는(falsy) 위치의 인덱스를 찾고, splice() 메서드로 그 자리의 값을 제공받은 값으로 바꿉니다. 만약 배열 끝까지 살폈는데도 빈 공간이 없다면 push() 메서드로 배열 맨 뒤에 요소를 붙여 주면 됩니다.

예제 코드

다음은 전체 구현 코드입니다 −

const arr = [13, 34, 65, null, 64, false, 65, 14, undefined, 0, , 5, , 6, , 85, , 334];

const pushAtFalsy = function(element){
   let index;
   for(index = 0; index < this.length; index++){
      if(!arr[index] && typeof arr[index] !== 'number'){
         this.splice(index, 1, element);
         break;
      }
   }
   if(index === this.length){
      this.push(element);
   }
};

Array.prototype.pushAtFalsy = pushAtFalsy;

arr.pushAtFalsy(4);
arr.pushAtFalsy(42);
arr.pushAtFalsy(424);
arr.pushAtFalsy(4242);
arr.pushAtFalsy(42424);
arr.pushAtFalsy(424242);
arr.pushAtFalsy(4242424);

console.log(arr);

출력 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다 −

[
    13,       34,       65,
     4,       64,       42,
    65,       14,      424,
     0,     4242,        5,
42424,        6,   424242,
    85,  4242424,      334
]

코드 동작 원리

pushAtFalsy 함수를 Array.prototype에 할당해 어떤 배열에서든 메서드처럼 호출할 수 있게 만듭니다.
for 반복문이 배열을 순회하며 !arr[index] 조건으로 falsy 여부를 검사합니다.
typeof arr[index] !== 'number' 조건 때문에 숫자형인 0은 유효한 값으로 취급되어 교체 대상에서 제외됩니다. 즉, 실제로 교체되는 것은 빈 슬롯(hole), null, false, undefined입니다.
falsy 값을 발견하면 splice(index, 1, element)로 해당 위치의 값을 새 요소로 교체한 뒤 break로 반복문을 즉시 종료합니다.
반복문이 끝까지 실행되어 index === this.length가 되었다면 빈 자리를 찾지 못했다는 뜻이므로, push()로 배열 맨 뒤에 요소를 추가합니다.

실행 결과를 보면 원래 배열의 null, false, undefined, 빈 슬롯 자리에 차례대로 4, 42, 424, 4242, 42424, 424242, 4242424가 채워진 것을 확인할 수 있고, 숫자형인 0은 그대로 유지됩니다.

배열의 falsy 인덱스에 요소 삽입하기 - JavaScript

요구 사항 정리

접근 방식

예제 코드

출력 결과

코드 동작 원리