[220108] Array, fill, 덧셈 삼대장(map, reduce, forEach)

목차

1.   array

2.   fill

3.   덧셈 삼대장

---

Array ( 집어넣을 요소 | 생성할 빈 배열 수)

• Array( element1, element2... | arrayLength ) : 생성자
• 새로운 array 객체를 생성할때 사용
• element1, element2... : array / 안에 채울 요소, 만약 자료형이 숫자이고 단 하나일 경우 arrayLength로 넘어간다
• arrayLength : 유일한 매개변수가 2^32-1 이하의 정수인경우, 그 수 만큼의 빈 배열을 갖게된다.

let arr1 = Array(2) //[ 빈 요소, 빈 요소 ]

let arr2 = Array('apple', 'pear') //['apple', 'pear]

 

 

fill (채울 값,  시작 인덱스 번호,  끝 인덱스 번호)

• arr.fill(value, start, end) : 메서드
• 연결된 배열을 시작 인덱스번호부터 끝 인덱스 번호 이전까지 입력받은 값 하나로 채움
• value (필수) : number / 배열을 채울 값
• start (옵션) : number / 시작 인덱스(기본 값 = 0), 음수일 경우 length+start를 인덱스로 가짐.
• end (옵션) : number / 끝 인덱스(기본값 = this.length), 음수일 경우 length+end를 인덱스로 가짐
• return : array / 변형한 배열
• 복사본이 아니라 this 객체를 변형해 반환.
• value에 객체를 받을 경우, 그 참조만 복사해서 배열을 채움

[1,2,3].fill(5);				//[5,5,5]
[1,2,3].fill(5,2);				//[1,2,5]
[1,2,3].fill(5,1);				//[1,5,5]
[1,2,3,4,5,6,7].fill(5,3,5);	//[1,2,3,5,5,5,6,7]
[1,2,3,4,5,6,7].fill(5,-3,-2);	//(5,7-3,7-2)=(5,4,5) ---> [1,2,3,4,5,5,6,7]


//매개변수를 객체로 가질경우
let arr=Array(3).fill({}); 		//[{}, {}, {}]
arr[0].hi = "hi"; 			//[{hi:"hi"}, {hi:"hi"}, {hi:"hi"}]

 

 

map(새 배열을 만들 함수())

• arr.map(callback(currentValue,index,array),thisArg)
• callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듬
• callback : (필수) function
  • 새로운 배열 요소를 생성하는 함수. 세 가지 인수를 가짐.
  • 배열 값이 들어있는 인덱스에 대해서만 호출.
  • 값이 삭제되거나 값이 할당/정의되지 않은 인덱스는 호출하지 않음. 
• currentValue : (필수) 처리할 현재 요소
• index : (옵션) number / 처리할 현재 요소의 인덱스
• array : (옵션) array / map()을 호출한 원본 배열
• thisArg : (옵션) callback을 실행할 때 this로 사용되는 값
• return : array / 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

let num=[1,4,9]
let root=num.map(Math.sqrt)
//제곱근 구하기
//[1,2,3]

let temp=num.map(v=>v+1)
//각 요소에 1을 더하기
//[2,5,10]

 

let hotel =[
	{key:1 , value:100},
	{key:2 , value:200},
        {key:3 , value:300}];

let newHotel = hotel.map((obj) => {
	let reObj={};
    //새 배열 선언
    
	reObj[obj.value] = obj.key;
    /*reObj key위치에 value 값 넣고,
    reObj value위치에 key를 넣음*/
    
	return reObj;
    //newHotel 값으로 반환
});

 

 

 

---

 

 

forEach()이랑 map()은 둘다 지정한 배열에 한번씩 접근하는거 아닌가? 뭐가 다르지?

forEach()에 대한 블로그 작성글 : https://hancoco.tistory.com/32

[220106] forEach문. 차근차근 알아보기

 

forEach()

배열에 있는 각 요소에 대하여 주어진 함수(콜백)를 오름차순으로 한 번씩 실행한다.

리턴값을 버리고 자료형이 정해지지 않은 값을 반환한다

 

map()

배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다.

메모리를 할당하고 array형인 리턴값을 저장한다

 

즉, 최대의 차이는 리턴값을 받을 수 있는가, 없는가! 리턴값을 받아야할때는 map을 사용하면 되겠다.

 

 

---

 

reduce(함수(누적변수, 현재값, 인덱스, 배열))

• array.reduce(callback, initialValue)
• 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환합니다.
• callback : (필수) 배열의 각 요소에 대해 실행할 함수. 네 가지 인수를 받는다
  • accumulator / acc : callback의 반환값을 누적. (누산기)
  • currentValue / cur : 처리할 현재 요소 (현재 값)
  • currentIndex / idx (옵션) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0부터, 아니면 1부터 시작 (현재 인덱스)
  • array / src (옵션) : reduce()를 호출한 배열 (원본 배열)
  • 함수의 반환값은 누산기에 할당되고, 누산기는 순회중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.
• initialValue : (옵션)
  • callback의 최초 호출에서 첫 번째 인수에 제공하는 값.
  • 초기값을 제공하지 않으면 배열의 첫번째 요소를 사용.
  • 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 생김.
• return : 누적 계산의 결과값. 단 하나의 값!

 

let a = [1,2,3,4,5]
    //acc 반환값, cur 현재값, idx 현재요소의 인덱스, src 원본배열
    result = a.reduce((acc,cur,idx)=>{
        console.log(acc,cur,idx);
        return acc+cur;
    },0) //초깃값 acc의 초기값 = 0

반환값	현재값	현재 인덱스
0 (초기설정값)	1	0
1 (0+1)	2	1
3 (1+2)	3	2
6 (3+3)	4	3
10 (6+4)	5	4