Array Methods

보통 배열의 요소를 특정 조건으로 걸러내고 싶을때 주로 반복문으로 결과를 얻었다.
하지만 특정 조건을 맞추기 위해 매번 반복문 구현을 하다보면 원하는 값을 얻기위해 원본 배열에 변화를 주는 메소드를 남발하다보면 코드 전체에 영향이 생길 수도 있고 가독성또한 떨어질 것이다. 이를 방지하기 위해 Immutable한 메소드를 몇개만 정리하려고 한다.

• 콜백 함수

Array Methods를 익히기 전에 콜백 함수의 개념이해가 필요하다.
콜백 함수란 함수의 인자로 함수를 넣어 기능을 전달해주는 형태를 말한다.
Array Methods 또한 함수이기 때문에 각각의 Methods 기능들을 익히면서 콜백 함수에 대해서 알아보자.

1. forEach

forEach는 가장 기본적인 Loop 메소드로 for문과 비슷하다. 코드의 길이는 같아도 장점이 있는 표현 방식이다

// 배열의 홀수만 출력
// for문 
let arr = [3, 4, 5, 6, 7, 8];
for(let i = 0; i < arr.length; i++)	{ 
  if(arr[i] % 2 = 1)	{
    console.log(arr[i]);
  }
}
// 프로그램이 커지면 언제 사용한지 모르는 i 때문에 가독성이 떨어질 수 있다.
// 배열의 index에 접근성이 떨어진다.

// forEach()
let arr = [3, 4, 5, 6, 7, 8];
arr.forEach(function(n)	{
  if(n % 2 = 1)	{
    console.log(n);
  }
});

2. map

콜백 함수를 지나 반환된 값을 배열로 반환해주는 메소드로 배열의 요소를 일괄적으로 변경할 때 효율적이다.

let arr = ['a', 'bb', 'ccc', 'dddd'];
let arr2 = arr.map(function(string)	{
  return srting.length;
});
console.log(arr2); // [1, 2, 3, 4]

// arr은 문자열 arr2는 문자열의 길이
// map는 콜백함수의 리턴값들을 모아 새로운 배열을 만들어준다.

let arr = ['a', 'bb', 'ccc', 'dddd'];
let arr2 = [];
arr.forEach(function (string) {
    arr2.push(string.length);
});
console.log(arr2); // [1, 2, 3, 4]

/* forEach로 구현 가능하지만 상위 스코프에 있는 변수를 수정하기 때문에 
   주의가 필요하다. */
// 배열의 모든요소가 같은 조건으로 변경이 필요할땐 map이 효율적이다.

3. filter

메소드 이름처럼 배열의 요소를 걸러내는 기능을 한다.

// 정수 배열에서 5의 배수만 가져오기.

let arr = [1, 3, 5, 7, 9, 11, 13, 15];
let arr2 = arr.filter(function (n) {
    return n % 5 == 0;
});
console.log(arr2); // [5, 15]
// 콜백 함수의 반환값은 boolean으로 조건에 true인 요소만 새로운 배열에 추가된다.

let arr = [1, 3, 7, 9, 11, 13];
let arr2 = arr.filter(function (n) {
    return n % 5 == 0;
});
console.log(arr2); // []
// 조건에 맞는 요소가 없다면 undefined가 아닌 빈 배열을 반환한다.


// 5의 배수만 가져와서 각각의 요소를 2배로 반환
let arr = [1, 3, 5, 7, 9, 11, 13, 15];
let arr2 = arr.filter(function (n) {
    return n % 5 == 0;
}).map(function (n) {
    return n * 2;
});
console.log(arr2); // [10, 30]

/* 위처럼 메서드를 연결해서 사용하는 패턴을 메서드 체이닝이라 하는데 
filter 메서드의 빈 배열 반환 기능은 메서드 사용 중간에 에러를 내지않고 
반환 가능하게 해준다.*/


let arr = [1, 2, 3]; // 5의 배수가 없음.
let arr2 = arr.filter(function (n) {
    return n % 5 == 0;
}).map(function (n) { // filter로부터 빈 배열이 반환.
    return n * 2;
});
console.log(arr2); // [] map의 콜백 함수는 호출되지 않음.