21.04.05 map, reduce, concat, parseInt

📌Array.prototype.map() : 배열 내의 모든 요소 각각에 대해서 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 

const array1 = [1, 4, 9, 16];

//pass a function a map
const map1 = array1.map(x=>x*2);
//map 함수 안에 배열 원소에 2를 곱하고 출력하는 함수를 실행하고 이를 새로운 배열의 형태로 만든다. 

console.log(map1);
//하면 expected output : [2, 8, 18, 32];

아래 코드는 다음과 같이 분석할 수 있다. 

        {list.map((value, index) => {
          <li key={index}>{value}</li>;
        })}

배열 list의 원소에 대한 value와 index를 인자로 받아서 

li 태그를 형성하는데 key에 index 값을 넣어주고 내용을 표시할 변수는 value 값을 넣어준다. 

 

📌Array.prototype.reduce() :배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환한다. 

const array1 = [1, 2, 3, 4];
//현재값과 더할 값을 정의하고 이를 더하는 함수를 실행한다. 
const reducer = (accumulator, currentValue)=>accumulator + currentValue;

//1+2+3+4를 실행한다. 
console.log(array1.reduce(reducer));
//expected output : 10

//5+1+2+3+4를 실행한다. 앞에서 실행한 1+2+3+4에 reduce 인자로 들어온 5까지 더해준다. 
console.log(array1.reduce(reducer, 5));
//expected output : 15

리듀서 함수는 네 개의 인자를 가진다. 

1. 누산기 accumulator (acc) : 콜백의 반환값을 누적한다. 

2. 현재 값 (cur) : 처리할 현재 요소 

3. 현재 인덱스 (idx) : 처리할 현재 요소의 인덱스

4. 원본 배열 (src) : reduce()를 호출한 배열

 

➕ reduce() 작동 방식 

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
	return accumulator + currentValue;
});

//화살표 함수의 형태로 나타내기 
[0, 1, 2, 3, 4].reduce((prev, curr) => prev+curr);

위 콜백은 4번 실행된다. 각 호출의 인수와 반환값은 다음과 같다. 

callback	accumulator	currentValue	currentIndex	array //reduce함수는  원본 배열을  건드리지 않는다.	반환값 //accumulator + currentValue
1번째 호출	0	1	1	[0,1,2,3,4]	1
2번째 호출	1	2	2	[0,1,2,3,4]	1+2 = 3
3번째 호출	3	3	3	[0,1,2,3,4]	3+3 = 6
4번째 호출	6	4	4	[0,1,2,3,4]	6+4 = 10

reduce()는 마지막 콜백 호출의 결과인 10을 반환한다. 

 

📌Array.prototype.concat() : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다. 

👉array1+array2

//배열 두 개 이어붙이기 
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
//expected output : ['a', 'b', 'c', 'd', 'e', 'f'];

👉array1+array2+array3

//배열 세 개 이어붙이기
const num1 = [1,2,3];
const num2 = [4,5,6];
const num3 = [7,8,9];

num1.concat(num2, num3);
//expected output : [1,2,3,4,5,6,7,8,9];

👉array1+value1

//배열에 값 이어붙이기
const alpha=  ['a', 'b', 'c'];

alpha.concat(1, [2, 3]);
//expected output : ['a', 'b', 'c', 1, 2, 3];

 

📌parseInt() : 문자열 인자를 구문 분석하여 특정 진수의 정수를 반환한다. 

roughScale(x, base)=>{
	const parsed = parseInt(x, base);
    if(isNaN(parsed)){return 0;}
    return parsed*100;
   }
   
   console.log(roughScale('100', 2));
   //expected output : 4

첫번째 인자는 숫자로 변환할 문자열이고 두번째 인자는 문자열을 읽을 진법이다. 

위 예제에서 봤을 때, '100'이라는 문자열을 이진법에 따라 숫자로 바꾸게 되면 4를 출력한다.