자바스크립트 Array 객체 함수 (2)

자바스크립트 Array 객체 함수 (1)에 이어서 나머지 메소드들도 살펴보겠습니다.

이젠 포스팅은 여기를 클릭 -> 자바스크립트 Array 객체 함수 (1) 해서 보시면 됩니다.

1편에서는 데이터 삽입과 삭제 메소드를 확인했습니다.

2편에서는 데이터를 이용한 반복을 통해 여러가지 작업을 수행하는 메소드를 확인해 보겠습니다.

데이터 삽입과 삭제를 위한 메소드를 제외한 map, filter, reduce, every, some, find 과 같은 메소드들은 

Array의 데이터의 수만큼(length) 반복하면서 작업을 수행합니다. 이 작업을 위해서 함수(function)을 인자로 받죠.

여담이지만 이게 참 어려운거 같습니다. 보통 자바스크립트를 접하시고 공부하시는 분들이 웹을 하시는 분들인데 또

이런분들은 자바를 기본언어로 알고 있는 경우가 많죠. 자바를 베이스로 하시는 분들은 인자로 함수를 받는걸

이해하기가 참 어렵습니다. 저 역시 그랬고요. 이건 계속 보는 수밖에 없는거 같습니다. 누가 가르쳐 준다고

쉽게 이해할 수 있는게 아니어서... 자바스크립트의 핵심내용이라 대충 할수도 없고요 ㅜㅜ 나중에 기회가 되면 

이걸 주제로 깊게 포스팅해 보고 싶네요.

다시 돌아와서 대부분의 메소드들이 함수를 인자로 받아서 어떻게 수행하는지에 대해서 알아보겠습니다.

var aCarMakers = ["Toyoda", "Lamborghini", "Porsche", "Bugatti", "Samsung"];
aCarMakers.forEach(function(item, index, array) {
    console.log("index : " + index);
    console.log("item : " + item);
});
 
index : 0
item : Toyoda
index : 1
item : Lamborghini
index : 2
item : Porsche
index : 3
item : Bugatti
index : 4
item : Samsung
 
var aNumbers = [1, 2, 3, 4, 5];
 
// map 메서드는 각 배열 요소에 대해 함수를 수행하여 새 배열 생성
// map 메서드는 제공된 함수를 배열의 각 요소에 대해 한 번 호출
// 원데이터는 변경되지 않음
var aNumbersMap = aNumbers.map(function (item, index, array) {
    return item ** 2;
});
 
console.log(aNumbersMap);     // [1, 4, 9, 16, 25]
console.log(aNumbers);         // [1, 2, 3, 4, 5]
 
 
// 테스트를 통과한 item만으로 새 배열 생성
var aOver3 = aNumbers.filter(function (item, index, array) {
    return item > 3;
});
 
console.log(aOver3);    // [4, 5]

forEach와 map은 비슷하지만 forEach는 return값이 없고 map은 있습니다. 성능도 map이 더 좋은걸로 알려져있죠.

특별한 경우가 아닌이상 단순 반복일때는 map을 사용하시면 될 거 같습니다.

filter는 조건을줘서 통과한 값으로만 새로운 배열을 만들어서 return하는걸 볼 수 있습니다.

// reduce 는 배열 item을 사용해 하나의 값을 도출할 수 있음
// 첫번째 인자는 함수, 두번째 인자는 초기값(없어도 무방.없을 때는 배열의 첫번째 값)
var iSum = aNumbers.reduce(function (total, item) {
    return total + item;
}, 10);
 
console.log(iSum);    // 25
 
 
// 모든 item이 true이면 true이고 하나라도 false이면 false return
var bAllOver3 = aNumbers.every(function (item, index, array) {
    return item > 3;
});
 
console.log("all item over 3 : " + bAllOver3);    // all item over 3 : false
 
var bAllOver0 = aNumbers.every(function (item, index, array) {
    return item > 0;
});
 
console.log("all item over 0 : " + bAllOver0);    // all item over 0 : true
 
 
// 하나의 item이라도 true이면 true return
var bSomeOver3 = aNumbers.some(function (item, index, array) {
    return item > 3;
});
 
console.log("some item over 3 : " + bSomeOver3);    // some item over 3 : true
 
 
// 테스트를 통과한 첫번째 인자를 return
// ie는 지원하지 않는다.(엣지부터 지원)
var iFirstItem = aNumbers.find(function (item, index, array) {
    return item > 3;
});
 
console.log("over first item : " + iFirstItem);    // over first item : 4

다른 메소드들은 직관적으로 이해가 가는데 reduce는 약간 이해가 필요합니다. 설명에도 써놨듯이 reduce는 결과값으로

하나의 값을 도출할 때 유용합니다. total값이 라던지 통계데이터라던지. 자세한 내용은 참고사이트에 들어가셔서 보시면

쉽게 설명해 놓으셨습니다.

참고

https://developer.mozilla.org
https://www.w3schools.com/js/js_array_iteration.asp
https://kwangyulseo.com/2015/06/16/javascript-reduce-%ED%95%A8%EC%88%98/