[JS] Array 관련 매소드 Array.prototype.forEach

자 행님덜 이번에는 Array관련 매소드를 설명드리도록 하겠읍니다.

이 함수들은 ES6에서 새로 추가된 것이 아닙니다.

따라서 킹터넷 갓스플로러에서도 사용하는것이 가능합니다.

 

선행하면 좋은 글: https://so4869.tistory.com/20

 

이 글을 쓰는 목적은 제가 이러한 함수들을 공부하면서 인터넷을 뒤져본 결과, 잘못된 정보도 많았고, 쓸데없는 정보도 많았습니다.

 

 

해당 검색결과는 제가 글을쓰려는 주제로 구글에다가 검색해 본 결과입니다.

벌써 이렇게 간단하게 검색만 해보아도 ES6과 관련을 지어서 글을 써 놓으신 분들이 많습니다.

하지만 여기서 설명하려는

Array.prototype.forEach

Array.prototype.reduce

Array.prototype.filter

Array.prototype.map

들은 전부 ECMAScript5.1 에 처음 선언되었습니다.

따라서 모든 개발자에게 사랑받는 킹터넷 갓스플로러에서 사용할 수 있습니다.

 

여기서 말하는 것들은 전부 검증된 팩트이니 믿어주시면 됩니다 행님덜.

혹시 잘못된 것이 있으면 댓글달아주세요.

 

 

Array.prototype

우선 이 메소드들을 설명하기 앞서서 메소드명 앞에 붙는 Array.prototype에 대해서 알려드리겠읍니다.

Array.prototype 에 선언되어 있는 메소드들은 Array타입의 변수를 만들었을때 사용할 수 있습니다.

Array.prototype.first = function(){
	return this[0];
}

Array.prototype.last = function(){
	return this[this.length - 1];
}

 

위의 코드를 실행해서 Array.prototype에 first, last를 선언하면

위의 사진과 같이 사용할 수 있습니다.

Array.prototype에 사용자 메소드를 선언할때는 화살표 함수를 쓰지 않습니다.

사용할 수는 있지만, 통상적으로 prototype객체에 선언하는 것은 그 객체의 관련된 무언가를 건드리거나, 접근하겠다는 뜻인데 화살표 함수를 쓰게 되면 this의 Scope가 달라지므로 사용하지 않습니다.

 

예로 저 위의 Array.proto.first를 보면, this의 0번째를 반환하고 있습니다. 저 function안에서의 this는 array인 자기 자신인 것입니다.

 

뭐 아무튼 이제 본제에 들어가겠습니다.

 

Array.prototype.forEach

아까도 이야기 했듯이 forEach는 es5.1문법입니다.

Array.prototype.forEach(이하'forEach')는 기본적으로 두개의 인수를 전달받습니다.

 

forEach는 기존의 for문과 처럼 반복적 기능을 수행할 때 사용합니다.

 

기본구조

forEach(callback, ?thisArg);

 

그리고 첫번째 인수인 callback함수는 인수로 (item, index, array) 3개가 넘어옵니다.

 

thisArg에 대해서는 추후에 설명드리겠읍니다.

기본용법

tempArr.forEach(function(item, index, object){
	console.log(item, index, object);
});
// 첫번째 인수인 콜백함수는 필수입니다. 입력하지않으면 에러가 납니다.

// 또는 콜백함수를 변수로 빼서 이런식으로 사용할 수도 있습니다.
let cb = function(item, index, object){
	console.log(item, index, object);
};
tempArr.forEach(cb);

기존 for문과의 차이

// 기존 반복문
for(let i = 0; i < tempArr.length; i++){
	console.log(tempArr[i], i, tempArr);
}

이런식으로 나타낼 수 있습니다.

 

문법적인 차이에서 볼 수 있듯이 가장 큰 차이는 for문은 반복적으로 {}내에 있는 코드를 실행한다는 점이고, forEach는 첫번째 인수로 들어온 콜백을 반복적으로 실행한다는 것입니다.

 

javascript 함수에서의 인수

여기서 우리는 javascript의 특성상 함수를 호출할때 인수의 개수를 맞추지 않아도 된다는 생각이 떠올라야 합니다.

예를들어서

function testFunc(a, b){
	console.log(a, b);
}

와같이 함수를 선언해 놓고

testFunc(10);
testFunc(10, 20, 30);

이런식으로 사용해도 아무런 문제가 없습니다. 첫번째 줄과같이 하면 b는 undefined라고 뜹니다. (에러는 아님)

그리고 두번째 줄과같이 사용해도 함수에서 두번째 인수만 받기 때문에 30은 그냥 버려집니다.

 

 

따라서 forEach에서도 배열의 원소만 필요하다 라고 한다면,

tempArr.forEach(function(item){
	console.log(item);
});

과 같이 나타낼 수 있습니다.

 

 

주의사항

forEach는 기존의 for문과 같이 break, continue와 같은 예약어를 사용할 수 없습니다.

물론 return 해버리면 그 함수는 끝난다는 점을 이용해서 continue와 비슷하게는 만들 수 있겠죠.

그렇지만 break를 할 수는 없습니다.

 

또한 위에서 서술했듯이, forEach는 기존의 for문과 달리 첫번째 콜백을 반복적으로 실행합니다.

함수를 실행할때에는 아무리 빠른, 아무리 좋은 언어여도 오버헤드가 발생하게 됩니다. 

 

간단하게 이야기하자면, 기존의 for문에서는 {}내의 구문들을 수행하게 됩니다.

그러나 forEach는 콜백함수를 실행합니다.

이 콜백함수 내의 구문들을 수행하면 같은조건에서는 같은 시간이 나옵니다.

그러나 콜백함수도 '실행'하는 것입니다. 이 함수를 실행하기 위해서는 함수의 정보들을 알아야합니다. 이 함수의 정보를 알아오는데 걸리는것이 오버헤드입니다.

물론 이게 다가 아니지만 간한하게 설명하면 이렇습니다.

 

함수를 한번, 두번 실행할때에는 속도차이가 별로 느껴지지 않지만,

화살표함수와의 콜라보로인한 편한 문법때문에 남발하다보면 느려지는것을 느끼실 수 있습니다.

그렇지만 너무 신경쓰지 않으셔도 되는게 과거와는 다르게 요즘 클라이언트의 성능이 크게 올라가고 있습니다.

 

결론은 과하지만 않게 즉당히 쓰면 개발할때도, 유지보수할때도 편합니다.

 

그럼 ㅅㄱ