[Javascript] 테스트에서 사용한 배열(Array) 메소드 정리 (1) - join() reduce() sort() splice()

1. join()

join() 메소드는 배열의 모든 요소를 연결해 새로운 하나의 문자열을 반환하는 메소드다. (비파괴적)

사용 방식 : 
join(배열의 각 요소를 구분할 문자열)
생략할 경우 쉼표로 구분된다.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// Expected output: "Fire,Air,Water"

console.log(elements.join(""));
// Expected output: "FireAirWater"

console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"

 

2. reduce()

코딩테스트 풀기 전까지는 사실 몰랐던 메소드인데, 콜백 함수여서 map 함수만큼 굉장히 쓰임새가 많더라.

잘 기억해두고 많이 써먹어야겠다!!!

 

 reduce()는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

주로 사용되는 방식 :
reduce((누적 반환값, 처리할 현재 요소값) => 배열의 각 요소에 대해 실행할 함수, 초깃값)

Ex] reduce((acc, cur) => acc + cur, 0) ⬅ 배열의 모든 요소를 더하는 함수

 

다른 배열 콜백함수처럼 누적 반환값, 현재 요소값, 현재 인덱스, 호출한 배열 전부 인자로 가져올 수 있지만

보통 그러하듯이 값만 주로 쓰게 된다.

 

※ 주의할 점

현재 인덱스 : 초깃값을 제공한 경우 0, 그렇지 않으면 0을 건너뛰고 1부터 시작한다.

초깃값 :

callback의 최초 호출에서 첫 번째 인수에 제공하는 값.

초깃값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다.

빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생.

 

초깃값 자체는 생략해도 되지만, 빈 배열이 아닌 것이 확실할 경우에만 초깃값을 빼는 게 안전하다는 뜻이다.

그 말은 오류를 줄이려면 초깃값이 웬만하면 들어가야 한다는 뜻...처음부터 사용하는 걸 습관화하는 게 좋을 것 같다.

 

(3) sort()

sort() 메소드는 배열의 요소를 내장된 기준으로 정렬해준다.

새로운 배열을 반환하는 게 아니라 원 배열을 정렬해주는 것이므로 파괴적 처리 방식의 메소드.

사용 방식 :
sort(정렬 순서를 정의하는 함수)

 

따로 순서를 정의하지 않으면 각 요소를 문자열로 변환한 다음, 문자열 유니코드 코드 포인트를 따라 정렬시킨다.

아래는 MDN 공식 문서의 예시

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]

 

문자열은 그냥 sort()로 쉽게 처리할 수 있지만,

숫자는 함수를 매개변수로 넣어줘야 일반적으로 사용되는 크기 순 등의 배열을 만들 수 있다.

여기서 매개변수에 들어가는 함수를 '비교 함수'라고 칭하는데,

각 배열의 요소는 비교 함수를 거쳐 함수의 반환값에 따라 정렬이 된다.

• compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저 옵니다.
• compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다. 즉, b가 먼저 옵니다.
• (기타의 경우는 공식 문서를 참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

아래 예시를 보면 쉽게 알 수 있다.

(1) 오름차순 정렬
var numbers11 = [4, 2, 5, 1, 3];
numbers11.sort(function(a, b) {  // 익명 함수 작성법
    return a - b;
});
console.log(numbers11);
// [1, 2, 3, 4, 5]

⬆연산 예시)
4 - 2는 0보다 크니까 2가 4보다 낮은 인덱스로 배치.
2 - 5는 0보다 작으니까 2가 5보다 낮은 인덱스로 배치.

(2) 내림차순 정렬
var numbers22 = [4, 2, 5, 1, 3];
numbers22.sort(a, b) => b - a);  // 화살표 함수 작성법
console.log(numbers22);
// [5, 4, 3, 2, 1]

⬆연산 예시)
2 - 4는 0보다 작으니까 4가 2보다 낮은 인덱스로 배치.
5 - 2는 0보다 크니까 5가 2보다 낮은 인덱스로 배치.

 

(4) splice()

splice()는 배열의 요소를 삭제 또는 교체할 수 있고, 새로운 요소를 추가할 수도 있는 메소드다.

사용 방식 : 
splice(변경을 시작할 인덱스)
splice(변경을 시작할 인덱스, 제거할 요소의 갯수)
splice(변경을 시작할 인덱스, 제거할 요소의 갯수, 추가할 요소)

 

선택적인 매개변수도 많고, 매개변수 중에 인덱스도 있다 보니

사용할 수 있는 방식이 여러 가지여서 조금 복잡하게 느껴지는 메소드다.

 

1. 첫 번째 매개변수 - 변경을 시작할 인덱스 (시작점)

매개변수에 배열의 길이보다 큰 값을 넣을 경우, 배열의 길이로 설정된다.

배열의 제일 뒤에서 시작한다는 소리다.

매개변수로 음수를 넣을 경우에는 배열의 끝에서부터 순서를 세어나가는데, 만약 음수의 절대값이 배열의 길이보다 크다면 0으로 설정하여 맨 앞에서 시작하게 된다.

 

2. 두 번째 매개변수 - 제거할 요소의 갯수

이 매개변수를 생략하면 시작점에서부터 모든 요소를 제거한다.

매개변수가 배열의 길이 - 시작점보다 커도 시작점에서부터 모든 요소를 제거한다.

매개변수가 0 이하일 경우 아무것도 제거하지 않으며, 이때는 무조건 3번째 매개변수를 입력해야 한다.

 

3. 세 번째 매개변수 - 추가할 요소

그냥 넣고 싶은 만큼 콤마(,)를 붙여서 나열하면 된다.

이 매개변수를 생략할 경우 교체하거나 추가하지 않고 요소를 제거하기만 한다.

 

4. 반환값

의외인 점은 splice()가 제거한 요소의 배열을 반환한다는 것이다.

제거/교체/추가한 결과값을 보고 싶으면 기존 배열을 리턴해야 한다.

(당연한 이야기지만 그러므로 splice()는 파괴적 메소드에 속한다.)

 

그래서 제거 기능만 필요할 경우에는 slice() 메소드를 쓰는 쪽이 더 나을 수도 있다.

slice()는 비파괴적 메소드니까 더 안전한 것도 있고.

 

리턴값에 대해서는 아래에 예시를 보면 금방 이해할 수 있다. 

const months = ["Jan", "Feb", "March", "April", "June"];
const sample = months.splice(4, 1, "May", "July");  // 인덱스 4번을 1개 제거하고 두 요소로 교체

console.log(months);
console.log(sample);
// Expected output: Array ["Jan", "Feb", "March", "April", "May", "July"]
// Expected output: Array ["June"]

 

더 많은 예시는 공식 문서에 있으니 참고하면 좋다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN