📙ES6 문법공부
📌배열 메서드
✨arr.sort()
배열을 재정렬한다. 이때, 배열의 요소를 문자열로 변환하고 사전순으로 정렬한다. 다시말해, 문자열의 유니코드 값을 비교하여 오른차순으로 정렬한다. 그리고, arr.sort() 메서드를 사용하면 배열 자체가 변경되니 주의하자.
let arr = [1, 5, 4, 2, 3];
let arr2 = ['a','c','d','e','b'];
let arr3 = [27, 8, 5, 13];
arr.sort();
arr2.sort();
arr3.sort();
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr2); // ['a', 'b', 'c', 'd', 'e']
console.log(arr3); // [13, 27, 5, 8]✏️숫자를 올바르게 정렬 하려면?
값을 비교해줄 수 있는 함수를 인수로 받는다. 다시말해, 정렬 로직은 담은 함수를 인수로 받는다.
let arr = [27, 8, 5, 13];
arr.sort((a, b) => {
return a - b;
});
console.log(arr); // [5, 8, 13, 27]| 비교함수 반환값 | 동작 |
|---|---|
| 양수 | b가 앞, a가 뒤. |
| 0 | a와 b의 순서 유지. |
| 음수 | b가 뒤, a가 앞. |
arr.sort() 배열 메서드는 최적화된 정렬 알고리즘(Quick Sort, Heap Sort, Tim Sort)을 사용한다. 이때, 정렬 알고리즘이 배열에서 임의로 두 개의 요소를 선택하여 콜백함수의 인수로 넘겨주며 콜백함수를 호출한다. 이때, 콜백함수에서 반환해주는 값을 토대로 배열을 정렬한다. arr.sort() 배열 메서드는 최적화된 정렬 알고리즘을 사용하기 때문에, 불필요한 중복 비교는 최대한 피한다. 다시 말해, 이미 비교한 요소들간의 관계를 기억하고 재활용한다.
✏️내림차순 정렬로 한다면?
let arr = [27, 8, 5, 13];
arr.sort((a,b) => return b - a);arr.sort() 메서드는 비교 함수(콜백 함수)의 반환값을 기준으로 배열의 순서를 결정한다. 비교 함수의 반환값이 양수인지, 음수인지, 0인지가 중요하다.
✏️비교 함수 정리
- 비교 함수는 단순히 두 요소를 비교하여 정렬 기준을 제공한다.
arr.sort()함수 자체는 한 번만 호출되며, 내부 정렬 알고리즘이 필요로 하는 만큼 콜백함수를 호출한다.- 비교함수의 반환값은
arr.sort()메서드의 정렬 알고리즘에만 사용된다.
✨Lodash 라이브러리
Lodash 라이브러리를 사용하면, 비교함수의 로직을 생각 안해도 되고, 숫자든 객체든 문자든 원하는 기준으로 정렬해준다.
💡_.sortBy(arr) 메서드
_.sortBy(arr);_.sortBy() 메서드는 첫 번째 인수로는 정렬하려는 배열이나 객체를 받는다. 두 번째 인수로는 정렬 기준을 받는다. 이때, 두 번째 인수로는 속성키 이름, 함수, 또는 이둘의 배열로 지정이 가능하다. 따라서, 지정한 정렬 기준에 맞춰 오름차순으로 정렬한다. 그리고, 정렬 기준을 여러가지로 적용할 수 있으며, 배열에 나열한 요소 순서대로 정렬 기준의 우선순위를 가진다. 정렬 기준으로 함수를 넘겨준다고 해도, 함수 안에는 정렬 로직을 정의하는 것이 아니라, 정렬 기준으로 택할 속성 키 이름을 반환한다.
_.sortBy(collection, [iteratees=[_.identity]])_.sortBy() 메서드는 오름차순 정렬만 지원하기에 내림차순이 필요하다면 다른 방법(_.orderBy)를 사용하거나 결과를 뒤집어야 한다. 숫자 배열을 _.sortBy()로 오름차순 정렬을 할 때, 두 번째 인수를 생략해도 기본적으로 오름차순으로 정렬된다.
💡썼을 때 장점
코드가 짧아지고, 가독성, 안정성, 유연성이 좋아진다. 실제 실무에서 많이 쓰인다.
✨arr.reduce()
배열의 각 요소에 대해 콜백함수를 호출하고, 하나의 새로운 결과값을 반환해주는 메서드다.
배열의 모든 수를 합치는 방법으로는 for, for...of, arr.forEach() 메서드 뿐만 아니라 arr.redue() 메서드로도 가능하다.
📝 생성된 배열 객체가 사용할 수 있는 메서드 = 배열 인스턴스 메서드
let arr = [1,2,3,4,5];
const result = arr.reduce((prev, cur) => {
return prev + cur;
}, 0);
console.log(result); // 25arr.reduce() 메서드의 첫 번째 인수인 콜백 함수의 인자로 누산값인 prev와 현재값인 cur가 있다. arr.reduce() 메서드의 두 번째 인수는 prev 초기값을 나타낸다. 두 번째 인수를 적어주지 않으면 배열의 첫 번째 요소가 prev의 초기값으로 된다. 그리고, 배열의 두 번째 요소부터 cur에 할당되면서 순차적으로 계산된다.
let userList = [
{ name: "seongmin", age: 24 },
{ name: "lucy", age: 5 },
{ name: "may", age: 40 },
];
let result = userList.reduce((prev, cur) => {
if (cur.age > 19) { // (cur.name.lenghth > 5) 등으로도 사용 가능하다.
return prev.push(cur.name);
}
return prev;
}, []);
console.log(result); // ["seongmin", "may"]arr.reduce() 메서드는 prev 값과 cur 현재값을 콜백함수의 인수로 넘겨주면서 콜백함수를 호출한다. 콜백함수가 실행된 후 반환받은 누산값인 prev 값을 다음에 콜백함수를 호출할 때 콜백함수의 인수로 넘겨준다. 이런식으로 계속 반복되며 마지막 콜백함수가 호출 되고 반환한 prev 값은 arr.reduce() 메서드가 최종적으로 반환하는 값이 된다.
📝 arr.reduce() 메서드가 최종적으로 반환하는 하나의 결과값은 arr.reduce() 메서드 내에서 마지막에 호출한 콜백 함수가 반환한 값이다.
✨arr.reduceRight()
arr.reduce() 메서드와 기능은 동일한다. 다만, 배열 우측부터 연산을 수행한다는 점이 다르다. 다시말해, 우측에 있는 요소부터 cur(현재값)으로 받아서 사용한다.
✨상황에 맞는 메서드 사용
arr.filter(), arr.map(), arr.forEach(), arr.reduce()... 여러가지 배열 인스턴스 메서드 중에서 어떤 배열 메서드를 사용할지는 각 상황에 맞게 판단해서 사용하자.
