자바스크립트 배열 메서드 정리와 활용 예

자바스크립트 배열 메서드 완벽 가이드

자바스크립트에서 배열은 프로그래밍 중 가장 기본적이고 강력한 데이터 구조 중 하나입니다. 배열을 다룰 때는 다양한 내장 메서드를 활용할 수 있으며, 이 메서드들은 데이터를 효율적으로 처리하고 관리하는 데 큰 도움이 됩니다. 이번 글에서는 자바스크립트 배열 메서드와 그 활용 예시에 대해 살펴보도록 하겠습니다.

배열 메서드의 종류

자바스크립트 배열에서 자주 사용하는 메서드는 여러 가지가 있으며, 이들 각각은 특정한 작업을 수행합니다. 다음은 자주 사용되는 배열 메서드입니다.

• slice()
• join()
• reverse()
• fill()
• includes()
• flat()
• forEach()
• map()
• filter()
• reduce()
• sort()

slice() 메서드

slice() 메서드는 배열의 특정 부분을 추출하여 새로운 배열을 생성합니다. 이 메서드는 첫 번째 인수로 시작 인덱스를 받고, 두 번째 인수로 종료 인덱스를 받아 해당 범위의 요소를 복사합니다. 만약 두 번째 인수를 생략하면 지정한 인덱스부터 배열의 끝까지 복사합니다. 또한, 음수를 사용하면 배열의 마지막에서부터 요소를 선택할 수 있습니다.

const fruits = ['사과', '바나나', '체리', '포도'];
const slicedFruits = fruits.slice(1, 3); // ['바나나', '체리'] 반환

join() 메서드

join() 메서드는 배열의 모든 요소를 문자열로 변환하고, 인수로 전달한 구분자로 연결된 문자열을 생성합니다. 기본 구분자는 쉼표(‘,’)이며, 다른 구분자를 사용할 수도 있습니다.

const numbers = [1, 2, 3, 4];
const joinedNumbers = numbers.join('-'); // '1-2-3-4' 반환

reverse() 메서드

reverse() 메서드는 원본 배열의 요소 순서를 반전시킵니다. 이 메서드는 배열을 직접 수정하며, 변경된 배열을 반환합니다.

const list = [1, 2, 3, 4];
list.reverse(); // [4, 3, 2, 1]

fill() 메서드

fill() 메서드는 배열을 특정 값으로 채우는 데 사용됩니다. 첫 번째 인수로 채울 값을 전달하고, 두 번째 인수와 세 번째 인수로 채우기 시작할 인덱스와 채우기를 끝낼 인덱스를 설정할 수 있습니다.

const arr = [1, 2, 3, 4];
arr.fill(0, 1, 3); // [1, 0, 0, 4]

includes() 메서드

includes() 메서드는 배열 안에 특정 요소가 포함되어 있는지를 확인하고, 결과를 true 또는 false로 반환합니다. 기본적으로 첫 번째 인수로 검색할 요소를 지정하고, 두 번째 인수로 검색을 시작할 인덱스를 지정할 수 있습니다.

const colors = ['빨강', '파랑', '노랑'];
console.log(colors.includes('파랑')); // true

flat() 메서드

flat() 메서드는 다차원 배열을 평탄화하여 한 차원만큼 줄여주는 역할을 합니다. 인수로 평탄화할 깊이를 지정할 수 있으며, 기본값은 1입니다.

const nestedArray = [1, [2, [3, [4]]]];
const flatArray = nestedArray.flat(2); // [1, 2, 3, [4]] 반환

forEach() 메서드

forEach() 메서드는 배열의 각 요소에 대해 특정 작업을 수행하는 콜백 함수를 실행합니다. 이 메서드는 새로운 배열을 생성하지 않으며, 원본 배열을 반복하며 각각의 요소에 대해 주어진 기능을 수행합니다.

const numbers = [1, 2, 3];
numbers.forEach(number => console.log(number * 2)); // 2, 4, 6 출력

map() 메서드

map() 메서드는 자신을 호출한 배열의 모든 요소를 순회하며, 각 요소에 대해 제공된 콜백 함수를 실행한 결과로 새로운 배열을 생성합니다. 원본 배열은 변하지 않습니다.

const square = [1, 2, 3];
const squared = square.map(num => num ** 2); // [1, 4, 9]

filter() 메서드

filter() 메서드는 배열에서 특정 조건을 만족하는 요소를 추출하여 새로운 배열을 반환합니다. 조건을 만족하는 요소만 포함되며, 원본 배열은 변경되지 않습니다.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0); // [2, 4] 반환

reduce() 메서드

reduce() 메서드는 배열의 모든 요소를 누적하여 단일 값으로 변환하는 데 사용됩니다. 예를 들어, 배열의 합계를 구할 때 매우 유용합니다.

const sum = [1, 2, 3, 4].reduce((accumulator, current) => accumulator + current, 0); // 10 반환

sort() 메서드

sort() 메서드는 배열의 요소를 정렬하는 데 사용됩니다. 기본적으로 알파벳 순서로 정렬되며, 숫자 배열의 경우에는 비교 함수를 전달하여 정확한 정렬을 구현해야 합니다.

const nums = [3, 1, 4, 2];
nums.sort((a, b) => a - b); // [1, 2, 3, 4]

결론

이번 글에서는 자바스크립트에서 자주 사용하는 배열 메서드의 종류와 그 활용 방법에 대해 살펴보았습니다. 각 메서드는 특정 상황에서 매우 유용하게 사용될 수 있으며, 이를 통해 효율적인 코드를 작성할 수 있습니다. 배열 메서드를 잘 활용하여 더욱 편리하게 자바스크립트를 다뤄보시기 바랍니다!

질문 FAQ