JavaScript는 배열 작업을 위한 많은 강력한 도구를 제공하는 다용도 언어입니다. 가장 일반적으로 사용되는 도구 중 하나는 배열을 조작하고 변환하기 위한 다양한 메서드를 제공하는 Array 개체입니다.
이 글에서는 JavaScript에서 가장 중요하고 유용한 배열 메서드 중 일부를 자세히 살펴보겠습니다.
forEach()
forEach()
메서드는 배열을 반복하고 각 요소에 대해 콜백 함수를 실행합니다. 예는 다음과 같습니다.
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
console.log(number);
});
그러면 다음이 출력됩니다.
1
2
3
4
5
map()
map()
메서드는 배열의 각 요소에 콜백 함수를 적용하여 새 배열을 만듭니다. 예는 다음과 같습니다.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
return number * 2;
});
console.log(doubledNumbers);
그러면 다음이 출력됩니다.
[2, 4, 6, 8, 10]
filter()
filter()
메서드는 특정 테스트를 통과한 모든 요소가 포함된 새 배열을 만듭니다. 예는 다음과 같습니다.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => {
return number % 2 === 0;
});
console.log(evenNumbers);
그러면 다음이 출력됩니다.
[2, 4]
reduce()
reduce()
메서드는 배열의 각 요소에 콜백 함수를 적용하여 배열을 단일 값으로 줄입니다. 예는 다음과 같습니다.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum);
그러면 다음이 출력됩니다.
15
find()
find()
메서드는 배열에서 특정 조건을 만족하는 첫 번째 요소의 값을 반환합니다. 예는 다음과 같습니다.
const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find((number) => {
return number % 2 === 0;
});
console.log(firstEvenNumber);
그러면 다음이 출력됩니다.
2
findIndex()
findIndex()
메서드는 배열에서 특정 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 예는 다음과 같습니다.
const numbers = [1, 2, 3, 4, 5];
const firstEvenNumberIndex = numbers.findIndex((number) => {
return number % 2 === 0;
});
console.log(firstEvenNumberIndex);
그러면 다음이 출력됩니다.
1
some()
some()
메서드는 배열의 요소 중 하나 이상이 특정 조건을 만족하는지 확인합니다. 예는 다음과 같습니다.
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumbers = numbers.some((number) => {
return number % 2 === 0;
});
console.log(hasEvenNumbers);
그러면 다음이 출력됩니다.
true
every()
every()
메서드는 배열의 모든 요소가 특정 기준을 충족하는지 확인합니다. 예는 다음과 같습니다.
const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every((number) => {
return number % 2 === 0;
});
console.log(allEven);
sort()
sort()
메서드는 배열의 요소를 정렬합니다. 예는 다음과 같습니다.
const fruits = ['apple', 'orange', 'banana'];
const sortedFruits = fruits.sort();
console.log(sortedFruits);
그러면 다음이 출력됩니다.
["apple", "banana", "orange"]
includes()
include()
메서드는 배열에 특정 값이 포함되어 있는지 확인합니다. 예는 다음과 같습니다.
const numbers = [1, 2, 3, 4, 5];
const hasNumberThree = numbers.includes(3);
console.log(hasNumberThree);
그러면 다음이 출력됩니다.
true
flat()
flat()
메서드는 모든 하위 배열 요소가 지정된 깊이까지 반복적으로 연결되어 있는 새 배열을 만듭니다. 예는 다음과 같습니다.
const numbers = [1, [2, 3], [4, [5, 6]]];
const flattenedNumbers = numbers.flat(2);
console.log(flattenedNumbers);
그러면 다음이 출력됩니다.
[1, 2, 3, 4, 5, 6]
flatMap()
flatMap()
메서드는 먼저 매핑 함수를 사용하여 각 요소를 매핑한 다음 결과를 새 배열로 평면화합니다. 예는 다음과 같습니다.
const numbers = [1, 2, 3, 4, 5];
const doubledAndFlattenedNumbers = numbers.flatMap((number) => {
return [number * 2];
});
console.log(doubledAndFlattenedNumbers);
그러면 다음이 출력됩니다.
[2, 4, 6, 8, 10]
from()
from()
메서드는 배열 유사 객체 또는 반복 가능 객체에서 새 배열을 만듭니다. 예는 다음과 같습니다.
const arrayLikeObject = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const newArray = Array.from(arrayLikeObject);
console.log(newArray);
그러면 다음이 출력됩니다.
["a", "b", "c"]
Array Destructuring
Array Destructuring를 사용하면 배열에서 값을 추출하여 변수에 할당할 수 있습니다. 예는 다음과 같습니다.
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a);
console.log(b);
console.log(c);
그러면 다음이 출력됩니다.
1
2
3
결론
이 글에서는 JavaScript 에서 가장 중요하고 유용한 Array 메서드 중 일부를 살펴보았습니다. 이러한 메서드는 배열 작업을 위한 강력한 도구를 제공하며 코드를 더욱 간결하고 표현력 있게 만들 수 있습니다. 이러한 방법을 익히면 더욱 효율적이고 효과적인 JavaScript 개발자가 될 수 있습니다.
'Language > JavaScript' 카테고리의 다른 글
자바스크립트 성능 최적화 기술 익히기 (0) | 2023.12.25 |
---|---|
JavaScript 프레임워크 비교: Angular, React, Vue.js (0) | 2023.12.16 |
자동가입 방지문자(SimpleCaptcha) 사용 방법 (0) | 2023.08.30 |
[OpenLayers] Feature Drag and Drop (0) | 2022.12.27 |
[OpenLayers] Custom Icon Feature 추가 (0) | 2022.12.26 |
IT 기술과 개발 내용을 포스팅하는 블로그
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!