솔직히 개발을 하며 언어가 가지고있는 모든 내장함수를 외우고 있을수는 없다.
상황에 따라 다양한 언어를 사용해야 하기에 외우고 있는것이 매우 피곤함은 물론 너무 많은 메서드를 알아 언어가 헷갈릴수도 있다(는 핑계)
하지만, JS를 주력으로 하는 개발자라면 배열의 주요 메서드들의 원리는 확실이 이해하고 있어야 한다.
필자는 얼마전까지도 reduce의 사용이 유연하지 못했다. 그리도 중요한 reduce이거늘...
그래서 배열 메서드에 대해서 간단히 정리하며 다시 한번 정리해보고자한다.
순서는 다음과 같다.
1. forEach
2. map
3. filter
4. reduce
5. Object.keys
6, some, every
1. forEach
forEach는 이름에서도 알수있듯이 for문 처럼 반복에 사용된다.
어떤 반복이냐. 배열의 길이만큼 반복하며 배열의 요소를 순서대로 다룬다.
let arrNumbers = [3, 2, 19, 1];
arrNumbers.forEach((nowVal, index) => {
console.log('현재 arrNumbers['+index+']의 값: '+ nowVal);
});
아주 간단하다. forEach는 첫번째 인자로 콜백메서드를 받는다.
그 콜백 메서드의 첫번째 인자로는 배열의 현재값, 두번째 인자로는 현재 인덱스가 온다.
세번째 인자로 현재 사용중인 배열이 오기는 하나 필자는 잘 쓰지 않는다.
※ forEach문은 for문과 달리 break, continue등의 키워드를 사용할 수 없다. 마찬가지로 return을 하여도 반복을 중단할 수 없다.
※ forEach문은 사이드 이펙트, 즉 forEach문 외부에 영향을 미치는 경우가 많으니 주위에서 사용하자.
2. map
map은 필자가 가장 사랑하는 배열 내장함수다.
배열의 요소를 순차적으로 처리(가공)한 후 처리된 값을을 다시 하나의 배열로 반환한다.
const arrNumbers = [1, 3, 5, 7, 9];
const doubleNumbers = arrNumbers.map((nowVal, index) => {
console.log("현재 arrNumbers["+index+"의 값: "+nowVal);
return 2 * nowVal
});
// 결과 arrNumbers >> [2, 6, 10, 14, 18]
map은 첫번째 인자로 콜백 메서드를 받는다.
그 콜백 메서드의 첫번째 인자로는 배열의 현재값, 두번째 인자로는 현재 인덱스가 온다.
※ map도 for문과 달리 break, continue등의 키워드를 사용할 수 없다. return을 하면 현재의 요소처리를 끝내고 다음 요소의 처리로 넘어간다.
3. filter
filter도 상당히 유용하다. 다만 필자는 사용 빈도수가 높지는 않다.(매우 주관적)
filter는 배열의 요소를 반복하며 return의 값(boolean 형)에 따라 true이면 반환, false이면 반환하지 않는다.
즉, return의 값에 의해 필터링된 새 배열(true값을 반환한 요소들만으로 만들어진)을 반환한다.
const arrChar = ['가', '나', '다', '라', '마'];
const newArrChar = arrChar.filter((nowVal, index) => {
console.log("현재 arrChar["+index+"의 값: "+nowVal);
return index % 2 == 0;
});
// 결과 newArrChar >> ['나', '라']
filter는 첫번째 인자로 콜백 메서드를 받는다.
그 콜백 메서드의 첫번째 인자로는 배열의 현재값, 두번째 인자로는 현재 인덱스가 온다.
※ filter도 for문과 달리 break, continue등의 키워드를 사용할 수 없다. return의 값에 따라 각 요소들을 처리한 후 새로 만들어질 배열에 값을 반환하기도 안하기도 한다.
4. reduce
reduce는 JS개발자들이 아주 즐겨쓰는 배열 내장함수이다.
자기가 잘 사용하지 않더라도, JS관련 서적을 보려면 다른 JS개발자들과 co-work하려면 반드시 알아두어야 한다.
const arrNumbers = [1, 2, 3, 4, 5];
const examNum = arrNumbers.reduce((prevReturnVal, nowVal, index) => {
return prevReturnVal + nowVal;
});
// 결과 examNum >> 15
const examArr = arrNumbers.reduce((prevReturnVal, nowVal, index) => {
console.log("i:" +index, "prevReturnVal:"+prevReturnVal);
prevReturnVal.push(nowVal * index);
return prevReturnVal;
}, []);
// 결과 examArr >> [0, 2, 6, 12, 20]
reduce는 다른 메서드들과 조금 다르니 자세히 들여다 보자.
reduce는 첫번째 인자로 콜백 메서드가 온다.
그 콜백 메서드의 첫번째 인자는 이전 프로세스에서 return된 값이다.
두번째 인자는 현재 요소의 값, 세번째 인자는 index이다.
그리고 reduce의 두번째 인자로 initialValue를 설정할 수 있다.
이 initialValue는 위 예시의 prevReturnVal의 초기 값이 된다.( 최초에는 이전에 return된 값이 없는데, 그것을 대신함)
※ reduce도 for문과 달리 break, continue등의 키워드를 사용할 수 없다. return으로 프로세스를 마친 최종결과를 반환한다. 그 형태는 무엇이든 될 수 있다.
5. Object.keys
Object.keys는 새로 추가된 문법이다. (es7이었던가...)
아무래도 for in 만으로는 부족하다고 판단하여 Object를 더욱 잘 다루기 위해 추가된것으로 생각된다.
단도직입적으로 Object.keys는 JS말하는 객체 {} 에서 key만을 분리해내어 배열로 반환하는 메서드이다.
const obj = {
kim: "노룩패스",
lee: "4대강",
mun: "최저임금"
};
const arrObjProperties = Object.keys(obj);
// 결과 arrObjProperties >> ['kim', 'lee', 'mun']
아주 심플하다. 그리고 강력하다.
우리는 Object.keys가 등장하여 object를 보다 아주 잘 다룰수 있게 되었다.
object를 배열 메서드들로 다룰 수 있게된 것이다.
6. some, every
some과 every 역시 종종 쓰이는 배열의 내장함수이다.
filter와도 유사한 부분이 있는 some과 every.
some은 배열을 요소들을 순차적으로 처리하며,
하나라도 return이 true일 경우 true를 반환한다. (아니면 false)
const oneValueDiff = [1, 1, 2, 1, 1, 1];
const result2 = oneValueDiff.some((nowVal, index) => {
console.log("some: "+index);
if (oneValueDiff.length == index+1) {
return true;
}
return nowVal != oneValueDiff[index+1];
});
// 결과 result1 >> true | console결과 >> 0,1
some에서 true가 발견된 후 더이상 반복순회가 일어나지 않는다. 즉, break된것이다.
여태까지의 배열메서드들과는 확실히 다른 부분이다.
every는 배열의 요소들을 순차적으로 처리하며,
모든 요소의 처리결과 return이 true일 경우 true를 반환한다. (아니면 false)
const everyValuesOne = [1, 1, 1, 1, 1, 1];
const result1 = everyValuesOne.every((nowVal, index) => {
console.log("every: "+index);
if (everyValuesOne.length == index+1) {
// 마지막 요소 >>> 비교대상 x
return true;
}
return nowVal == everyValuesOne[index+1];
});
// 결과 result1 >> true | console결과 >> 0,1,2,3,4,5