[JS/Array/Basic] Array를 잘 다루어보자- 2

결국 우리는 직접 조건을 작성하여, 배열을 처리하는 경우가 많다. 하지만, 이 조건을 메서드를 이용해서 for문 작성없이 깔끔하게 한 문장으로 처리할 수 있다면, 생산성이 아주 좋을 것이다. 그러기 위해서, 나오게된 ES6 문법들을 알아보자. 

정확히는 "iterable"하면 쓸 수 있는 메서드지만,  Array는 iterable하기 때문에, 아래의 메서드들이 다 사용이 가능하다.

배열을 조건에 맞게 탐색,  만나는 첫번째 원소값을 반환 

어떤 요소가 배열안에 있는지 ,없는지 찾고 싶을 때가 있다. 그럴 때 유용하게 쓸 수 있다. 

const arr=[1,2,3,4,5,6,7]

find()

• 주어진 판별 함수 (콜백)를 만족하는 첫번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefinded를 반환합니다.
• 사용방법: arr.find([callback])

예를 들어, "5"를 찾고 있다면 , 아래와 같이 할 수 있다.

const res = arr.find((item) =>item === 5) //expect 5

 

조건에 만족하는 결과값들을 배열로 반환

Find는 반환 값 1개를 넘겨주고, 만나는 첫번째 요소만을 반환한다. 즉, 있는지 없는지 여부나, 문자열이 있는지 등에는 적합하지만, "짝수","홀수"와 여러개의 요소가 나올 수 밖에 없는 개념들은 적합하지 않다. 그럴때 유용하게 쓸 수 있다.

 // 2,4,6,...  make even number out of array
const arr=[1,2,3,4,5,6,7]

filter()

• 주어진 함수(callback)의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
• 사용방법: arr.filter(callback(element,index,)[this.arg] )

짝수를 찾는걸 간단하게 나타내 봅시다.

const target = [1,2,3,4,5,6,7]

const even = [1,2,3,4,5,6].filter((number) => number %2===0 )

 

배열의 요소를 조건에 맞게, 재조정하기

배열들의 원소를 직접 조작하여 새로운 배열을 만들어내고 싶을 수 있습니다. 그럴 때 , 유용하게 쓸 수 있습니다.

// make two times large value out of Array
const arr=[1,2,3,4,5,6,7]

map()

• 배열 내의 모든 요소 각각에 대하여, 주어진 함수(callback)를 호출한 결과를 모아서, 새로운 배열을 반환합니다.
• 사용방법: arr.map(callback(element,index...)[this.args])

const numbers= [1,2,3,4,5,6,7]

const TwoTimesLarge = numbers.map((number) => number*2)

console.log(TwoTimesLarge)

 

배열의 조건을 만족하는 원소가 있는지 없는지 확인

배열 안에 있는지 없는지 True/false 값만 알고 싶은 상황이 있습니다. 그럴 때, 유용하게 이용할 수 있습니다.

2가지가 준비되어 있습니다. some을 응용해서 every를 만들어낼 수 있지만, 별로 직관적이지 못한 방법입니다. 

// check multiple of 3 
const number =[1,2,3,4,5,6,7]

some()

• 배열 안의 어떤 요소라도, 주어진 판별 함수를 통과하는지 테스트 합니다.
• 하나라도 만족하는 것이 있다면 True, 없다면 False입니다.

const array =[1,2,3,4,5,6]

const multipleOf3 = (number) => number%3===0;

console.log(array.some(multipleOf3))

every()

• 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다.
• 즉, 모든 요소가 만족한다면 True,하나라도 틀리면 false입니다.

const number = [1,2,3,4,5,6,7]

const multipleOf3 = (number) => number %3===0

console.log(number.every(multipleOf3))

배열의 탐색을 재귀적으로 하기

사용하다보면, 배열의 return값을 그대로 다시 쓰고싶은 경우가 있습니다. 예를들어, 모든 배열의 합을 구하는 경우가 그렇습니다.

// sum 
const numbers=[1,2,3,4,5,6,7]

Reduce()

• 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환 합니다.
• 사용방법: arr.reduce(callback[,initialValue])
• 리듀서 함수는 acc(누산기),cur(현재값),idx(인덱스),src(원본배열) 4가지 인자를 가집니다.

const numbers=[1,2,3,4,5,6,7,8]

numbers.reduce((prev,cur) => prev+cur,0) //36

Tips) 물론, 변수 하나를 선언해서 누적해도 되지만, reduce의 강력한 점은 "로직"또한 누적시킬 수 있다는 겁니다.

reduce로 감싸서, 여러가지 로직을 쭉 펼치는 "go"의 개념에도 reduce가 사용됩니다만, JS에서는 누산하여 하나로 합치는 느낌으로 쓰셔도 무방합니다.

 

위의 함수들은 조합해서 쓸 수 있습니다.

예를들어, 아래와 같은 쇼핑몰 리스트가 있다고 합시다.

• 5천원 후드티
• 만원 코트
• 3천원 청바지

const items = [
	{id:"1",price:5000,name:"hoody"},
    {id:"2",price:10000,name:"coat"},
    {id:"3",price:3000,name:"jeans"},
]

제가, 5000원 이상인 품목의 이름을 알고싶다면 , 어떻게 할 수 있을까요. 아래와 같이 적을 수 있지 않을까요! 

items
.filter((item) => item.price>=5000)
.map((i) =>i.name)