만약 위의 예제로 사용된 goods 데이터 중에서 상품의 이름만으로 이루어진 새로운 배열을 출력한다고 가정했을 때 그냥 for 문을 가지고 배열을 만들면 다음과 같습니다.
let names = []
for (var i=0; i < goods.length; i++ ) {
names.push(goods[i].name)
}
console.log(names)
하지만 map을 이용하면 다음과 같습니다.
map과 화살표 함수를 함께 사용하면 그 효율이 정말 좋아지는 것을 알 수 있습니다. map을 사용하면 기존에 for 문을 상당부분 대체할 수 있는 유용한 메서드 입니다.
let names = goods.map(g => g.name)
filter
filter는 문자 그대로 필요한 값을 필터링 하는 메서드 입니다.
데이터 셋에서 price가 1000이상인 값만 추출해 보도록 하겠습니다.
이번에도 역시 매우 심플하게 새로운 배열을 만들어 내는 것을 볼 수 있습니다.
let goods2 = goods.filter(g => g.price > 1000)
find
find는 filter와 유사하지만 한가지 큰 차이점이 있습니다. 특정 조건을 만족하는 첫번째 값 만을 반환한다는 것입니다.
let goods3 = goods.find(g => g.name === 'B Goods')
spread
spread 는 배열을 쉽게 삽입하는데 사용하는 도구라고 보시면 되겠습니다.
let arr1 = [1,2,3]
let arr2 = [...arr1,4] // 1,2,3,4
let arr1 = [1,2,3]
let arr2 = [4,5]
let arr3 = [...arr1, ...arr2] // 1,2,3,4,5
// 객체일 경우
const obj1 = {a: 1, b: 2}
const obj2 = {c: 3}
console.log({...obj1, ...obj2}) // {a: 1, b: 2, c: 3}
자바스크립트는 이외에도 forEach, reduce, every, some, 등 다양한 형태의 배열조작 메서드를 제공하고 있습니다. 이 강좌에서는 주제인 svelte를 너무 벗어나는 것 같아 이들에 대해서 자세히 다루지는 않았지만, 따로 배열조작 메서드를 좀 더 공부하신다면 유용하게 사용 가능할 것 같습니다.
