배열 JavaScript에서 요소를 제거하고 깨끗한 코드를 작성하는 방법

by

자바스크립트 코드를 작성하다 보면 배열을 다루는 경우가 많습니다. 그렇다면 자바스크립트 배열에서 특정 요소를 어떻게 삭제할 수 있을까요?

자바스크립트에서 배열은 데이터 저장을 위한 전역 객체 유형입니다. 자바스크립트 배열은 0개 이상의 데이터 유형이나 순서가 있는 컬렉션을 포함하는 목록을 가질 수 있습니다. 배열 내 특정 항목에 접근하려면 0부터 시작하는 인덱스 번호를 사용해야 합니다.

본 글에서는 자바스크립트에서 배열을 만드는 구문과 자바스크립트 배열에서 요소를 제거해야 하는 이유, 그리고 원본 배열을 변경하거나 변경하지 않고 요소를 제거하는 다양한 방법에 대해 알아보겠습니다.

자바스크립트 배열 구문

배열을 사용하면 하나의 변수에 여러 항목을 저장할 수 있습니다. 예를 들어, 7개 대륙을 자바스크립트로 표현하려면 다음 코드를 사용할 수 있습니다.

const continent1 = "Asia";
const continent2 = "Africa";
const continent3 = "North America";
const continent4 = "South America";
const continent5 = "Antarctica";
const continent6 = "Europe";
const continent7 = "Australia"

하지만 위 코드를 압축하여 배열로 아래와 같이 나타낼 수 있습니다.

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

여러 변수를 사용하는 대신 단 하나의 변수와 대괄호를 사용하여 객체를 표현할 수 있게 되었습니다.

목록에서 첫 번째 대륙에 접근하려면 다음과 같은 명령어를 실행합니다. console.log(continents[0])

저희가 제공하는 온라인 자바스크립트 컴파일러를 사용하여 코드를 테스트해 볼 수 있습니다.

결과는 다음과 같습니다:

배열의 마지막 항목에 접근하려면 console.log(continents[6])을 실행합니다.

자바스크립트의 인덱스는 0부터 시작합니다.

자바스크립트 배열에서 요소를 삭제해야 하는 이유?

자바스크립트 배열은 문자열, 숫자 및 다양한 데이터 구조와 함께 사용할 수 있습니다. 그러나 때로는 배열에서 하나 이상의 요소를 삭제해야 할 때도 있습니다. 다음은 몇 가지 시나리오입니다.

  • 동적 데이터 처리: 배열에 동적인 데이터 집합을 저장할 수 있습니다. 변경되는 요구사항에 따라 배열에서 요소를 제거해야 할 수도 있습니다.
  • 데이터 무결성 유지: 배열에서 오래된 정보를 삭제하여 데이터 구조를 최신 상태로 유지할 수 있습니다.
  • 메모리 관리: 코드 크기는 애플리케이션 성능에 영향을 미칩니다. 배열에서 불필요한 정보를 제거하여 코드 최적화를 할 수 있습니다.

원본 배열 변경 없이 요소 제거

원본 배열을 변경하지 않고 요소를 제거하려면, 제거할 요소를 제외한 새 배열을 생성하는 것이 좋습니다. 이러한 접근 방식은 함수 매개변수와 같은 배열에 적합합니다. 아래와 같은 접근 방식을 사용할 수 있습니다.

#1. slice()를 사용하여 요소 제거

slice() 메서드를 사용하여 목록에서 첫 번째 대륙을 제거할 수 있습니다.

다음은 원본 코드입니다:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

새 배열을 다음과 같이 생성합니다:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// slice()를 사용하여 첫 번째 요소 제거
let newContinents = continents.slice(1);
// 결과 확인
console.log(newContinents);

출력 결과는 다음과 같습니다:

[
    'Africa',
    'North America',
    'South America',
    'Antarctica',
    'Europe',
    'Australia'
]

#2. filter()를 사용하여 배열에서 첫 번째 요소 제거

filter() 메서드는 특정 조건을 충족하는 요소들로 구성된 새로운 배열을 생성합니다. 배열에서 첫 번째 요소를 제외하는 조건을 설정할 수 있습니다. 방법은 다음과 같습니다:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// filter() 메서드를 사용하여 첫 번째 요소 제거
let newContinents = continents.filter((continent, index) => index !== 0);
console.log(newContinents);

코드를 실행하면 다음과 같은 결과가 출력됩니다:

[
    'Africa',
    'North America',
    'South America',
    'Antarctica',
    'Europe',
    'Australia'
]

#3. slice()와 concat()을 함께 사용하여 모든 위치에서 요소 제거

앞선 예제에서는 목록의 첫 번째 요소를 제거했습니다. 배열에서 세 번째나 네 번째 요소를 제거하고 싶다면 어떻게 해야 할까요? 이때 slice()와 concat() 메서드를 함께 사용해야 합니다. 다음 예제는 네 번째 요소를 제거하는 방법입니다.

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

// slice()와 concat()을 사용하여 네 번째 요소 제거
let continentsWithoutFourth = continents.slice(0, 3).concat(continents.slice(4));
console.log(continentsWithoutFourth);

위 코드를 실행하면 다음 결과가 출력됩니다:

[
  'Asia',
  'Africa',
  'North America',
  'Antarctica',
  'Europe',
  'Australia'
]

slice() 메서드는 두 개의 새로운 조각을 생성하고, concat() 메서드를 사용하여 두 조각을 결합하면서 네 번째 요소는 제외됩니다. 이 방법은 배열의 모든 요소에 적용할 수 있습니다.

#4. for 루프와 push()를 함께 사용하여 요소 제거

for 루프와 push() 메서드를 사용하여 목록에서 다섯 번째 요소를 제외할 수 있습니다. 다음 코드를 살펴보세요:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

// for 루프와 push()를 사용하여 다섯 번째 요소 제거
let continentsWithoutFifth = [];
for (let i = 0; i < continents.length; i++) {
  if (i !== 4) {
    continentsWithoutFifth.push(continents[i]);
  }
}
console.log(continentsWithoutFifth);

for 루프는 대륙 배열의 각 요소를 순회합니다. if 문을 사용하여 현재 인덱스가 4가 아닌지 확인하고, 조건이 참이면 새 배열에 해당 요소를 추가합니다.

코드를 실행하면 다음과 같은 결과가 출력됩니다:

[
    'Asia',
    'Africa',
    'North America',
    'South America',
    'Europe',
    'Australia'
]

원본 배열을 변경하여 요소 제거

원래 배열의 구조를 변경하여 요소를 제거할 수도 있습니다. 다음은 몇 가지 방법입니다.

#1. pop()을 사용하여 배열에서 요소 제거

pop() 메서드를 사용하면 대륙 배열에서 마지막 요소를 제거할 수 있습니다. 원본 코드는 다음과 같습니다.

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

다음 코드를 사용하여 마지막 요소를 제거할 수 있습니다:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

// pop()을 사용하여 마지막 요소 제거
let lastContinent = continents.pop();

실행 결과:

console.log("업데이트된 대륙 배열:", continents);

업데이트된 목록은 다음과 같습니다:

업데이트된 대륙 배열: [
    'Asia',
    'Africa',
    'North America',
    'South America',
    'Antarctica',
    'Europe'
]

제거된 요소는 다음 코드로 확인할 수 있습니다:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// pop()을 사용하여 마지막 요소 제거
let lastContinent = continents.pop();
console.log("제거된 대륙:", lastContinent);

#2. splice()를 사용하여 배열에서 요소 제거

splice() 메서드를 사용하면 배열의 특정 인덱스에서 요소를 제거할 수 있습니다. 다음 코드를 사용하여 인덱스 2에서 요소를 제거할 수 있습니다:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// splice()를 사용하여 인덱스 2에서 요소 제거
let removedElement = continents.splice(2, 1);
console.log("제거된 요소:", removedElement);
console.log("업데이트된 대륙 배열:", continents);

이 코드는 원래 배열을 변경하고 제거된 요소를 반환합니다. 코드에는 ‘제거된 요소’와 ‘업데이트된 대륙 배열’을 확인하는 두 개의 console.log 문이 있습니다.

전체 코드를 실행하면 다음과 같은 결과가 출력됩니다:

제거된 요소: [ 'North America' ]
업데이트된 대륙 배열: [
    'Asia',
    'Africa',
    'South America',
    'Antarctica',
    'Europe',
    'Australia'
]

#3. shift()를 사용하여 배열에서 첫 번째 요소 제거

shift() 메서드는 자바스크립트 배열에서 첫 번째 요소를 제거합니다. 이 메서드는 원본 배열을 변경하고 제거된 요소를 반환합니다. 대륙 배열을 계속 사용하겠습니다.

다음과 같이 첫 번째 요소를 제거할 수 있습니다:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// shift()를 사용하여 첫 번째 요소 제거
let removedContinent = continents.shift();
console.log("제거된 대륙:", removedContinent);
console.log("업데이트된 대륙 배열:", continents);

여기에도 ‘제거된 대륙’과 ‘업데이트된 대륙’을 반환하는 두 개의 console.log 문이 있습니다.

코드를 실행하면 다음과 같은 결과가 출력됩니다:

제거된 대륙: Asia
업데이트된 대륙 배열: [
    'Africa',
    'North America',
    'South America',
    'Antarctica',
    'Europe',
    'Australia'
]

자바스크립트에서 배열에 요소 추가

지금까지 배열에서 요소를 제거하는 방법에 대해 이야기했습니다. 하지만 때로는 배열에 새로운 요소를 추가해야 할 때도 있습니다. 다음은 몇 가지 방법입니다.

#1. push() 메서드

다음 예제에서 이 코드를 사용합니다.

let colors = ['red', 'blue', 'green', 'yellow', 'purple'];

push() 메서드를 사용하여 배열 끝에 새로운 색상을 추가할 수 있습니다.

let colors = ['red', 'blue', 'green', 'yellow', 'purple'];

// 배열에 새 색상 추가
colors.push('orange');

이제 배열에는 6가지 색상이 있습니다.

#2. unshift() 메서드

unshift() 메서드를 사용하면 배열의 시작 부분에 새로운 요소를 추가할 수 있습니다. 여전히 색상 배열을 사용하겠습니다.

let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// 배열에 새 색상 추가
colors.unshift('orange');
console.log(colors);

다음 스크린샷에서 볼 수 있듯이, 이제 주황색이 배열의 첫 번째 색상입니다.

결론

이제 자바스크립트 배열에서 요소를 제거하고 효율적인 코드를 생성하는 방법을 이해했습니다. 어떤 방법을 사용할지는 최종 목표, 기술 및 선호도에 따라 달라집니다.

만약 간단한 접근 방식을 원하고 원본 배열을 변경하고 싶지 않다면 slice() 메서드가 최적의 선택입니다. 하지만 요소를 제거하고 싶다면 slice()와 concat() 메서드의 조합이 훌륭한 선택이 될 것입니다.

개발자를 위한 자바스크립트 치트 시트 관련 기사도 살펴보세요.