> For the complete documentation index, see [llms.txt](https://freeseamew.gitbook.io/svelte/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://freeseamew.gitbook.io/svelte/10-./javascript.md).

# 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\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&amp;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>