<목차>
1. 템플릿 리터럴(Template Literal)
2020/10/07 - [개발/자바스크립트] - [자바스크립트] JS다운 코드 스타일 #1. 템플릿 리터럴
2. spread 연산자
2020/10/08 - [개발/자바스크립트] - [자바스크립트] JS다운 코드 스타일 #2. Spread 연산자
3. 배열, 함수형 프로그래밍
4. 비구조화 할당
2020/11/20 - [개발/자바스크립트] - [자바스크립트]JS다운 코드 스타일 #4. 비구조화 할당
3. 배열, 함수형 프로그래밍
모든 프로그래밍 언어에서 배열은 아주 중요한 타입입니다. 많이 쓰이기 때문이죠.
하지만 대부분 for문을 통한 순차적인 처리를 선호합니다. 가장 간편하고 익숙하게 써왔기 때문입니다.
하지만 약간의 지식을 추가한다면 매우 강력한 배열 메소드들이 있습니다.
이번 포스트에서는 자바스크립트, 쉽게 배열을 다루기 위한 8가지 메소드에 대해 설명하도록 하겠습니다.
(Filter, Map, Foreach, Find, Some, Every, Reduce, Includes)
다음과 같은 배열이 있습니다. 이름과 가격를 가진 객체 배열 stocks입니다.
let stocks = [
{ name : 'Apple', price : 100 },
{ name : 'Samsung', price : 150 },
{ name : 'Tesla', price : 300 },
{ name : 'Microsoft', price : 1000 },
{ name : 'Amazon', price : 20 },
{ name : 'Facebook', price : 1100 },
{ name : 'Hyundai', price : 500 },
{ name : 'Ncsoft', price : 10 }
]
1. Filter
let filteredStocks = stocks.filter((item) => {
return item.price <= 500;
})
table(filteredStocks)
2. Map
let filteredName = stocks.map((item) => {
return item.name;
})
table(filteredName)
3. find
let foundStock = stocks.find((item) => {
return item.name === 'Samsung';
})
console.log(foundStock)
4. forEach
stocks.forEach((item) => {
console.log(item.name)
})
5.some
let hasCheapStocks = stocks.some((item) => {
return item.price<= 20;
})
console.log(hasCheapStocks) // true
6.every
let hasCheapStocks = stocks.every((item) => {
return item.price<= 20;
})
console.log(hasCheapStocks) // false
7. reduce
let totalPrice = stocks.reduce((currentTotal, item) => {
return item.price + currentTotal
},0);
console.log(totalPrice) // 3180
8. includes
let numbers = [1,2,3,4,5];
let includesThree = numbers.includes(3);
console.log(includesThree) // true
이것으로 자바스크립트 8가지 배열 메소드에 대한 설명을 마치겠습니다.
'개발 > 자바스크립트' 카테고리의 다른 글
[자바스크립트]JS다운 코드 스타일 #4. 비구조화 할당 (0) | 2020.11.20 |
---|---|
[자바스크립트] scope chain 과 variable shadowing에 대해 (0) | 2020.11.11 |
[자바스크립트] JS다운 코드 스타일 #2. Spread 연산자 (0) | 2020.10.08 |
[자바스크립트] JS다운 코드 스타일 #1. 템플릿 리터럴 (0) | 2020.10.07 |
[자바스크립트] 배열 비교하는 3가지 방법 + 형님의 솔루션 (0) | 2020.09.27 |
댓글