Javascript(자바스크립트) - 배열 처리 정리(1) - map, forEach

Javascript - forEach, map 비교

 

① forEach, map - 배열 순회 후 내부 인자의 원소의 값을 가공하여 로직을 완성하는 메소드(Method)

② 차이점은 수정된 배열을 리턴(retrun)하는지 여부가 있지만, 사용법에 따라 다르다.

③ 새롭게 가공 후 수정 된 배열을 리턴 받을 때는 map, 기존 배열을 가공 하여 평균, 합산 등을 구할 때는 forEach 사용

 

 

Javascript - forEach 패턴(1)

기본 소스

let data= [10, 15, 20, 25, 30]
let result = [];
 
//모든 원소의 값에서 -5 감소
data.forEach( x => { 
    result.push( x - 5 ) 
});
 
//결과 출력
console.log(result);

실행 화면

 

 

Javascript - forEach 패턴(2)

기본 소스

- 얕은 복사(Swallow Copy) 수행되어 기존 배열이 수정된다. - 사용에 주의

let data= [10, 15, 20, 25, 30]
 
//모든 원소의 값에서 -5 감소
data.forEach( (val, idx, arr) => { 
    data[idx] =  val - 5;
});
 
//결과 출력
//얕은 복사(Swallow Copy) 수행
console.log(data);

실행 화면

 

Javascript - map

기본 소스

let data= [10, 15, 20, 25, 30]
 
//모든 원소의 값에서 -5 감소 후 새로운 배열 반환
let result = data.map( x => { 
    return x - 5 
});
 
//결과 출력
console.log(result);

 

실행 화면

본문의 모든 예제는 ES6 (ECMAScript 2015) 문법으로 작성했다.