[JavaScript] for문대신 쓸수 있는 배열함수들

만능 for문 하지만..

개발하다보면 배열에서 뭘 꺼내서 지지고볶고할일이 참 많다. 특히 알고리즘을 풀다보면 다 이러한 것들인데 응용력이 떨어지는 내겐 그저 for문과 map돌리는것외엔 생각나는게 없다. 그래서 코드가 더 직관적이고 깔끔하고 쓰임새가 많은 배열함수들이 정리가필요했다.

 

1. Array.forEach

Array.forEach(element => { });

배열안에 요소에 어떤 작업을 수행할때

let words = ['a','b','c','d']

words.forEach(word => {
  console.log(word)  
});

// a
// b
// c
// d

words.forEach((word,index) => {
  console.log(word,index)  
});
// a 0
// b 1
// c 2
// d 3

2. Array.map

let a = array.forEach(element => { return }); 

배열상태가 필요할때, 배열안에 객체에 데이터를 꺼내오거나 추가하는등의  또다른 배열작업이 필요할때 사용하며

원본배열을 건들지 않고 그 값들만 사용하기때문에 리액트프로젝트 당시 자주 사용했다.

let words = ['a','b','c','d']

let list = [
{tag : a, value : 2},
{tag : b, value : 3} ] 

let data = words.map((word) => {
  return word
})
console.log(data); // ['a', 'b', 'c', 'd']


let data2 = list.map((item) => {
  return item.tag
})

console.log(data2) // [a,b]

3. Array.filter

조건을 넣고, 조건에 대해 참인것 들을 반환 (find는 제일 먼저 찾아낸 한개의값만반환)

콜백에서 참인 요소를 추출해서 새로운 배열로 리턴한다

let list = [
{tag : 'a', value : 2},
{tag : 'b', value : 3} ] 

let data2 = list.filter((item) => {
  return item.value == 2
})

console.log(data2) // [{tag : 'a', value : 2}]

4. Array.some

Array.prototype.some()

하나라도 참인값이 리턴되면 메서드 수행이 중단되고 전체요소를 다 돌때까지 참인값이 없으면 거짓으로 뱉어냄

let list = [
{tag : 'a', value : 2},
{tag : 'b', value : 3} ] 

let data3 = list.every((item) => {
  return item.tag.startsWith('c')
})

console.log(data3) // false

5. Array.every

Array.prototype.every()

모든요소가 특정조건을 만족하는지 알고 싶을때 적합

let list = [
{tag : 'a', value : 2},
{tag : 'b', value : 3} ] 

let data3 = list.every((item) => {
  return item.tag == 'a'
})

console.log(data3) // false

6. Array.reduce

배열의 요소를 하나씩 확인하면서 이전 콜백함수의 리턴값을 이전값으로 넘겨받아 어떤작업을 수행하고 싶을때 적합

Promise를 활용한 비동기 작업의 순차적 실행등에 이용하면 유용함

 

let numbers = [1,2,3,4]

let data = numbers.reduce((이전값, 최신값, 인덱스) => {
  return 이전값 + 최신값;
}, 0)
console.log(data); // 10