JavaScript 자바스크립트 배열(Array) 메서드 사용법

자바스크립트 배열 메서드란?

자바스크립트 배열 메서드는 배열에 대해 다양한 작업을 수행하는 함수들을 말합니다. 이러한 메서드들은 배열을 조작하거나 배열 요소를 검색, 변환하는 데 사용됩니다.

주요 배열 메서드

push(element1, …, elementN)

배열의 끝에 하나 이상의 요소를 추가합니다.

let fruits = ['사과', '바나나'];
fruits.push('딸기');
// 결과: ['사과', '바나나', '딸기']

pop()

배열의 끝에서 요소를 제거하고 반환합니다.

let fruits = ['사과', '바나나', '딸기'];
let removedFruit = fruits.pop();
// 결과: removedFruit = '딸기', fruits = ['사과', '바나나']

unshift(element1, …, elementN)

let fruits = ['사과', '바나나'];
fruits.unshift('수박');
// 결과: ['수박', '사과', '바나나']

shift()

배열의 시작에서 요소를 제거하고 반환합니다.

let fruits = ['수박', '사과', '바나나'];
let removedFruit = fruits.shift();
// 결과: removedFruit = '수박', fruits = ['사과', '바나나']

splice(start, deleteCount, item1, …, itemN)

배열에서 요소를 추가하거나 제거합니다.

• start: 배열에서 변경을 시작할 인덱스입니다.
• deleteCount: 제거할 요소의 수입니다. 0이면 요소를 제거하지 않습니다.
• item1, …, itemN: 추가할 요소입니다.

let fruits = ['사과', '바나나', '딸기'];
fruits.splice(1, 1, '포도');
// 결과: ['사과', '포도', '딸기']

slice(start, end)

배열의 일부를 추출하여 새로운 배열을 반환합니다.

• start: 추출을 시작할 인덱스로, 이 인덱스의 요소를 포함합니다.
• end: 추출을 종료할 인덱스로, 이 인덱스의 바로 앞에 위치한 요소까지 추출합니다. 만약 생략하면 배열의 끝까지 추출합니다.

let fruits = ['사과', '바나나', '딸기', '포도'];
let citrus = fruits.slice(1, 3);
// 결과: citrus = ['바나나', '딸기']

concat(array1, array2, …, arrayN)

하나 이상의 배열을 결합하여 새로운 배열을 반환합니다.

let fruits = ['사과', '바나나'];
let moreFruits = ['딸기', '포도'];
let combinedFruits = fruits.concat(moreFruits);
// 결과: combinedFruits = ['사과', '바나나', '딸기', '포도']

indexOf(element, fromIndex)

배열에서 특정 요소의 첫 번째 인덱스를 반환합니다. 해당 요소가 없으면 -1을 반환합니다.

• element: 찾을 요소입니다.
• fromIndex (선택 사항): 검색을 시작할 인덱스입니다. 이 인덱스부터 배열의 끝까지 검색합니다. 기본값은 0입니다.

let fruits = ['사과', '바나나', '딸기', '바나나'];
let bananaIndex = fruits.indexOf('바나나');
// 결과: bananaIndex = 1

lastIndexOf(element, fromIndex)

배열에서 특정 요소의 마지막 인덱스를 반환합니다. 해당 요소가 없으면 -1을 반환합니다.

• element: 찾을 요소입니다.
• fromIndex (선택 사항): 검색을 시작할 인덱스입니다. 이 인덱스부터 배열의 처음까지 역방향으로 검색합니다. 기본값은 배열의 마지막 인덱스입니다.

let fruits = ['사과', '바나나', '딸기', '바나나'];
let lastBananaIndex = fruits.lastIndexOf('바나나');
// 결과: lastBananaIndex = 3

includes(element)

배열에 특정 요소가 포함되어 있는지 여부를 확인하는 데 사용됩니다.

• 이 메서드는 불리언 값을 반환하며, 포함되어 있다면 true를 반환하고, 그렇지 않으면 false를 반환합니다

let fruits = ['사과', '바나나', '딸기', '포도'];

// '딸기'가 배열에 포함되어 있는지 확인
let includesStrawberry = fruits.includes('딸기');
// 결과: includesStrawberry = true

// '수박'이 배열에 포함되어 있는지 확인
let includesWatermelon = fruits.includes('수박');
// 결과: includesWatermelon = false

forEach(callback)

배열의 각 요소에 대해 주어진 함수를 실행합니다.

let fruits = ['사과', '바나나', '딸기'];
fruits.forEach(function (fruit, index) {
  console.log(index, fruit);
});
// 결과: 0 사과, 1 바나나, 2 딸기

map(callback)

배열의 각 요소에 대해 주어진 함수를 실행하고, 새로운 배열을 반환합니다.

let numbers = [1, 2, 3];
let squaredNumbers = numbers.map(function(number) {
    return number * number;
});
// 결과: squaredNumbers = [1, 4, 9]

filter(callback)

주어진 조건을 만족하는 요소로 이루어진 배열을 반환합니다.

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});
// 결과: evenNumbers = [2, 4]

결론

JavaScript의 배열 메서드들은 데이터를 효과적으로 다룰 수 있는 도구들입니다. push(), pop(), unshift(), shift()와 같은 기본적인 메서드들은 배열의 끝이나 앞에 요소를 추가하거나 제거하는 데 사용됩니다. 또한, slice()와 splice()를 사용하여 배열의 일부를 추출하거나 대체할 수 있습니다.

배열을 반복하고 조작하는 데에는 forEach(), map(), filter()와 같은 메서드들이 유용합니다. forEach()는 배열의 각 요소에 함수를 적용하며, map()은 각 요소에 대한 새로운 배열을 생성합니다. filter()는 주어진 조건을 만족하는 요소들로 이루어진 배열을 반환합니다.

이러한 배열 메서드들은 코드를 간결하고 가독성 있게 작성할 수 있도록 도와주며, 데이터 처리 작업을 더 효율적으로 수행할 수 있습니다. 따라서, JavaScript 에서는 이러한 배열 메서드들을 적절히 활용하여 코드를 작성하는 것이 중요합니다.