ES6 (4) : Array Method

8) 배열 함수

 

(1) forEach()

반복문의 순번(i++)과 배열의 크기를 따로 선언하는 과정을 생략할 수 있음.

forEach()가 내장함수이므로 속도 부분으로는 for()보다 더 빠르다.

* 반환값이 없어도 됨

 

• 문법

arr.forEach(callback(currentValue[, index[, array]])[, thisArg])

- callback: 각 요소를 실행할 함수, currentValue와 index, array 세 가지 매개변수를 받음.

    - currentVaule: 처리할 현재요소

    - index: 처리할 현재 요소의 index.

    - array: forEach()를 호출한 배열.

- thisArg: callback을 실행할 때 this로 사용하는 값

 

 

forEach()를 사용한 코드(1):

const arr = [1, 2, 3, 4, 5];
const odd = [];

arr.forEach(function(num){
	if(num%2 == 1) {
    	odd.push(num);
    }
});

console.log(odd);		// [1, 3, 5]

 

forEach()를 사용한 코드(2):

const useQuery = "a=1,b=2,c=3"

function parser(qs) {

    const queryString = qs.substr(0);				
    const splitedStr = queryString.split(',');		//splitedStr=['a=1','b=2','c=3']
    let result = {};
    
    splitedStr.forEach((str) => {
        const [key, value] = str.split('=');
        result[key]=value;
    });
    return result;
}
console.log(parser(useQuery));

// {a: '1', b: '2', c: '3'}

 

 

(2) map()

배열 요소를 정의된 함수를 통해 새 배열을 만드는 함수.

※ 반환값 필요.

• 문법

arr.map(callback(currentValue[, index[, array]])[, thisArg])

- callback: 배열의 모든 요소에 적용되어 새 배열 요소를 생성.

    - currentVaue: callback이 적용될 현재 요소

    - index: 처리할 현재 요소의 index

    - array: map()를 호출한 배열

- thisArg: callback을 실행할 때 this로 사용하는 값

 

 

map()을 사용한 코드(1):

const arr1 = [1, 2, 4, 8];
const doubleArr = numbers.map((arr1) => {
	return arr1 * 2;
});
console.log(doubleArr);		// [2, 4, 8, 16]

 

map()을 사용한 코드(2):

const useQuery = "a=10,b=20,c=30"
function parser(qs) {
    const queryString = qs.substr(0);		// queryString = a=10,b=20,c=30"
    const splitedStr = queryString.split(',');		// splitedStr = ['a=10', 'b=20', 'c=30']
    
    const result = splitedStr.map((str) => {
    	const [key, value] = str.split('=');	
        return {key: key, value: value};		// {key: 'a', value: '10'}
    });
    return result;
}

console.log(parser(useQuery));

/* result = [
   	{key: 'a', value: '10'},
        {key: 'b', value: '20'},
        {key: 'c', value: '30'}
   ];
*/

 

 

(3) reduce()

배열의 요소를 순차적으로 순회하며 reducer 함수를 실행하고 하나의 결과값을 반환,

그 결과값은 객체나 배열, 스트링 등이 될 수 있음

 

• 문법

arr.reduce(callback[, initialValue])

- callback: 배열의 각 요소에 대해 실행, 네 가지 인수를 받음.

    - accumlator(누적값): 누산기. callback의 반환값을 누적.

    - currentValue(현재값): 처리할 현재 요소

    - currentIndex(현재 인덱스): 처리할 현재 요소의 index(initialValue를 제공한 경우: 0, 아니면 1부터 시작)

    - array(현재 배열): reduce()를 호출한 배열.

- initialValue(초깃값): callback의 최초 호출에서 첫 번째 인수에 제공하는 값

 

🌟 reduce의 accumulator와 currentValue

 

    ① accumulator(누적값)

        accumulator는 callback의 반환값을 누적하는데, 이 누적값이 없거나 초깃값을 제공한 경우

        initialValue(초깃값)로 시작함. 

 

    ② initialValue(초깃값)

        initialValue를 설정하지 않았을 경우: accumulator가 배열의 0번째 index, currentVaule가 첫 번째 index

        initialValue를 설정한 경우: accumulator가 initialValue, currentVaule가 0번째 index

        즉, reduce가 순회하면서 accumulator에 반환값을 누적시키며 하나의 값을 리턴.

       

* 배열이 비어있는데 초깃값을 제공하지 않을 경우: 에러 발생

 

 

reduce()를 사용한 코드(1):

const arr = [1, 2, 3, 4, 5];
const initialValue = 0;

const reduceArr = arr.reduce((accumulator, currentValue) => 
	accumulator + currentValue, initialValue
);

console.log(reduceArr);		// 15

 

reduce()를 사용한 코드(2):

const useQuery = "a=1&b=3&c=5"
function parser(qs) {
    const queryString = qs.substr(0);		// queryString = a=1&b=3&c=5"
    const splitedStr = queryString.split('&');		// splitedStr = ['a=1', 'b=3', 'c=5']
    
    return splitedStr
    	.map((str) => {
    		const [key, value] = str.split('=');
        	return {key, value};			
    	})
    	.reduce((result, arr) => {
    		result[arr.key] = arr.value;
        	return result;
    	}, {});
    
}

console.log(parser(useQuery));

// {a: '1', b: '3', c: '5'}