FE가 되고싶니? 나도✨

sort 메소드

배열에서 sort라는 메소드를 활용하면 배열을 정렬할 수 있다.
sort 메소드에 아무런 아규먼트도 전달하지 않을 때는 기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬된다.

const letters = ['D', 'C', 'E', 'B', 'A'];
const numbers = [1, 10, 4, 21, 36000];

letters.sort();
numbers.sort();

console.log(letters); // (5) ["A", "B", "C", "D", "E"]
console.log(numbers); // (5) [1, 10, 21, 36000, 4]

그렇기 때문에 numbers에 sort 메소드를 사용한 것 처럼, 숫자를 정렬할 때는 우리가 상식적으로 이해하는 오름차순이나 내림차순 정렬이 되지 않는다. 그럴 땐 sort 메소드에 다음과 같은 콜백함수를 아규먼트로 작성해주면 되는데,

const numbers = [1, 10, 4, 21, 36000];

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]

sort 메소드를 사용할 때 한 가지 주의해야될 부분은 메소드를 실행하는 원본 배열의 요소들을 정렬한다는 점이다. 그래서 한 번 정렬하고 나면 정렬하기 전의 순서로 다시 되돌릴 수 없으니까, 원본 배열의 순서가 필요하다면 미리 다른 변수에 복사해두는 것이 좋다.

reverse 메소드

reverse 메소드는 말 그대로 배열의 순서를 뒤집어 주는 메소드이다. reverse 메소드는 별도의 파라미터가 존재하지 않기 때문에 단순히 메소드를 호출해주기만 하면 배열의 순서가 뒤집히는데 sort 메소드와 마찬가지로 원본 배열의 요소들을 뒤집어 버린다는 점은 꼭 주의해야한다.

const letters = ['a', 'c', 'b'];
const numbers = [421, 721, 353];

letters.reverse();
numbers.reverse();

console.log(letters); // (3) ["b", "c", "a"]
console.log(numbers); // (3) [353, 721, 421]

reduce 메소드

reduce 메소드는 누적값을 계산할 때 활용하는 조금 독특한 메소드인데 일반적으로 두 개의 파라미터를 활용한다.

첫 번째를 제외한 세 파라미터는 다른 메소드들의 콜백함수와 역할이 똑같다. 배열의 요소가 전달되고(el), 요소의 인덱스가 전달되고(i), 메소드를 호출한 배열이 전달(arr)된다. reduce 메소드에서 특별한 첫번째 파라미터는 Accumulator(누산기)라고 한다. (벌써 익숙하지 않은 느낌) 줄여서 acc라고도 작성하는데, 이 파라미터는 매번 콜백 함수가 반복해서 동작할 때 직전에 동작한 콜백 함수가 리턴한 값을 전달받는 파라미터이다. 그래서 reduce 메소드에 활용되는 콜백함수는 그 다음 콜백함수에 acc로 전달할 값을 리턴해주게 되는데, 매 반복 때마다 콜백 함수의 리턴값을 다음 콜백 함수의 acc로 전달해주면서 결국에는 마지막에 실행되는 콜백 함수의 리턴값이 reude 메소드의 최종 리턴값이 되는 것이다. 

그런데, 위 설명대로라면 제일 처음 실행되는 콜백함수는 acc에 전달받을 값이 없다. 그래서 첫번째 콜백 함수가 동작할 때 acc의 값을 reduce 메소드의 두번째 아규먼트로 전달해준다.

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

// reduce
const sumAll = numbers.reduce((accumulator, element, index, array) => {
  return accumulator + element; //nextAccValue(다음 누산기)
}, 0); //initialAccValue(초기값)

console.log(sumAll); // 10

조금 복잡하지만 여기까지가 reduce 메소드의 기본적 문법이다.

실제로 작성하는 코드를 작성해보자.

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

const sumAll = numbers.reduce((acc, el, i) => {
  console.log(`${i}번 index의 요소로 콜백함수가 동작중입니다.`);
  console.log('acc:', acc);
  console.log('el:', el);
  console.log('----------');
  
  return acc + el;
}, 0);

console.log('sumAll:', sumAll);

reduce 메소드의 동작 원리를 가장 간단하게 확인하는 방법은 각 배열의 값들을 합산해보는 것이다. 인덱스와 함께 앞에 있는 두 파라미터(acc, el)도 출력하면서 각 반복동작을 구분하기 위해 구분선(-----)도 출력해주고 있다. 그리고 마지막은 두 값을 합한 결과(acc+el)를 리턴하고 있다. 메소드를 실행할 때 초기값을 0으로 작성해놓았기 때문에 처음 0번 인덱스의 요소로 콜백 함수가 동작할 때는 acc의 값이 0이고 요소의 값은 1이 된다.

그리고 나서 콜백 함수가 이 두 값에 합(acc+el)을 리턴하기 때문에 0+1이 다음 콜백 함수에 acc로 전달되는 것이다. 이 과정이 계속 반복되면서 1+2가 다음 acc로 전달되고, 그 다음 3과 더해져서 결국 마지막 콜백함수가 실행될 때는 6+4가 리턴되면서 sumAll이라는 변수에 할당된 것이다.

+사실 reduce 메소드의 두번째 아규먼트(초기값)는 선택사항이다. 이 값을 작성해주면 가장 처음에 동작하는 콜백함수의 acc로 전달이 되지만 만약 생략을 하더라도 에러가 발생하지 않고 배열의 0번 인덱스에 있는 요소의 값이 첫번째 실행되는 콜백함수의 acc로 전달돼서 결과값도 동일하게 실행되긴 한다.

하지만 처음에 실행되는 콜백 함수가 0번 인덱스가 아니라 1번 인덱스로 시작됐다. 배열의 요소는 총 네 개인데 콜백함수는 총 세번만 동작한 것이다. 지금은 단순히 두 파라미터의 합을 리턴하기 때문에 최종적인 리턴값이 똑같이 나왔지만 만약 조금 더 복잡한 동작을 했다면 예상치 못한 결과가 나타났을 수도 있다. 그래서 reduce 메소드를 사용할 땐 가급적 초기값을 명시해 주는것이 더 안전하게 사용 할 수 있는 방법이다.

some 메소드

some 메소드는 배열 안에 콜백함수가 리턴하는 조건을 만족하는 요소가 1개 이상 있는지를 확인하는 메소드이다. 
배열을 반복하면서 모든 요소가 콜백함수가 리턴하는 조건을 만족하지 않는다면 false를 리턴하고, 배열을 반복하면서 콜백함수가 리턴하는 조건을 만족하는 요소가 등장한다면 바로 true를 리턴하고 반복을 종료한다.

const numbers = [1, 3, 5, 7, 9];

// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2, 3까지만 출력됨.
  return element > 5;
});

console.log(someReturn); 
//출력
0
1
2
3
true;

every 메소드

every 메소드는 배열 안에 콜백 함수가 리턴하는 조건을 만족하지 않는 요소가 1개 이상 있는지를 확인하는 메소드이다.
배열을 반복하면서 모든 요소가 콜백함수가 리턴하는 조건을 만족한다면 true를 리턴하고, 배열을 반복하면서 콜백함수가 리턴하는 조건을 만족하지 않는 요소가 등장한다면 바로 false를 리턴하고 반복을 종료한다.

const numbers = [1, 3, 5, 7, 9];

// every: 조건을 만족하지 않는 요소가 1개 이상 있는지
const everyReturn = numbers.every((element, index, array) => {
  console.log(index); // 콘솔에는 0까지만 출력됨.
  return element > 5;
});

console.log(everyReturn); 
//출력
0
false;

+ 메소드를 호출하는 배열이 빈 배열일 경우 콜백함수를 실행하지도 않고 바로 some은 false, every는 true를 리턴한다.