ProgrammingLanguageJavaScript

[JavaScript] Array Methods

, ,

JavaScript는 배열 작업을 위한 많은 강력한 도구를 제공하는 다용도 언어입니다. 가장 일반적으로 사용되는 도구 중 하나는 배열을 조작하고 변환하기 위한 다양한 메서드를 제공하는 Array 개체입니다. 이 글에서는 JavaScript에서 가장 중요하고 유용한 배열 메서드 중 일부를 자세히 살펴보겠습니다.

forEach()

forEach() 메서드는 배열을 반복하고 각 요소에 대해 콜백 함수를 실행합니다. 예는 다음과 같습니다.

1
2
3
4
5
const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => {
  console.log(number);
});

그러면 다음이 출력됩니다.

1
2
3
4
5
1
2
3
4
5

map()

map() 메서드는 배열의 각 요소에 콜백 함수를 적용하여 새 배열을 만듭니다. 예는 다음과 같습니다.

1
2
3
4
5
6
7
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers);

그러면 다음이 출력됩니다.

1
[2, 4, 6, 8, 10]

filter()

filter() 메서드는 특정 테스트를 통과한 모든 요소가 포함된 새 배열을 만듭니다. 예는 다음과 같습니다.

1
2
3
4
5
6
7
const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(evenNumbers);

그러면 다음이 출력됩니다.

1
[2, 4]

reduce()

reduce() 메서드는 배열의 각 요소에 콜백 함수를 적용하여 배열을 단일 값으로 줄입니다. 예는 다음과 같습니다.

1
2
3
4
5
6
7
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum);

그러면 다음이 출력됩니다.

1
15

find()

find() 메서드는 배열에서 특정 조건을 만족하는 첫 번째 요소의 값을 반환합니다. 예는 다음과 같습니다.

1
2
3
4
5
6
7
const numbers = [1, 2, 3, 4, 5];

const firstEvenNumber = numbers.find((number) => {
  return number % 2 === 0;
});

console.log(firstEvenNumber);

그러면 다음이 출력됩니다.

1
2

findIndex()

findIndex() 메서드는 배열에서 특정 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 예는 다음과 같습니다.

1
2
3
4
5
6
7
const numbers = [1, 2, 3, 4, 5];

const firstEvenNumberIndex = numbers.findIndex((number) => {
  return number % 2 === 0;
});

console.log(firstEvenNumberIndex);

그러면 다음이 출력됩니다.

1
1

some()

some() 메서드는 배열의 요소 중 하나 이상이 특정 조건을 만족하는지 확인합니다. 예는 다음과 같습니다.

1
2
3
4
5
6
7
const numbers = [1, 2, 3, 4, 5];

const hasEvenNumbers = numbers.some((number) => {
  return number % 2 === 0;
});

console.log(hasEvenNumbers);

그러면 다음이 출력됩니다.

1
true

every()

every() 메서드는 배열의 모든 요소가 특정 기준을 충족하는지 확인합니다. 예는 다음과 같습니다.

1
2
3
4
5
6
7
const numbers = [2, 4, 6, 8, 10];

const allEven = numbers.every((number) => {
  return number % 2 === 0;
});

console.log(allEven);

sort()

sort() 메서드는 배열의 요소를 정렬합니다. 예는 다음과 같습니다.

1
2
3
4
5
const fruits = ['apple', 'orange', 'banana'];

const sortedFruits = fruits.sort();

console.log(sortedFruits);

그러면 다음이 출력됩니다.

1
["apple", "banana", "orange"]

includes()

include() 메서드는 배열에 특정 값이 포함되어 있는지 확인합니다. 예는 다음과 같습니다.

1
2
3
4
5
const numbers = [1, 2, 3, 4, 5];

const hasNumberThree = numbers.includes(3);

console.log(hasNumberThree);

그러면 다음이 출력됩니다.

1
true

flat()

flat() 메서드는 모든 하위 배열 요소가 지정된 깊이까지 반복적으로 연결되어 있는 새 배열을 만듭니다. 예는 다음과 같습니다.

1
2
3
4
5
const numbers = [1, [2, 3], [4, [5, 6]]];

const flattenedNumbers = numbers.flat(2);

console.log(flattenedNumbers);

그러면 다음이 출력됩니다.

1
[1, 2, 3, 4, 5, 6]

flatMap()

flatMap() 메서드는 먼저 매핑 함수를 사용하여 각 요소를 매핑한 다음 결과를 새 배열로 평면화합니다. 예는 다음과 같습니다.

1
2
3
4
5
6
7
const numbers = [1, 2, 3, 4, 5];

const doubledAndFlattenedNumbers = numbers.flatMap((number) => {
  return [number * 2];
});

console.log(doubledAndFlattenedNumbers);

그러면 다음이 출력됩니다.

1
[2, 4, 6, 8, 10]

from()

from() 메서드는 배열 유사 객체 또는 반복 가능 객체에서 새 배열을 만듭니다. 예는 다음과 같습니다.

1
2
3
4
5
const arrayLikeObject = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

const newArray = Array.from(arrayLikeObject);

console.log(newArray);

그러면 다음이 출력됩니다.

1
["a", "b", "c"]

Array Destructuring

Array Destructuring를 사용하면 배열에서 값을 추출하여 변수에 할당할 수 있습니다. 예는 다음과 같습니다.

1
2
3
4
5
6
7
const numbers = [1, 2, 3];

const [a, b, c] = numbers;

console.log(a);
console.log(b);
console.log(c);

그러면 다음이 출력됩니다.

1
2
3
1
2
3

결론

이 글에서는 JavaScript 에서 가장 중요하고 유용한 Array 메소드 중 일부를 살펴보았습니다. 이러한 메서드는 배열 작업을 위한 강력한 도구를 제공하며 코드를 더욱 간결하고 표현력있게 만들 수 있습니다. 이러한 방법을 익히면 더욱 효율적이고 효과적인 JavaScript 개발자가 될 수 있습니다.

Share