JavaScript - Array Function ( ForEach, Filter, Some, map, reduce)

안녕하세요.

이번 포스팅에서는 이전 포스팅에서 예고한대로, Array Function Method 에 대해서 설명하고자 합니다.

각각의 순서에 따라 설명을 할 예정이며, 이는 For 문과 일부 흡사하면서도 다른 함수 메소드 입니다.

한가지씩 차근차근 알아보도록 하겠습니다.

 

===========

1. ForEach

2. Filter

3. Some,every

4. Map

5. Reduce

===========

1. ForEach

forEach 의 경우, Callback 함수와 유사하게 동작합니다. 

하지만 몇가지의 특징이 존재하는 forEach 문은 사용시 주의를 요하는 함수이기도 합니다.

먼저 기본적인 사용예제를 작성해보도록 하겠습니다.

const arr = [1,2,3,4,5,6,7,8,9,10,11,12,13]

arr.forEach(function(Blog){
    console.log(Blog)
})

For 문에 비해서 보다 간결하게 작성이 됩니다.

이를 For문으로 표현하면 아래와 같습니다.

 

const arr = [1,2,3,4,5,6,7,8,9,10,11,12,13]

for (let i = 0; i < arr.length; i++){
    console.log(arr[i])
}

 

즉,위의 forEach 함수는 인자값을 Callback 으로서 동작하는 Callback 함수로서 동작하는 Method 입니다.

이를 통해 한가지를 응용해볼 수 있습니다.

배열을 두개를 출력하는 방법도 존재합니다.

 

const arr = [1,2,3,4,5]
arr.forEach(function(value){
    console.log(value)
})

let arr2 = {
    arr : [1,2,3,4,5],
    length : 5,
    forEach: function(callback){
        for (let i = 0; i < arr.length; i++){
            console.log(arr[i],i)
        }
    },
}

function loop(value, index){
    console.log(arr2.length, value, index)
}

arr2.forEach(loop)

 

위와 같이, 작성시, 배열로 이루어진 arr 변수를 선언하고, arr2 의경우 상수가 아닌 변수로 선언하여, forEach 문 안에 반복문을 한개를더 담아 , loop 함수에 함수를 값으로 출력하도록 하게 되면, [1,0] , [2,1] 같은 형태로의 출력도 가능하게 됩니다. 

 

2. Filter

 

Filter 역시 forEach 와 유사한 기능을 가지고 있습니다만, 그에 비해 한가지의 특징이 추가됩니다.

바로 BooleanType 의 사용이 가능해지는데요.

문자 그대로 Filter 의 경우, Boolean Type 을 부여하여, 특정 데이터만을 Filter 하여 새로운 배열로 만들어 내는 기능입니다. 

 

const arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]
const arr2 = arr.filter(v=>v===5)
console.log(arr2)

Arrow Function 과 결합해서 작성한 이 예제는, 해석하면 아래와 같습니다.

arr 이라는 변수에는 숫자 1~17까지의 숫자가 담겨있고, arr2 라는 변수를 하나 더 선언하여, arr.filter method 를 호출하여 v 를 Arrow Function 으로 표현하여 v 값이 5와 비교했을때 True 인 값을 arr2 변수에 담겠다는 의미입니다. 여기서의 결과는 [5] 한개만 도출됩니다.

 

단어 그대로의 함수이고, 이해하는데 어려움이 없으실 것으로 생각됩니다.

 

3. Some,Every

 

이 두개의 함수는 서로 반대되는 개념으로 동작하기 때문에, 같이 작성해보도록 하겠습니다.

이 두개의 동작조건은 같습니다. 

먼저 예제문 두개를 살펴보도록 하겠습니다.

 

const students = [
    {name : 'jack', age : 20},
    {name : 'Hynn', age : 25},
    {name : 'IU' , age : 27},
    {name : 'Black', age : 21}]

const result1 = students.every (x => {return x.name === 'IU'})

console.log(result1)


const result2 = students.some (x => {return x.name === 'IU'})
console.log(result2)

여기서 알아두어야 할 것은 이 Method 는, 배열 내의 객체의 값을 순회하면서 검사하는 것입니다.

조건에 만족하면 Boolean Type 의 문자열로 반환되고, 조건에 만족하는 즉시, 함수의 반복을 중단하고 결과를 출력합니다. 

 

차이점은 두개의 함수에서 True, False 를 출력하는 여부를 결정지으며, 아래와 같이 이해하면 보다 쉽게 이해가 가능합니다.

 

• Every : 조건에 만족하지 않는 값이 발견되는 즉시 함수가 중단되고 False 를 출력
• Some : 조건에 만족하는 값이 발견되는 즉시 함수가 중단되고 True 를 출력

이는 일반적으로 사용되는 것보다는, 배열 내부의 원소 값의 검토가 필요한 경우에만 사용되는 Method 입니다.

 

4. Map

Array, 즉 배열에 담긴 요소들의 값의 변화를 주어서 새로운 Array, 배열을 만들어야 할 때가 발생할 수 있습니다.

이 때 , 반복문을 사용하여 일반적으로 반복처리하여 새로운 변수에 할당하는 방법도 존재할 텐데요.

Array.map 이라는 Method 를 이용하면 보다 손쉽게 새로운 배열로의 변수 선언이 가능합니다.

 

특히나 이 Map의 경우, 위에서 언급한 것들에 비해서 강력한 기능을 가지고 있고, 실제로도 많이 쓰이는 Array 내장 Method 입니다. 더블어 가장 많이 쓰이는 Method 는 밑에서 언급할 reduce 와 함께 쌍벽을 이루고 있습니다. 

 

바로 살펴보도록 하겠습니다.

예제문을 두가지를 살펴보도록 하겠습니다.

const arr = [1,2,3,4,5,6,7,8,9,10]
for (let i = 0; i < arr.length; i++){
   arr[i] = arr[i] * 3
}

console.log(arr)

위의 반복문을 사용해서, arr 배열에 담긴 Number 에 3씩 곱하기를 하여, 출력을 했습니다.

이를 변수로 새롭게 선언하기 위해서 Map 을 사용하면 간단하게 변경이 가능합니다.

 

Map 에서는 (Callback(currentValue[, index[, array]]), [, thisArg] 형태의 구문으로 이루어져 있습니다.

구문이 복잡해  보이지만 실상은 어렵지 않게 작성이 가능합니다.

 

Callback 은 당연히 Function, 함수입니다. 이후에는, 1개이상의 인자가 들어가야 합니다. 각 순서별로의 인자는 아래와 같습니다.

 

• index : 처리할 요소
• array : map 을 호출한 배열
• thisArg : Callback 을 실행할때 this로 사용되는 값 

하지만 일반적인 사용에서는 간단하게, 한개의 인자만을 사용해도 좋습니다. 예제문을 보면 Callback 함수 란에 익명함수를 삽입하고 인자에는 Value 를 대입했습니다.

그리고 함수 내에서는 value * 3 값을 return 하도록 작성하게 되면, arr 이라는 배열에 있는 요소에 3을 곱한 결과물을 가지고 Arr2 배열이 새롭게 생성되는 것입니다. 

const arr = [1,2,3,4,5,6,7,8,9,10]
const arr2 = arr.map(function(value){
    return value * 3
})

 

혹은 데이터를 합칠수도 있습니다.

const Singer = [
    {FirstName : 'U', LastName : 'I'},
    {FirstName : 'Black', LastName : 'Pink'},
    {FirstName : 'A', LastName : 'Pink'},
    {FirstName : 'Generation', LastName : 'Girls'}
]

const SingerNames = Singer.map(function(test){
    return `${test.LastName} ${test.FirstName}`}
)

console.log(SingerNames)

 

5. Reduce

Reduce 는 위의 Map 과 마찬가지로 범용성이 높은 Method 입니다.

Reduce 의 기능은 큰 틀에서 두가지로 나누어 사용할 수 있습니다.

 

먼저 기본적으로 포함된 기능인 누산기를 포함하고 있는 Function Method 이기 때문에, 배열의 각 요소의 함수를 실행하여 누적된 값을 출력하는 기능이 있습니다. 예시를 들자면 배열에 있는 모든 Number Type 의 원시데이터의 합을 출력하는 것이 가장 기본적인 예제가 될 것입니다.

 

이를 이해하고자 하기위해서는, Reduce 는 각 인자의 대한 이해가 필요합니다.

먼저 아래의 예시를 살펴보도록 하겠습니다.

 

Sample.reduce(Callback[, initialValue])

위에서의 Sample 은 임의의 변수명이 될 것입니다. 

reduce 는 Method 가 되는것임은 설명하 필요가 없습니다.

 

하지만 여기서의 핵심은 Callback 입니다. 이 함수에는 4개의 인자를 구성해야 합니다.

 

Callback 함수 내에서는 accumulator 와 crrentValue 가 필수적으로 포함되어야 합니다. 

• Accumulator : Callback 의 반환값을 누적합니다. 혹은 Callback 의 첫번째 호출이면서, initialValue 를 제공했다면, initialValue 의 값입니다.
• currentValue: 처리할 현재요소

이외에도 반영할 수 있는 요소는 몇가지가 더 있습니다 .

• CurrentIndex : 처리할 현재 요소
• array : reduce 를 호출한 배열입니다. 예제에서는 Sample 이 되겠습니다.
• initialValue : Callback 의 최초 호출에서 첫 번째 인수에 제공하는 값입니다. 이 값을 제공하지 않으면, 배열의 첫번째 요소를 사용합니다. 빈 배열에서 이를 설정하지 않고 reduce () 를 호출하면 오류가 발생합니다.

const number = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]

// 작성 예제문

number.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => {
	return 다음 누산값
    }, 초기누산값)

위의 예제문에서 실제 명칭을 반영하면 아래와 같습니다.

• 누산값 : Accumulator
• 현재 요소값 : currentValue
• 현재 요소의 Index : CurrentIndex
• 현재 배열 : array
• 초기누산값 : initialValue 

이를 바탕으로 아래처럼 기본 예제를 작성하면 결과가 출력됩니다.

const number = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]

const sum = number.reduce((acc, el, i) => {
    console.log(`${i}번째 Callback`)
    console.log(`acc : ${acc}`)
    console.log(`el : ${el}`)

    return el + acc
})

 

위 예시를 해석해보자면, sum 이라는 상수형 변수를 선언하고, reduce 에 3개의 인자를 부여했습니다.

 

• acc - Accumulator
• el - 현재 요소값
• i - 현재 요소의 index 
• initialValue : 부여하지 않음

 

즉 누산값의 시작은 배열의 순서대로 진행이 될 것입니다.

그리고 el의 경우 현재 요소의 값이므로, 1부터 시작이 될 것입니다.

그리고 현재 요소의 Index 는 initialValue 를 부여하지 않았으므로 1로 시작됩니다. (*제공했다면 0부터 시작됩니다)

 

그리고 난 뒤 console log 로 3개의 값을 출력하도록 설정했습니다.

객체 리터럴 (``) 과 $ {} 달러 문법을 사용하여, i 라는 값이 변동되도록 첫번째 Console.log 를 출력합니다. 당연히 initialValue 를 부여하지 않았으므로 "1" 부터 시작됩니다. 그러면 1번째~ i 번째 Callback 이 출력됩니다.

두번째 Console.log 가 실제 reduce 의 결과물이 될 것입니다. 값을 계속 더하게 될 것이므로, 1번째에 1로 시작했다면, 두번째의 경우 이전 요소의 1을 더해서 2, 2를 더해서4, 3을 더해서 7, 4를 더해서 11 이라는 형태의 순서대로 출력이 될 것입니다. 

세번째  Console.log 의 경우 "현재 요소"의 값이므로, 배열의 순서대로 숫자가 나타날 것입니다. 여기서는 1부터 30까지 순차적으로 나타나겠습니다.

 

실제 결과물을 살펴보겠습니다.

 

예상한 내용대로 결과물이 출력되었습니다. 

reduce 는 배열의 순서를 반대로 출력하는 Method 도 존재합니다. 이는 인자 사용이 동일하기 때문에, method 명칭만 수정하면 간편하게 동작을 시연할 수 있습니다.

 

const number = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]

const sum = number.reduceRight((acc, el, i) => {
    console.log(`${i}번째 Callback`)
    console.log(`acc : ${acc}`)
    console.log(`el : ${el}`)

    return el + acc
})

 

간단한 기초사항만을 가지고 접근해보았습니다.

활용도가 많고, 상황에 맞게 활용한다면 최적의 Method 가 될 수 있는 배열 내장함수 시리즈에 대해서 알아보았습니다.

다음포스팅에서는 HTML/CSS/JavaScript 를 모두 활용한 실습예제 컨텐츠를 포스팅할 예정입니다.

 

감사합니다.