자바스크립트 배열에서 자주 쓰는 함수들

배열 관련 함수는 자바스크립트에서 자주 사용되는 기능입니다.

특히 Vue 프로젝트에서는 배열을 조작하는 일이 많기 때문에, 배열에서 자주 쓰는 함수들을 잘 알고 있으면 많은 도움이 됩니다.

이번에는 배열에서 사용되는 다양한 함수들을 정리하여, 자바스크립트를 활용하는 데 필요한 핵심 배열 함수들을 소개하겠습니다.

 

자바스크립트에서 배열을 다룰 때 유용한 함수들은 크게 배열을 순회하거나, 배열의 요소를 추가하거나 제거하는 함수들입니다.

또한 배열을 필터링하거나 정렬하는 함수들도 자주 사용됩니다. 아래에서는 이런 배열 관련 함수들을 정리해보겠습니다.

 

1. 배열 순회 함수

forEach()

forEach()는 배열의 각 요소에 대해 콜백 함수를 실행합니다. 주로 배열을 순회할 때 사용됩니다. 리턴 값이 없기 때문에, 순회만 하는 용도로 사용됩니다.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => {
  console.log(number);  // 배열의 각 요소를 출력
});

map()

map()은 배열의 각 요소에 대해 지정된 함수를 호출하고, 그 결과로 새로운 배열을 반환합니다. 기존 배열은 변하지 않으며, 새로운 배열이 반환됩니다.

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

filter()

filter()는 배열을 순회하며 조건에 맞는 요소들만 골라서 새로운 배열로 반환합니다.

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

reduce()

reduce()는 배열의 각 요소를 하나씩 순회하며, 누적값을 계산하는 함수입니다. 하나의 값으로 배열을 축약할 때 사용됩니다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, number) => acc + number, 0);
console.log(sum);  // 15

some()

some()은 배열의 요소 중 하나라도 조건을 만족하면 true를 반환합니다. 조건을 만족하는 요소가 없으면 false를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber);  // true

every()

every()는 배열의 모든 요소가 조건을 만족해야 true를 반환합니다. 하나라도 조건을 만족하지 않으면 false를 반환합니다.

const numbers = [2, 4, 6, 8];
const allEven = numbers.every(number => number % 2 === 0);
console.log(allEven);  // true

find()

find()는 배열에서 조건에 맞는 첫 번째 요소를 반환합니다. 조건을 만족하는 요소가 없으면 undefined를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(number => number % 2 === 0);
console.log(firstEven);  // 2

indexOf()

indexOf()는 배열에서 특정 값의 첫 번째 인덱스를 반환합니다. 값이 없으면 -1을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const index = numbers.indexOf(3);
console.log(index);  // 2

2. 배열 요소 추가 및 제거

push()

push()는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

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

pop()

pop()은 배열의 마지막 요소를 제거하고, 그 요소를 반환합니다.

const numbers = [1, 2, 3];
const popped = numbers.pop();
console.log(popped);  // 3
console.log(numbers);  // [1, 2]

shift()

shift()는 배열의 첫 번째 요소를 제거하고, 그 요소를 반환합니다.

const numbers = [1, 2, 3];
const shifted = numbers.shift();
console.log(shifted);  // 1
console.log(numbers);  // [2, 3]

unshift()

unshift()는 배열의 앞에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

const numbers = [1, 2, 3];
numbers.unshift(0);
console.log(numbers);  // [0, 1, 2, 3]

splice()

splice()는 배열에서 특정 위치에 요소를 추가하거나 제거할 수 있습니다. 첫 번째 인자로 시작 인덱스를, 두 번째 인자로 삭제할 요소의 수를 지정합니다.

const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1, 6);  // 2번 인덱스에서 1개를 지우고 6을 추가
console.log(numbers);  // [1, 2, 6, 4, 5]

3. 배열 정렬 및 변환

sort()

sort()는 배열의 요소를 정렬합니다. 기본적으로 문자열 기준으로 정렬되므로, 숫자를 정렬할 때는 비교 함수를 제공해야 합니다.

const numbers = [5, 3, 8, 1];
numbers.sort((a, b) => a - b);  // 오름차순 정렬
console.log(numbers);  // [1, 3, 5, 8]

reverse()

reverse()는 배열의 순서를 반대로 뒤집습니다.

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

join()

join()은 배열의 모든 요소를 하나의 문자열로 결합합니다. 구분자를 지정할 수 있습니다.

const words = ['Hello', 'World'];
const sentence = words.join(' ');  // 'Hello World'
console.log(sentence);

concat()

concat()은 배열을 합쳐서 새로운 배열을 반환합니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = arr1.concat(arr2);
console.log(combined);  // [1, 2, 3, 4, 5, 6]

4. 배열의 기타 유용한 함수

flat()

flat()은 중첩된 배열을 평평하게 만들어 하나의 배열로 만듭니다.

const nested = [1, [2, 3], [4, 5]];
const flatArray = nested.flat();
console.log(flatArray);  // [1, 2, 3, 4, 5]

slice()

slice()는 배열의 일부분을 잘라서 새로운 배열을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const sliced = numbers.slice(1, 3);  // 1번 인덱스부터 3번 인덱스 전까지
console.log(sliced);  // [2, 3]

---

 

자바스크립트 배열은 다양한 내장 함수들을 제공하여 배열을 편리하게 처리할 수 있습니다.

forEach(), map(), filter()와 같은 순회 함수들은 배열의 데이터를 처리할 때 매우 유용하고,

push(), pop() 등의 배열 조작 함수는 배열의 구조를 바꿀 때 사용됩니다.

또한 reduce(), sort(), flat() 등 배열을 합치거나 변형하는 함수들 역시 자주 쓰이므로, 이들을 잘 활용하면 효율적으로 코드를 작성할 수 있습니다.