[ 모던 자바스크립트 스터디 ] 배열 평탄화 + 배열 고차 함수

배열 평탄화

 

ES10 에서 도입된 flat 메서드는 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다.

 

[1, [2, 3, 4, 5]].flat(); // [1, 2, 3, 4, 5]

[1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4, 5]

 

인수로 평탄화할 깊이를 전달할 수 있는데, Infinity 를 넘기면 중첩 배열 모두를 평탄화 한다.

실제로 쓰일 일이 종종 있었던 것 같아 기록해 놓는다.

 

 

---

 

고차 함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.

고차 함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다.

 

특히 배열은 유용한 고차 함수를 제공한다.

 

Array.prototype.sort

 

sort 메서드는 배열의 요소를 정렬한다. (기본적으로 오름차순)

원본 배열을 직접 변경하며 정렬된 배열을 반환한다.

 

const fruits = ['Banana', 'Orange', 'Apple'];

fruits.sort();

console.log(fruits); // ['Apple', 'Banana', 'Orange']

 

내림차순으로 요소를 정렬하려면 reverse 메서드를 사용해 요소의 순서를 뒤집으면 된다.

sort 메서드의 기본 정렬 순서는 유니코드 포인트의 순서를 따른다.

따라서 숫자 요소를 정렬할 때는 sort 메서드에 정렬 순서를 정의하는 비교 함수를 인수로 전달해야한다.

 

비교 함수는 양수나 음수 또는 0을 반환해야한다.

비교 함수의 반환값이 0보다 작으면 비교 함수의 첫 번째 인수를 우선하여 정렬하고, 0이면 정렬하지 않으며,

0보다 크면 두 번재 인수를 우선해 정렬한다.

 

 

const points = [40, 100, 1, 5, 2, 25, 10];

points.sort((a, b) => a - b);
console.log(points); // [1, 2, 5, 10, 25, 40, 100]

 

 

아래는 객체를 요소로 갖는 배열을 정렬하는 예제이다.

 

const todos = [
	{ id: 4, content: 'JavaScript' } ,
    { id: 1, content: 'HTML' } ,
    { id: 2, content: 'CSS' }
];

function compare(key) {
	return (a, b) => (a[key] > b[key] ? 1: (a[key] < b[key] ? -1 : 0));
}

todos.sort(compare('id'));
console.log(todos);

todos.sort(compare('content'));
console.log(todos);

 

 

 

 

 

 

Array.prototype.forEach

 

for문을 대체할 수 있는 고차함수다.

forEach 메서드는 반복문을 추상화한 고차함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서

수행해야할 처리를 콜백함수로 전달받아 반복 호출한다.

 

 

const numbers = [1, 2, 3];
const pows = [];

numbers.forEach(item => pows.push(item ** 2));
console.log(pows); // [1, 4, 9]

 

forEach 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.

numbers 배열 요소가 3개니 총 3번 호출 할 것 이다.

 

이때 콜백 함수를 호출하는 forEach 메서드는 콜백함수에 인수를 전달할 수 있다.

 

forEach 메서드의 콜백 함수는 forEach 메서드를 호출한 배열의 요소값과 인덱스, forEach 메서드를 호출한 배열 자체(this)를 순차적으로 전달 받을 수 있다.

 

 

[1, 2, 3].forEach((item, index, arr) => {
	console.log(`요소값 : ${item}, 인덱스 : ${index}, this: ${JSON.stringify(arr)}`);
});

/*
요소값: 1, 인덱스: 0, this: [1, 2, 3]
요소값: 2, 인덱스: 1, this: [1, 2, 3]
요소값: 3, 인덱스: 2, this: [1, 2, 3]
*/

 

forEach 메서드는 원본배열을 변경하지는 않으나, 콜백 함수를 통해 변경할 수 있다.

forEach 메서드의 반환값은 언제나 undefined 이다.

 

forEach 메서드의 두번째 인수로 forEach 메서드의 콜백 함수 내부에서 this로 사용할 객체를 전달할 수 있다.

 

class Numbers {
	numberArray = [];
    
    multiply(arr) {
    	arr.forEach(function (item) {
        	this.numberArray.push(item * item);
        });
    }
}

const numbers = new Numbers();
numbers.multiply([1, 2, 3]);

 

위 코드는 TypeError 를 출력한다.

forEach 메서드의 콜백함수는 일반 함수로 호출되므로 콜백 함수의 내부 this는 undefined를 가리킨다. (엄격 모드 적용되었기 때문에)

 

위와 같은 문제를 해결하기 위해서는 두가지 방법을 사용할 수 있다.

 

1. forEach 메서드의 두 번째 인수로 multiply 메서드 내부의 this 를 전달하기

2. 화살표 함수 사용하기

 

첫번째 방법은 아래와 같이 작성한다.

 

class Numbers {
	numberArray = [];
    
    multiply(arr) {
    	arr.forEach(function (item) {
        	this.numberArray.push(item * item);
        }, this);
    }
}

const numbers = new Numbers();
numbers.multiply([1, 2, 3]);

 

화살표 함수를 사용하면 더 깔끔하다.

 

class Numbers {
	numberArray = [];
    
    multiply(arr) {
    	arr.forEach(item => this.numberArray.push(item * item));
    }
}

const numbers = new Numbers();
numbers.multiply([1, 2, 3]);

 

희소 배열의 경우 존재하지 않는 요소는 순회 대상에서 제외된다.

forEach 메서드는 for 문에 비해 성능이 좋지는 않지만 가독성이 더 좋다.

따라서 요소가 상당히 많거나 시간이 많이 걸리는 복잡한 코드 또는 높은 성능이 필요한 경우가 아니라면

forEach 메서드를 사용할 것을 책에서는 권장하고 있다.

 

Array.prototype.map

map 메서드는 자신을 호출한 배열의 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다.

그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. (원본 배열 변경 x)

 

const numbers = [1, 4, 9];

const roots = numbers.map(item => Math.sqrt(item));

console.log(roots); // [1, 2, 3]
console.log(numbers); // [1, 4, 9]

 

map 메서드가 생성하여 반환하는 새로운 배열의 length 프로퍼티 값은

map 메서드를 호출한 배열의 length 프로퍼티 값과 반드시 일치한다.

 

forEach 와 전달받을 수 있는 인수들이 같다.

 

Array.prototype.filter

 

filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복호출한다.

그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.

 

const numbers = [1, 2, 3, 4, 5];

const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]

 

filter 메서드를 사용해 특정 요소를 제거할 경우 특정 요소가 중복되어 있다면 중복된 요소가 모두 제거된다.