Javascript_ (Array) forEach,map,reduce 그리고 =>(화살표 함수)

Array에서 forEach와 map 메소드

공통점

첫번째로 콜백함수를 인자로 받고 그 함수의 인자는 (배열 원소 값,그 값의 인덱스,배열 자체)

차이점

forEach : return 값이 없다

map        : return 값이 있다

let data= [1, 2, 3, 4, 5]
// forEach 를 사용해서 원소의 값들을 각각 3씩 증가시키기
let result = [];
data.forEach(x => { result.push(x + 3) });
console.log(result);

// map 을 사용해서 원소의 값들을 각각 3씩 증가시키기
let result2 = data.map(x => { return x + 3});
console.log(result2);

화살표함수로 sort

arr = [5,1,3,2]
arr.sort( (a, b) => a - b)    // arr = [1, 2, 3, 5] 오름차순 ( b - a 면 내림차순)

// 화살표 함수쓰지 않았을 경우
arr.sort( function(a, b) { return a - b; } )

화살표 함수와 reduce 메소드로 정수 각자리수 합 구하기

(n + "").split("").reduce((a, b) => +a + +b );

forEach 메서드(Array)

 배열 요소마다 한 번씩 제공한 함수 실행

https://docs.microsoft.com/ko-kr/scripting/javascript/reference/foreach-method-array-javascript

array1.forEach(callbackfn[, thisArg])

매개 변수

매개 변수	정의
array1	필수 요소. 배열 개체입니다.
callbackfn	필수 요소. 최대 3개의 인수를 받아들이는 함수입니다. forEach는 배열에 있는 각 요소마다 한 번씩 callbackfn 함수를 호출합니다.
thisArg	선택 사항입니다. this 키워드가 callbackfn 함수에서 참조할 수 있는 개체입니다. thisArg가 생략되면 undefined가 this 값으로 사용됩니다.

function callbackfn(value, index, array1)

콜백 인수	정의
value	배열 요소의 값입니다.
index	배열 요소의 숫자 인덱스입니다.
array1	요소가 포함된 배열 개체입니다.

// Define the callback function.  
function ShowResults(value, index, ar) {  
    document.write("value: " + value);  
    document.write(" index: " + index);  
    document.write("<br />");  
}  

// Create an array.  
var letters = ['ab', 'cd', 'ef'];  

// Call the ShowResults callback function for each  
// array element.  
letters.forEach(ShowResults);  

// Output:  
//  value: ab index: 0   
//  value: cd index: 1   
//  value: ef index: 2

array 값의 평균 구하기

function average(array){
    var result = 0;
    array.forEach(x => result += x);
    return result/array.length;
}

reduce를 이용하여 구하기

function average(array){
  return array.reduce((a, b) => a + b) / array.length;
}

map 메서드(Array)

배열의 각 요소에 대해 정의된 호출 함수를 호출, 결과가 포함된 배열을 반환

https://docs.microsoft.com/ko-kr/scripting/javascript/reference/map-method-array-javascript

array1.map(callbackfn[, thisArg])

매개 변수

매개 변수	정의
array1	필수 요소. 배열 개체입니다.
callbackfn	필수 요소. 최대 3개의 인수를 받아들이는 함수입니다. map 메서드는 배열에 있는 각 요소마다 한 번씩 callbackfn 함수를 호출합니다.
thisArg	선택 사항입니다. this 키워드가 callbackfn 함수에서 참조할 수 있는 개체입니다. thisArg가 생략되면 undefined가 this 값으로 사용됩니다.

function callbackfn(value, index, array1)

콜백 인수	정의
value	배열 요소의 값입니다.
index	배열 요소의 숫자 인덱스입니다.
array1	요소가 포함된 배열 개체입니다.

// Define the callback function.  
function AreaOfCircle(radius) {  
    var area = Math.PI * (radius * radius);  
    return area.toFixed(0);  
}  

// Create an array.  
var radii = [10, 20, 30];  

// Get the areas from the radii.  
var areas = radii.map(AreaOfCircle);  

document.write(areas);  

// Output:  
// 314,1257,2827