자바스크립트는 기본적으로 배열을 다루는 다양한 메소드(Method)를 제공합니다. 이러한 메소드들을 활용하면 배열 데이터를 쉽고 효율적으로 다룰 수 있습니다. 이번 블로그 포스트에서는 몇 가지 자주 사용되는 자바스크립트 배열 메소드들을 살펴보겠습니다.
1. push()
와 pop()
push()
메소드는 배열의 끝에 새로운 요소를 추가합니다. 예를 들어, 다음과 같이 사용할 수 있습니다.
let fruits = ['apple', 'banana', 'orange'];
fruits.push('strawberry');
console.log(fruits); // ['apple', 'banana', 'orange', 'strawberry']
반대로, pop()
메소드는 배열의 마지막 요소를 제거하고 리턴합니다.
let fruits = ['apple', 'banana', 'orange'];
let removed = fruits.pop();
console.log(removed); // 'orange'
console.log(fruits); // ['apple', 'banana']
2. splice()
splice()
메소드는 주어진 인덱스에서부터 지정한 개수의 요소를 제거하고, 필요에 따라 새로운 요소를 추가합니다.
let fruits = ['apple', 'banana', 'orange', 'kiwi'];
fruits.splice(2, 1, 'grape', 'watermelon');
console.log(fruits); // ['apple', 'banana', 'grape', 'watermelon', 'kiwi']
위 코드에서 splice(2, 1, 'grape', 'watermelon')
은 배열 fruits
에서 인덱스 2부터 1개의 요소를 제거하고, 그 자리에 ‘grape’와 ‘watermelon’을 추가한다는 의미입니다.
3. forEach()
forEach()
메소드는 배열의 각 요소마다 콜백 함수를 실행합니다. 콜백 함수는 배열의 요소, 인덱스, 배열 자체를 인자로 받아 실행됩니다. 예를 들어, 다음과 같이 사용할 수 있습니다.
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(item, index, array) {
console.log('Item:', item);
console.log('Index:', index);
console.log('Array:', array);
});
위 코드에서는 numbers
배열의 각 요소에 대해 콜백 함수를 실행하며, 콜백 함수의 인자로 현재 요소, 인덱스, 배열 자체가 전달됩니다.
4. map()
map()
메소드는 배열의 각 요소마다 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다. 예를 들어, 다음과 같이 사용할 수 있습니다.
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(item) {
return item * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
map()
메소드는 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 doubledNumbers
배열에 저장합니다.
5. filter()
filter()
메소드는 주어진 조건에 맞는 요소들로 이루어진 새로운 배열을 반환합니다. 예를 들어, 다음과 같이 사용할 수 있습니다.
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(item) {
return item % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
위 코드에서 filter()
메소드는 numbers
배열에서 짝수에 해당하는 요소들로 이루어진 새로운 배열인 evenNumbers
를 반환합니다.
이와 같이 자바스크립트 배열 메소드를 효율적으로 사용하면, 배열 데이터를 다루는 작업을 더욱 간단하고 편리하게 할 수 있습니다. 다양한 배열 메소드들을 익히고 활용하여 자바스크립트 개발을 더욱 효율적으로 하세요.