배열 메소드 들중에.. 평소에 잘 사용하지 않지만, 사용하면 생산성이 많이 올라가는 메소드 들이다.
하지만 다시 리마인드 하는 의미로 정리하면, 도움이 될것 같다. 익숙한놈도 있고.. 초기에 JS 공부할때 알아뒀지만, 한번도 안써봤던,,(reduce) 같은 놈들은 다시 보니 어색 하기도 하고. 이번기회에 정리를 해보자
아래는 이 포스팅의 원문이 되는 블로그
1. 배열에서특정값이 있는지 찾을때는 indexOf를 사용해라
대부분의 배열에서 indexOf 를 사용 하지 않으면, for loop 를 돌려서 찾을수 밖에 없다. 즉 아래와 같은 코드를 사용 하게 되는데.
var isExist =false;
for( var i = 0; max = array.length; i += 1 ) {
if( array[i] === "특정값" ){
isExist = true;
}
}
위와 같은 코드는 아래와 같이 간단하게 사용할 수 있다.
var isExist = (array.indexOf(“특정값”)!== -1 )
즉 간단하게 위의 for loop 를 한줄로 표현할 수 있으며, 이부분이 생산성이나, 코드 가독성에 도 옳은 영향을 끼친다.
2. filter 를사용해보세요
이건.. JSON 오브젝트로 이루어진 배열중에 특정 값만 filter 시킬때 유용하다.
var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 16}
];
var newArr = arr.filter(function(item){
return item.name === "orange";
});
console.log("Filter results:",newArr);
위 값의 newArr 은 name이 orange 인 놈만 필터 되서 나온다.
3. forEach()를쓰세요
사실 개인적으로 for 루프가 더 성능 향상에 좋다고 해서..( 자바스크립트 성능 최적화에 나온다. ).for 로 풀어서 쓰는데 1ms 도 차이 안나니 그냥 forEach를 쓰라고 가이드 한다.
사용법은 아래와 같다.
var array = [1,2,3,4,5];
array.forEach( function( v, i ){
if( v === 3 ){
console.log( v + ":" + i); // 3:2 가 나온다.
}
});
4. map을 잘 활용하자.
이전에 jsperf 에서 map이 forEach 보다 더 성능이 빨라서. 개인적으로 array에서 map을 주로 써왔다. 하지만 … map과 forEach는 용도가 미세하게 다른데.. map은 각 루프에서return을 할수있는 것이 특징이다.
( return된 결과의 동일한 배열을 원하는것이 아니라면 forEach가 더 적합하다. )
즉 map을 사용하면, 리턴값으로 같은 길이의 배열이 나오게 된다.
예를들어 …
var a = [1,2,3,4,5];
var b = a.forEach( function(v, i){ console.log(v); return v+1;}});
var c = a.map( function(v, i){ console.log(v); return v+1;});
를 실행해보면차이점이 다르다. b는 undefined 가 나오며 c 는 [2,3,4,5,6] 이라는 배열이 나온다.즉 배열을 가지고, 연산을 하고 길이가 같은 배열로 결과를 리턴받고 싶을때는 map을 쓰는것이 훨씬 유리하다.
forEach와는 용도가 서로 다르다는것을 기억하자
마지막으로 5번..
5.reduce!! 를 사용하자
이놈은.. 인자를 어떻게 주냐에 따라 용도가 달라진다.
array.reduce(f,n) var a= [1,2,3,4,5] //f는 함수 n은 두번째 인자 라고 가정
n이 없을경우 array.reduce(f);를 살펴 보자 f의 (0) iteration - 첫번째 인자 : 1 - 두번째 인자 : 2 (1) iteration - 첫번째 인자 : 1,2 - 두번째 인자 : 3 (2) iteration - 첫번째 인자 : 1,2,3 - 두번째 인자 : 4 (3) iteration - 첫번째 인자 : 1,2,3,4 - 두번째 인자 : 5 로 나오게 된다.
즉 f 의 인자가 f( a,b,c,d) 라면 a=이전값 b= 현재값 c= 인덱스 d= 배열
로 생각하면 된다.
하지만 reduce 메소드를 불러올때 n을 주게 되면, f의 첫번째 인자가 n이 되게 되는데, 즉 이전초기값이 n으로 대체 된다.
var a= ["a","b","c","d","e","a","b","a","c","c","c"];
var b = a.reduce(function(x,y){
console.log("x:", x);
console.log("y:", y);
x[y] = ++x[y]|| 1;
return x;
},{});
console.log(b);
위 예제를 돌려보면 B 는 최종적으로
Object {a: 3, b: 2, c: 4, d: 1, e: 1}
로 리턴된다.
설명한 5개의 메소드들은 사용하면 개발 생산성 및 가독성이 좋아질 것 같다.
우연히 글을 보았습니다. 위 forEach 예제에서 n[i] 으로 표현된 부분혹은 function( n, i, a ) {…} 이렇게 하여 a[i]로 접근하거나 그냥 n 으로 수정하여야할듯 합니다.
에구 답변을 잘못달았네요. 다시….
위 forEach 예제에서 v[i] 으로 표현된 부분을 function( v, i, a ) {…} 이렇게 하여 a[i]로 접근하거나 그냥 v 으로 수정하여야할듯 합니다.
이런 코드에 오타가 있었네요. 당연히 v 일텐데.. 지적 감사합니다^^
react를 배우던 도중 for문을 map loop로 대체한 코드들이 있어 검색하다 우연히 들어오게 되었는데 유용한 것들 많이 배우고 갑니다. 감사합니다!
도움이 되셨다니 다행이네요^^ forEach, map 등 자주 쓰는데 용법에 따라 좀더 잘 쓰면 좋은것 같아요.
map 사용 시 undefined가 들어가서 찾다가 forEach와 사용법이 다르다는걸 알았네요~ 감사합니다.
2개의 함수가 비슷하면서도 용도가 다르죠^^
감사합니다.
ddThe first tip is not applicable for an object array. Check array.findIndex method. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
This code is based on ES5. In ES6, various methods have been added. If you convert the code to a browser or module bundler that supports ES6, using ES6’s method may be more suitable for maintenance. However, understanding the methods for ES5 is basic in JS development.
유용한 정보 감사합니다!