프로그래밍 「 자바스크립트 편」예제와 함께 설명되는 가장 유용한 20가지 JavaScript 배열 방법

님이 촬영 한 사진 케빈 칸라스 on Unsplash

예제와 함께 설명되는 가장 유용한 20가지 JavaScript 배열 방법

JavaScript 배열은 개발자가 데이터를 효율적으로 조작하고 작업할 수 있도록 하는 다양한 메서드 집합을 제공합니다. 이 기사에서는 이러한 강력한 도구를 마스터하는 데 도움이 되는 가장 유용한 20가지 JavaScript 배열 방법과 실제 예제를 살펴봅니다.

• push():
  push() 메서드는 배열 끝에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.

const numbers = [1, 2, 3];
numbers.push(4, 5);
console.log(numbers); // Output: [1, 2, 3, 4, 5]

• pop():
  pop() 메서드는 배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const removedElement = numbers.pop();
console.log(numbers); // Output: [1, 2, 3, 4]
console.log(removedElement); // Output: 5

• shift():
  shift() 메서드는 배열에서 첫 번째 요소를 제거하고 해당 요소를 반환하여 다른 모든 요소를 하나씩 아래로 이동합니다.

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

• unshift():
  unshift() 메서드는 배열의 시작 부분에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.

const numbers = [2, 3, 4, 5];
numbers.unshift(1);
console.log(numbers); // Output: [1, 2, 3, 4, 5]

• concat():
  concat() 메서드는 둘 이상의 배열을 결합하고 새 배열을 반환합니다.

const array1 = [1, 2, 3];
const array2 = [4, 5];
const combinedArray = array1.concat(array2);
console.log(combinedArray); // Output: [1, 2, 3, 4, 5]

• join():
  join() 메서드는 지정된 구분 기호를 사용하여 배열의 모든 요소를 문자열로 결합합니다.

const elements = ['Hello', 'World'];
const joinedString = elements.join(' ');
console.log(joinedString); // Output: 'Hello World'

• slice():
  slice() 메서드는 시작 인덱스에서 끝 인덱스(끝 인덱스는 포함되지 않음)에서 선택된 원래 배열의 일부를 포함하는 새 배열을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const slicedArray = numbers.slice(1, 4);
console.log(slicedArray); // Output: [2, 3, 4]

• splice():
  splice() 메서드는 요소를 제거, 교체 또는 추가하여 원래 배열을 수정합니다.

const fruits = ['apple', 'banana', 'cherry', 'date'];
// Removing elements
const removedElements = fruits.splice(1, 2);
console.log(fruits); // Output: ['apple', 'date']
console.log(removedElements); // Output: ['banana', 'cherry']

// Adding elements
fruits.splice(1, 0, 'blueberry', 'grape');
console.log(fruits); // Output: ['apple', 'blueberry', 'grape', 'date']

// Replacing elements
fruits.splice(2, 1, 'kiwi', 'mango');
console.log(fruits); // Output: ['apple', 'blueberry', 'kiwi', 'mango', 'date']

• indexOf():
  indexOf() 메서드는 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하거나, 인덱스가 없으면 -1을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.indexOf(3)); // Output: 2
console.log(numbers.indexOf(6)); // Output: -1

• lastIndexOf():
  lastIndexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 마지막 인덱스를 반환하거나 인덱스가 없는 경우 -1을 반환합니다.

const numbers = [1, 2, 3, 4, 3, 5];
console.log(numbers.lastIndexOf(3)); // Output: 4
console.log(numbers.lastIndexOf(6)); // Output: -1

• forEach():
  forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => {
  console.log(num * 2);
});
// Output:
// 2
// 4
// 6
// 8
// 10

• map():
  map() 메서드는 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 새 배열을 만듭니다.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

• filter():
  filter() 메서드는 제공된 함수에 의해 구현된 테스트를 통과한 모든 요소로 새 배열을 만듭니다.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

• reduce():
  reduce() 메서드는 누적기와 배열의 각 요소에 대해 함수를 적용하여 단일 값으로 줄입니다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current);
console.log(sum); // Output: 15

• every():
  every() 메서드는 배열의 모든 요소가 제공된 함수에 의해 구현된 테스트를 통과하는지 테스트합니다.

const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every((num) => num > 0);
console.log(allPositive); // Output: true

• some():
  some() 메서드는 배열에 있는 하나 이상의 요소가 제공된 함수에 의해 구현된 테스트를 통과하는지 테스트합니다.

const numbers = [1, 2, 3, 4, 5];
const hasNegative = numbers.some((num) => num < 0);
console.log(hasNegative); // Output: false

• find():
  find() 메서드는 제공된 테스트 함수를 충족하는 배열의 첫 번째 요소를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find((num) => num > 3);
console.log(foundNumber); // Output: 4

• findIndex():
  findIndex() 메서드는 제공된 테스트 함수를 충족하는 배열의 첫 번째 요소의 인덱스를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const foundIndex = numbers.findIndex((num) => num > 3);
console.log(foundIndex); // Output: 3

• sort():
  sort() 메서드는 배열의 요소를 제자리에 정렬하고 정렬된 배열을 반환합니다.

const fruits = ['banana', 'apple', 'cherry', 'date'];
fruits.sort();
console.log(fruits); // Output: ['apple', 'banana', 'cherry', 'date']

• reverse():
  reverse() 메서드는 배열의 요소 순서를 반대로 합니다.

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // Output: [5, 4, 3, 2, 1]

이 20개의 JavaScript 배열 메서드는 배열을 조작, 검색 및 변환하는 광범위한 기능을 제공합니다. 이러한 방법을 마스터하면 JavaScript 애플리케이션에서 다양한 데이터 조작 작업을 효율적이고 효과적으로 처리할 수 있습니다.