[Javascript] 자바스크립트 배열_02 (forEach(), map(), 정렬, 필터)

앞에 글에서 살펴본 메서드들이 기본적인 메서드들이였다면,

이번에 다룰 메서드들은 조금 심화된 메서드들이다.

 

1. forEach()

자바스크립트에는 다양한 반복문이 존재한다. (for, for-of, for-in, while...)

이 중 배열에 사용하는 반복문은 for-of문이다. (물론 for, while도 가능하다)

forEach() 또한 배열에 사용하는 반복문이다.

 

그렇다면 왜 for-of 말고 forEach()가 또 있으며, 언제 사용할까?

 

성능, 코드 길이등등의 이유가 있겠지만, 가장 중요한 for-of와 forEach의 차이점은

어떠한 이유로 인덱스가 필요할 경우 for-of문은 활용될수없다는 점이다. 반면 forEach()는 가능하다

(물론 기본 for문으로도 인덱스에 접근할 수 있지만,,,forEach()가 더 효율적이다)

 

같은 기능을 하는 코드로 살펴보자

- for-of

const itemPrice = [2500, 3200, 10900, 990];
const tax = 0.19;
const taxAdjustedPrice = [];
for (const price of itemPrice) {
  taxAdjustedPrice.push(price * (1 + tax));
}
console.log(taxAdjustedPrice);

- forEach()

const itemPrice = [2500, 3200, 10900, 990];
const tax = 0.19;
const taxAdjustedPrice = [];
itemPrice.forEach((price, idx, prices) => {
  const priceObj = { index: idx, taxAdjPrice: price * (1 + tax) };
  taxAdjustedPrice.push(priceObj);
});
console.log(taxAdjustedPrice);

두 코드중 뭐가 더 낫다고 말할 수 없고, 그냥 상황에 따라 적절하게 사용해야 할 듯 하다.

(인덱스가 필요할땐 무조건 forEach())

 

2. map()

앞서 살펴본 forEach() 메서드나 for-of문의 예시를 보면,

배열 요소 전부를 변경하는 작업을 실행하기 위해 반복문을 사용한것이다.

이때 코드를 보면 새로운 배열(taxAdjustedPrice) 정의하여 거기에 push하는 과정이 존재한다

이때 map() 사용하면 이 과정을 생략 가능하다.

 

1번의 예시코드를 map()을 활용해 작성해보자

const itemPrice = [2500, 3200, 10900, 990];
const tax = 0.19;
const taxAdjustedPrice = itemPrice.map((price, idx, prices) => {
  const priceObj = { index: idx, taxAdjPrice: price * (1 + tax) };
  return priceObj;
});
console.log(taxAdjustedPrice);

-> 배열 생성 과정이 생략되었다.

 

for-of와 forEach()중 뭘 선택하던 상관없듯이 forEach()와 map()의 선택도 사용자 마음이다.

다만, map() 사용시 기억해야할 것이 두가지 존재한다

1. 반드시 무언가를 return 해야한다 (반드시 return 키워드를 사용해야한다는 것이 아니다..화살표함수 사용시 return 키워드 생략이 가능하므로…)
2. 배열의 모든 요소를 수정된 요소로 교체하는 것이 아닌(값만 바뀌는것이 아닌), 모든 요소가 변경된 메모리의 새로운 주소를 가진 새로운 배열을 반환되는 것 (즉, 기존배열은 건드리지 않는다…forEach()에서 push()를 사용할때와의 가장 큰 차이점))

 

3. 배열 정렬 & 필터링

3_1. 정렬

sort()라는 메서드가 있고, 해당 메서드를 사용하면 정렬이 되긴한다...

console.log("기존배열: " + itemPrice);
const sortPrice = itemPrice.sort();
console.log("정렬배열: " + sortPrice);

??? 배열 요소들의 위치는 바뀌었지만 무슨 기준으로 정렬했는지 한눈에 알아보기 힘들다.

sort()는 무슨 기준으로 정렬한 것일까?

=> sort() 메서드는 배열의 요소를 모두 문자열로 변환하여 문자열 정렬 로직을 통해 정렬한다

*참고: 문자열 정렬 로직 -> 문자열 정렬 로직은 첫번째 문자만 비교한다…예를들어 10 > 3이 아닌 ‘1’0 < 3인것

 

그러면 우리가 원하는 내림 or 오름차순 정렬은 어떻게 해야할까?

=> sort()를 사용하되 정렬 자체 함수를 인자로 넣어주면 된다.

const itemPrice = [2500, 3200, 10900, 990];
const tax = 0.19;
console.log("기존배열: " + itemPrice);
const sortPrice = itemPrice.sort((a, b) => {
  if (a > b) {
    return 1;
  } else if (a === b) {
    return 0;
  } else {
    return -1;
  }
});
console.log("정렬배열: " + sortPrice);

또한, 여기서 정렬 기준을 반대로 하는 방법으로는 2가지가 존재하는데

1. revers() 메서드 사용
2. sort() 자체 정렬 함수에서 코드 수정

둘 중에 2번을 주로 쓰는게 바람직하다.

 

3_2. 필터링

배열 요소를 원하는대로 필터링 하는데에는 filter()라는 메서드가 존재한다.

조건 만족에 따라 true or false를 반환하는데, true를 반환하는 요소들은 새로운 배열에 저장되고, false를 반환하는 요소들은 삭제된다

const dummy = [1, 2, 3, 4, 5, 6];
const filterDummy = dummy.filter((d, idx, dummy) => {
  return d < 4;
});
console.log(filterDummy);
//결과 => [1, 2, 3]

1. 반드시 무언가를 return 해야한다 (반드시 return 키워드를 사용해야한다는 것이 아니다..화살표함수 사용시 return 키워드 생략이 가능하므로…)
2. 배열의 모든 요소를 수정된 요소로 교체하는 것이 아닌(값만 바뀌는것이 아닌), 모든 요소가 변경된 메모리의 새로운 주소를 가진 새로운 배열을 반환되는 것 (즉, 기존배열은 건드리지 않는다…forEach()에서 push()를 사용할때와의 가장 큰 차이점))

 

배열 메서드_01, 02 글을 통해 정말 많은 메서드들을 정리해봤다.

그럼에도 아직 중요한 메서드가 하나 남았는데, 그 메서드는 까다롭기 때문에 별도의 주제로 다루려한다.