[JS] array Method(forEach, map, filter,reduce)

모두 https://developer.mozilla.org/ko/ 와 CodeStates 수업을 참조하였음

---

arr.forEach(callback) - immutable

function printArray(currentElement, index) {
	console.log(index + ": " + currentElement);
}

['hello', 3, 5].forEach(printArray);

/**** 출력 ****/
// 0 : hello
// 1: 3
// 2 : 5

※순서가 무조건 정해져있음 ( 매개변수명은 벼뀌어도 가능 )
- 1번째 parameter : currentElement
- 2번째 parameter : index
- 3번째 parameter : array

[100, 200, 300].forEach(funciton(curr,i){
	console.log(curr);
});

이런 식으로 인자로 함수를 넘길 수 도 있음! =>콜백함수

+ thisArg사용

function Counter(){
	this.sum = 0;
    this.count = 0;
}

Counter.prototye.add = function(array){
	array.forEach(function(entry){
    	this.sum +=entry;
        ++this.count;
    },this);
};

var obj = new Counter();
obj.add([2, 5, 9]);
obj.count
//3
obj.sum
//16

위는 MDN의 예제이다. prototype은 객체의 상속을 구현하기 위한 것이라고 이해하면 될것같다.
(프로토 타입 : 추후에->https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67다시 정독)

 

---

arr.map(callback) - immutable

element의 길이만큼 반복하는 함수!
callback 내에서 return 이 필요하다. 기존 배열과 동일한 길이를 갖고, 형태가 다른 새로운 배열을 만들 때 유용

[1, 3, 5].map(funciton(currentElement, index, array){
	return currentElement *2;
});
// [2, 6, 10]

※원본값이 변경되지 않으며 새로운 배열이 return

예제

['abc', 'de'].map(getStringLength)
//위 코드의 결과는?

function getStringLength (element, index, array){
return element.length;
}
//index, array는 생략 가능

// return : [3, 2]

---

arr.filter(callback) - immutable

특정 element 를 골라내는대에 多 사용.

[1, 3, 5].filter(function(currentElement, index, array){
	return currentElement>1
});
//1보다 큰 element 만 통과!

 

예제1

[null, 'hello', undefined, 0, '',123].filter(function(current){
	return !current;
	//falsy한 값만 return.
});

예제2

var people = [{name: 'Hoyong', age: 100},{name:'Steve', age: 18}]

people.filter(function(obj){
	return obj.age > 19
});
//객체로 return 

people.filter(function(obj){
	return obj.age > 19
}).map(funciton(obj){
	return obj.name;
});
//이름만 return

//function 분리시 정말 깔끔한 코드 구현 가능

 

과제 예제 - 유도 해설과 다르지만, filter를 이용하여 해결함

//문제
let output = getAllElementsButNth(['a', 'b', 'c'], 1);
console.log(output); // --> ['a', 'c']

//(배열과 인덱스가 주어졌을때, "getAllElementsButNth" 함수는
// 해당 인덱스의 요소를 제외한 배열을 반환합니다.)

//해결

function getAllElementsButNth(array, n) {
  let result = array.filter(function(cur, index){
    return index!==n;
  });
  return result;
}

---

arr.reduce(callback[,initialValue]) - immutable

모든 element 의 계산을 누적해 하나의 결과를 리턴할 때 유용!

- parameter : 순서대로 - (누적값 accumulator, 현재값 currentValue, 현재 index currentIndex, 원본배열)
- return value : 최종 누적값

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
	return accumulator + currentValue;
}
// 5개 element 중 4번 함수가 호출이됨

callback	accumulator	currentValue	currentIndex	array	반환값
1번째 호출	0 (0번 index)	1	1	[0, 1, 2, 3, 4]	1
2번째 호출	1 (1번 호출반환)	2	2	[0, 1, 2, 3, 4]	3
3번째 호출	3	3	3	[0, 1, 2, 3, 4]	6
4번째 호출	6	4	4	[0, 1, 2, 3, 4]	10

 

---

예제

배열들의 배열이 주어졌을 때 "joinArrayOfArrays" 함수는 배열들의 요소를 모두 담고 있는 단일 배열을 반환한다.

let output = joinArrayOfArrays([[1, 4], [true, false], ['x', 'y']]);
console.log(output); // --> [1, 4, true, false, 'x', 'y']

reduce 활용 solution

function joinArrayOfArrays(arr) {
  const joinedArr = arr.reduce(function(acc, val) {
    return acc.concat(val);
  });
  return joinedArr;
}