javascript 배열 조작 메서드

예제 data set

var goods = [
  {id:1, name:'A Goods', category:'a', price: 1000},
  {id:2, name:'B Goods', category:'b', price: 2000},
  {id:3, name:'C Goods', category:'c', price: 2500},
  {id:4, name:'D Goods', category:'a', price: 500},
  {id:5, name:'E Goods', category:'b', price: 10000},
  {id:6, name:'F Goods', category:'d', price: 5000}
];

map

: 원본 배열을 바탕으로 새로운 배열을 만들어 내는 메서드 입니다.

만약 위의 예제로 사용된 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를 너무 벗어나는 것 같아 이들에 대해서 자세히 다루지는 않았지만, 따로 배열조작 메서드를 좀 더 공부하신다면 유용하게 사용 가능할 것 같습니다.

[만들면서 배우는 Svelte]

만들면서 배우는 svelte