[Javascript] 고차함수 map, reduce, filter 사용방법

 

 

Javascript High Order Function

Javascript에서 map, filter, reduce 함수는 고차함수에 속합니다. 고차함수란 함수를 인자로 전달받고, 함수 형태로 리턴이 가능한 함수를 의미합니다.

함수에 매개변수 형태로 전달되는 함수를 콜백(callback) 함수라고 합니다. 고차함수는 매개변수로 함수를 전달받아 함수의 몸통 안에서 콜백함수를 호출할수 있습니다. 

함수를 호출하는 함수는 이를 개발한 하스켈 커리(Haskell Curry)의 이름을 따서 '커리 함수'라고 부릅니다. 즉, 고차함수는 커리함수에 속하게 되는 것입니다. 

고차함수를 테스트하기 위해서 Dummy Data를 randomly하게 생성했습니다. 

랜덤데이터 생성 웹 사이트

 

// Random Data
const person = [
	{
		"name": "Paloma O'connor",
		"phone": "(839) 661-5512",
		"email": "lorem@icloud.edu",
		"address": "360-6732 Felis Rd.",
		"country": "New Zealand",
		"numberrange": 0,
		"list": 11,
		"text": "Fusce fermentum fermentum arcu. Vestibulum ante ipsum primis in faucibus"
	},
	{
		"name": "Channing Barnett",
		"phone": "1-369-400-7327",
		"email": "ultricies.adipiscing@protonmail.ca",
		"address": "791-4539 Magnis Street",
		"country": "South Korea",
		"numberrange": 1,
		"list": 15,
		"text": "nulla ante, iaculis nec, eleifend non, dapibus rutrum, justo. Praesent"
	},
	{
		"name": "Gregory Morrow",
		"phone": "1-792-873-1612",
		"email": "venenatis.vel@hotmail.ca",
		"address": "Ap #221-4757 Pharetra St.",
		"country": "Netherlands",
		"numberrange": 5,
		"list": 1,
		"text": "hendrerit. Donec porttitor tellus non magna. Nam ligula elit, pretium"
	},
	{
		"name": "Uriel Meadows",
		"phone": "1-862-465-7122",
		"email": "cursus.integer@google.edu",
		"address": "894-4099 Nec St.",
		"country": "Chile",
		"numberrange": 2,
		"list": 19,
		"text": "vel pede blandit congue. In scelerisque scelerisque dui. Suspendisse ac"
	},
	{
		"name": "Charles Hendricks",
		"phone": "(762) 437-0795",
		"email": "metus.vitae@icloud.net",
		"address": "Ap #278-9232 Id St.",
		"country": "India",
		"numberrange": 0,
		"list": 7,
		"text": "imperdiet nec, leo. Morbi neque tellus, imperdiet non, vestibulum nec,"
	}
]

 

 

Javascript map function

 

Javascript에서 map함수는 배열을 입력받아 특정 논리로 재구성된 배열을 반환하는 함수입니다. 한줄의 코드로 배열을 새로 구성할 수 있기 때문에 효율성이 높습니다. 

person 객체 배열을 입력받아 person의 name과 country로만 구성된 새로운 배열을 생성할 때 map 함수를 사용합니다.

// country 요소만 출력
const newPerson = person.map((item)=>item.country)

console.log(newPerson);

[ 'New Zealand', 'South Korea', 'Netherlands', 'Chile', 'India' ]

 

배열내의 특정 요소들만 추출해서 새로운 객체 타입의 데이터로 구성된 배열을 출력할 수 있습니다. person 데이터에서 name과 country만 추출해서 새로운 객체를 생성하는 소스코드입니다.

const newPerson = person.map((item)=>{
    return {
        'name' : item.name,
        'country' : item.country
    }
})

console.log(newPerson);

[
  { name: "Paloma O'connor", country: 'New Zealand' },
  { name: 'Channing Barnett', country: 'South Korea' },
  { name: 'Gregory Morrow', country: 'Netherlands' },
  { name: 'Uriel Meadows', country: 'Chile' },
  { name: 'Charles Hendricks', country: 'India' }
]

 

 

Javascript filter function

 

Filter 함수는 배열을 입력받아 특정 논리값에 일치하는 요소들만을 가지고 새로운 배열을 리턴하게 됩니다. 배열의 인수를 받아 boolean값을 반환하는 로직을 구성해줘야 합니다.

person 데이터에서 country가 India인 요소만 출력하는 예제입니다.

// Filter 함수 논리값 비교 로직 구성
const filteredPerson = person.filter((item)=>item.country==='India');
console.log(filteredPerson);

동일한 로직이지만 익명함수를 사용할 수도 있습니다.

const filteredPerson = person.filter((item)=>{
    return item.country==='India'
});
console.log(filteredPerson);

[
  {
    name: 'Charles Hendricks',
    phone: '(762) 437-0795',
    email: 'metus.vitae@icloud.net',
    address: 'Ap #278-9232 Id St.',
    country: 'India',
    numberrange: 0,
    list: 7,
    text: 'imperdiet nec, leo. Morbi neque tellus, imperdiet non, vestibulum nec,'
  }
]

 

 

Javascript reduce function

 

Javascript redude()는 배열을 입력받아 특정 로직으로 하나의 데이터로 응축하는 기능을 가지고 있습니다. reduce()함수는 3가지 인수를 받습니다.

const reducedPerson = person.reduce((pre, cur)=>{},idx);

• pre : 누적값
• cur : 현재 인자값
• idx : 최초 시작 지점

 

person 데이터의 list 값을 100을 시작점으로 하여 총합을 구하는 로직입니다. 새로운 인자는 cur에 전달되고, 누적값은 pre로 전달되면서 최종적으로 한개의 데이터로 응축됩니다.

// reduce 함수 구성
const reducedPerson = person.reduce((pre, cur)=>{
    return pre+cur.list
},100);

console.log(reducedPerson);

// 결과값
153