[js] 배열함수 정리 및 method 간단 정리

By starseat
2021-12-28 11:06:23
javascript

Post Tags

배열 사용시 for 문으로 가장 많이 하는 코드를 함수화 시킴.
그 중에 가장 많이 사용되는 7종함수 정리.

# 배열 7종 세트 정리

## 기본 데이터

```javascript
const samples = [
  { name: 'Tom Holland', age: 25, job: 'Spider-Man' },
  { name: 'Andrew Russell Garfield', age: 39, job: 'Spider-Man' },
  { name: 'Tobey Maguire', age: 45, job: 'Spider-Man' },
  { name: 'Benedict Cumberbatch', age: 44, job: 'Doctor Strange' },
  { name: 'Marisa Tomei', age: 57, job: 'May Parker' },
  { name: 'Zendaya', age: 25, job: 'Michelle Jones Watson' },
  { name: 'Jacob Batalon', age: 21, job: 'Ned Leeds' },
  { name: 'Jon Favreau', age: 55, job: 'Happy Hogan' },
];

```

## 0. 일반적인 사용법

```javascript
for(let i=0; i<samples.length; i++) {
	// todo..
	console.log(`names[${i}]: ${samples[i].name}`);
}
```

## 1. foreach

* 반환하는 값 없이 단순 반복

```javascript
samples.forEach( (item, index) => {
	// todo..
	console.log(`foreach names[${index}]: ${item.name}`);
});
```

## 2. map

* foreach 와 사용법은 비슷하나 원하는 항목을 array type 으로 묶어서 return 함.

```javascript
const result2 = samples.map( (item, index) => {
	// todo..
	return item.name;
});

console.log('2. map - result: ', result2);
/*
['Tom Holland', 'Andrew Russell Garfield', 'Tobey Maguire', 'Benedict Cumberbatch', 'Marisa Tomei', 'Zendaya', 'Jacob Batalon', 'Jon Favreau']
 */
```

## 3. filter

* 필터링. 조건에 대해 참인 것만 반환.

```javascript
const result3 = samples.filter( item => {
	return item.job === 'Spider-Man';
});

console.log('3. filter - result: ', result3);
/*
0: {name: 'Tom Holland', age: 25, job: 'Spider-Man'}
1: {name: 'Andrew Russell Garfield', age: 39, job: 'Spider-Man'}
2: {name: 'Tobey Maguire', age: 45, job: 'Spider-Man'}
 */

const result31 = samples.filter( item => {
	return item.age > 30;
});

const result32 = samples.filter( item => {
	return item.name.startsWith('To');
});

```

## 4. some

* 조건이 참인 항목이 1개 이상이면 true / 없으면 false
* 값 존재하는게 있는지 파악할때 유용

```javascript
const result4 = samples.some( item => {
	return item.job === 'Spider-Man';
});
console.log('4. some - result: ', result4);
/*
true
 */

const result42 = samples.some( item => {
	return item.job === 'Iron Man';
});
console.log('4. some - result 2: ', result42);
/*
false
 */
```

## 5. every

* 조건이 모든 항목이 참 일경우 true / 아니면 false

```javascript
const result5 = samples.every( item => {
	return item.job === 'Spider-Man';
});
console.log('5. every - result: ', result5);
/*
false
 */

const result52 = samples.every( item => {
	return item.age > 10;
});
console.log('5. every - result 2: ', result52);
/*
true
 */
```

## 6. find

* 조건에 부합하는 항목 하나만 찾음. (filter 는 모두 찾아서 array 로 return)
* 첫번째 항목만 찾아서 return

```javascript
const result6 = samples.find( item => {
	return item.job === 'Spider-Man';
});
console.log('6. find: ', result6);
/*
{name: 'Tom Holland', age: 25, job: 'Spider-Man'}
 */
```

## 7. findIndex

* find 와 동작은 같고 index 를 return 함.
* 못찾을 시 -1 return

```javascript
const result7 = samples.findIndex( item => {
	return item.job.toLocaleLowerCase().indexOf('ned') >= 0;
});
console.log('7. findIndex: ', result7);
/*
6
 */

const result72 = samples.findIndex( item => {
	return item.job.toLocaleLowerCase().indexOf('flash') >= 0;
});
console.log('7. findIndex 2: ', result72);
/*
-1
 */
```

# Array Method 간단 정리

```javascript
[1, 2, 3].push(4)  // 4 : [1, 2, 3, 4]
[1, 2, 3].pop()  // 3 : [1, 2]
[4, 5, 6].fill(1)  // (3) [1, 1, 1]
[1, 2, 3].shift()  // 1 : [2, 3]
[1, 2, 3].unshift()  // 3 : [1, 2, 3]
[4, 5, 6, 7].unshift(3)  // 5 : [3, 4, 5, 6, 7]

['a', 'b'].concat('c')  // ['a', 'b', 'c']
['a', 'b', 'c'].join('-')  // a-b-c
['a', 'b', 'c'].slice(1)  // ['b', 'c']
['a', 'b', 'c'].indexOf('b')  // 1
['a', 'b', 'c'].includes('c')  // true

[3, 5, 6, 8].find((n) => n % 2 === 0)  // 6
[4, 5, 6, 7].find(item => item > 5)  // 6 (first match)

[2, 4, 3, 5].findIndex((n) => n % 2 !== 0)  // 2
[4, 5, 6, 7].findIndex(item => item === 5)  // 1

[3, 4, 8, 6].map((n) => n * 2)  // [6, 8, 16, 12]
[4, 5, 6, 7].map(item => 2*item)  // [8, 10, 12, 14]

[1, 4, 7, 8].filter((n) => n % 2 === 0)  // [4, 8]
[4, 5, 6, 7].filter(item => item > 5)  // [6, 7]

[2, 4, 3, 7].reduce((acc, cur) => acc * cur)  // 16
[4, 5, 6, 7].reduce(prev, curr) => prev+curr, 0) // 22

[2, 3, 4, 5].every((x) => x < 6)  // true
[4, 5, 6, 7].every(item => item > 0)  // true

[3, 5, 6, 8].some((n) => n > 6)  // true

[1, 2, 3, 4].reverse()  // [4, 3, 2, 1]

[4, 5, 6, 7].at(1)  // 5
[3, 5, 7, 8].at(-2)  // 7
```

# 출처

- [https://youtu.be/kLYdgg0ljTk](https://youtu.be/kLYdgg0ljTk)

Previous Post [js] vanilla javascript 로 HTML 처리

Next Post javascript 에서 file 읽기