자바스크립트 배열과 친구들(feat. map,filter,find,reduce)

Bindung·2020년 6월 20일

JavaScript

javascript

목록 보기

5/5

자바스크립트를 쓰다보면 우리는 배열을 많이 쓰게 된다.
왜 쓰게 되는 걸까? 생각해보면 index 위치를 알 수 있으며, 정제하기가 편하다. 그리고 배열안에 배열을 써서 편리하게 쓸 수 있다.

배열의 특징

배열은 번호(정수)로 된 인덱스를 갖는다.
배열의 요소는 객체가 될 수 있다.
동일한 배열에 서로 다른 변수를 가질 수 있다.
배열안에는 객체, 함수, 배열(다차원 배열)을 가질 수 있다.

배열 요소 접근

인덱스를 이용하여 접근

var users = [‘john’, ‘ham’, ‘steve’];
console.log(user[1])
//결과 : ham

배열 전체 불러오기

var users = [‘john’, ‘ham’, ‘steve’];
console.log(user)
//결과 : ["john", "ham", "steve"]

해당 배열 요소 수정

var users = [‘john’, ‘ham’, ‘steve’];
users[1] = ‘cool’
console.log(users)
//결과 : ["john", "cool", "steve"]

map()

map 메소드는 배열요소를 일괄적으로 변경하는데 쓰입니다.

var arr = [‘hi’, ‘bye’, ‘hello’, ‘thank’]
var arr2 = arr.map((item) => {
	return item.length;
})
console.log(arr2); //[2,3,5,5]

map()을 사용하면서 상위의 arr2에 바로 배열로 넣을 수 있다. 우리가 알고 있는 것들중에 forEach()가 있는데 이걸 사용하면 arr2를 배열로 변수로 따로 선언하고 써야하는 부분이 생긴다.

var arr = [‘hi’, ‘bye’, ‘hello’, ‘thank’]
var arr2 = []
arr.forEach((item) => {
	arr2.push(item.length)
})
console.log(arr2); //[2,3,5,5]

filter()

filter 메소드는 배열안의 요소들을 걸러주는데 목적을 둡니다.

var arr = [2, 4, 5, 8, 9, 10, 22, 29];
var arr2 = arr.filter((item) => {
	return item % 2 == 0;
})
console.log(arr2)
//[2, 4, 8, 10, 22]

콜백 함수의 리턴은 boolean의 true 값만 호출하게 하여 새로운 배열로 만들어 줍니다.
더 중요한 것은 만족하는 값이 없으면 빈배열을 반환한다는 것입니다.

map() & filter()

그렇다면 map 과 filter 를 같이 써보면 어떻게 될까?

var arr = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30];
var arr2 = arr.filter((num) => {
	return num%2 ===0;
}).map((num) => {
	return num*2;
})
console.log(arr2)
//[12, 24, 36, 48, 60]

만약 filter가 빈배열이 아닌 다른 값을 반환했다면 map 이후로 에러가 뜰 것이다. 이점은 매우 중요해 보인다.

find()

find 메소드는 여러 요소중에 맨처음 요소만 리턴합니다.

var arr = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30];
var arr2 = arr.find((num) => {
	return num%3 ===0;
})
console.log(arr2)
//3

reduce()

배열의 각 요소에 대해 주어진 reduce()를 실항하고 하나의 결과값을 반환합니다.
reduce는 4개의 인자를 가집니다.
1. accumulator
2. currentValue
3. index
4. array

let num = [1, 2, 3, 4, 5]
let sum
num.reduce((acc, current) => {
	return sum = acc + current
}, 0)
console.log(sum) //15

callback	accumulator	currentValue	currentIndex	array	반환값
1번째 호출	0	1	1	[1,2,3,4,5]	1
2번째 호출	1	2	2	[1,2,3,4,5]	3
3번째 호출	3	3	3	[1,2,3,4,5]	6
4번째 호출	6	4	4	[1,2,3,4,5]	10
5번째 호출	10	5	5	[1,2,3,4,5]	15

위의 표를 보고 참고하면 좋을 것같다.
위의 내용을 해석해보면 아래와 같다.

배열.reduce( (초기값, 현재값, 인덱스, 배열) => {
	....
}, 초기값)

reduce()로는 여러가지를 할 수 있다.

배열안에 배열 펼치기

let arr = [[1,2,3],[4,5,6],[7,8,9]]
let flat = arr.reduce((acc, it) => [...acc, ...it], []);
console.log(flat)
//[1,2,3,4,5,6,7,8,9]

객체 내의 값 인스턴스 개수 세기

let names = [“Oli”, “Bob”, “Shon”, “Oli”]
let countedName = names.reduce((allNames, name) => {
	if(name in allNames){
		allNames[name]++;
	} else {
		allNames[name] = 1;
	}
	return allNames;
}, {})
console.log(countedName)
//{Oli:2 , Bob:1, Shon: 1}