자바스크립트 문법 (3) forEach / map / some / filter

ES2015 문법 (3)  forEach / map / some / filter 

 자바스크립트의 특징은 '비동기'를 구사할 수 있는 Callback함수에 있다. '콜벡'이란 말 그대로 '번호표'를 받고 다른 일을 하고 있다가 '불렀을 때' 실행하는 것을 말한다. 이번 포스팅에서는 배열을 응용할 수 있는 콜벡 함수계의 매소드 중에서 forEach / map /  filter / sort 를 살펴보자.

1 『forEach』   

자바스크립트의 문법 공식은 `` array.forEach ( callback , [,that] )``이다. 

바로 예시부터 살펴보자.

---

[예시]

var data =  [ 2, 3, 4, 5 ];

data.forEach ( function( value, index, array ){

console.log ( value * value );

})

//결과: 4, 9, 16, 25

---

위의 예시에서, index와 array인수는 생략해도 무방하다. 아래처럼 인수를 하나만 넣어도 제대로 동작한다. 

---

data.forEach(function(value){

console.log( value * value );

} );

---

2 『map』 

---

[예제]

var data = [ 2, 3, 4, 5 ];

var result = data.map ( function( value, index, array ){

return value * value;

} );

console.log( result );  //결과: [ 4, 9 , 16, 25 ]

---

 map과 forEach( )의 가장 큰 차이는 'return'유무이다. forEach( )같은 경우, forEach함수 안에 console.log나 결과값을 직접 입력해야 한다. 즉, return으로 값을 반환하지 못한다.

하지만 map을 사용한다면, return으로 결과값을 반환할 수 있으며, 그 값을 변수에 넣었을 때는 배열로 얻을 수 있다. 위의 값을 forEach( )로 지정했다면, 4, 9, 16, 25의 결과가 나오며, 숫자값은 따로 도출된다. 결론적으로 map을 사용하면, 결과값을 배열로 받을수 있다. 함수 안의 결과값을 계산하지 않고, 배열로 받기 위해서는 map을 사용하는 게 유리하다.

3 『filter』 

---

[예제]

var data = [ 4, 9, 16, 25 ];

var result = data.filter ( function ( value, index, array ){

                   return value % 2 === 1;

          } );

console.log( result ); // 결과: [ 9, 25 ]

---

filter 매소드는 콜벡함수 안의 내용이 '참'이 될 경우에만 해당 값을 반환한다. 말 그대로 콜벡함수로 필터링하는 개념이다.

4 『sort』 

 배열을 정렬할 때 반드시 알아둬야 하는 매소드가 sort 이다.

---

[예제]

var data = [ 5, 25, 10 ];

console.log( data.sort( ) );   // 결과 : [ 10, 25, 5 ]   (문자열 규칙으로 정렬됨)

console.log( data.sort (function( x, y ){

return x - y; 

} ) );

// 결과: [ 5, 10, 25 ] (숫자로 정렬)

---

만일, 결과를 역차순으로 하려면, 'return y - x'로 변경한다. sort를 활용한 데이터베이스 예제를 살펴보자.

---

[예제]

var classes = [ '교장' , '교감' , '담임' , '기간제' ];

var members = [

{ name: '황상우' , position: '기간제' },

{ name: '김정미' , position: '교감' },

{ name: '박천일' , position: '교장' },

{ name: '오상태' , position: '담임' }

]

console.log( members.sort( function( x, y){

return classes.indexOf( x.position ) - classes.indexOf( y.position );

}));

//결과

[

{ position:'교장' , name:'박천일' },

{ position:'교감' , name:'김정미' },

{ position:'담임' , name:'오상태' },

{ position:'기간제' , name:'황상우' }

]

---

sort메서드는 DB값을 변환할 때 많이 사용한다. 가령, 게임제작에서 점수에 따른 레벨을 설정하는 알고리즘에 사용하면 적절하다.