배열 내장함수-2

안녕하세요 🤗

이번 시간에도 유용하게 사용되는 여러가지 자바스크립트의 배열 내장함수들에 이어서 배워보도록하겠습니다.

concat

이번에는 두개의 배열을 이어 붙일 수 있는 concat이라는 메서드에 대해 알아보겠습니다.

array1 이라는 배열에는 green과 blue의 값을, array2 배열에는 purple과 yellow의 값을 담아보겠습니다.

let array1 = ["green", "blue"];
let array2 = ["purple", "yellow"];

console.log(array1.concat(array2));

그 다음, concat 메서드를 통해 array1 배열에 array2 배열을 붙여보겠습니다.

코드를 실행하면, 이 array1과 array2 배열이 하나의 새로운 배열로 합쳐진 것을 볼 수 있습니다.

이렇게 concat 메서드를 사용하면 두 개의 배열을 하나로 합쳐 새로운 배열로 반환할 수 있습니다.

join

이번에는 배열을 하나로 합치는 또 다른 join이라는 내장함수에 대해 배워보겠습니다.

concat과 다른점은, join 메서드는 하나의 배열에서 배열 요소들의 값들을 문자열로 이어주는 메서드라는 것입니다.

colors 라는 배열에 green, blue, purple 값을 넣어주고 join 메서드를 사용해보겠습니다.

let colors = ["green", "blue", "purple"];

console.log(colors.join());
console.log(colors.join(" "));

이 join 메서드 내부에 들어가는 매개변수는 구분자로, 요소들을 합칠 때 사이에 어떤 문자를 넣을 것인지 결정할 수 있습니다.

join 메서드에 아무런 매개변수를 넣어주지 않으면 쉼표가 기본적으로 구분자로 출력되게 됩니다.

sort

이번에는 이 colors 배열을 정렬해보도록하겠습니다.

배열을 정렬할 때 사용하는 내장함수는 sort라는 내장함수입니다.

let colors = ["green", "blue", "purple"];
colors.sort();

console.log(colors);

colors 배열에 sort 내장함수를 사용해보겠습니다.

sort 를 사용한 다음 colors 배열을 출력해보면, colors 배열의 요소들이 알파벳 순으로 정렬된 것을 확인할 수 있습니다.

sort 메서드를 사용하게 되면, 기본적으로 이렇게 오름차순 방식으로 배열이 정렬이 됩니다.

그렇다면, colors 배열을 오름차순이 아닌 내림차순으로 정렬하려면 어떻게 해야할까요?

sort 메서드에는 매개변수로 함수를 전달할 수 있습니다.

원하는 비교함수를 직접 제작한 다음, sort 메서드에 전달해보겠습니다.

compare 라는 이름의 함수를 작성해봅시다.

const compare = (a, b) => {
    if (a > b) return -1;
    else if (a < b) return 1;
    else return 0;
};

let colors = ["green", "blue", "purple"];
colors.sort(compare);

console.log(colors);

compare 함수는 a와 b, 2개의 매개변수를 전달받도록 해줍니다.

여기서 a는 배열의 다음 요소를, b는 배열의 이전 요소를 의미하고, a가 b보다 클 때, b가 a보다 클 때, 그리고 그외 이렇게 3가지 조건으로 나눠서 작성해보겠습니다.

여기서 조건문의 반환 값으로는 0보다 큰 값, 0, 0보다 작은 값을 사용할 수 있습니다.

우리는 1, 0, -1 로 구분해주도록 하겠습니다.

이 반환 값들이 뜻하는 것은, 반환 값이 -1 이라면 다음 요소의 값인 a가 이전 요소의 값인 b 보다 앞에 있어야 하고, 1이라면 b가 a 보다 앞에 있어야하며 반환값이 0이라면, a와 b의 순서를 바꾸지 않는다 라는 의미입니다.

우리는 배열 요소를 내림차순으로 정렬해야하므로, 이전 값이 다음 값보다 커야하기 때문에 다음 요소인 a의 값이, 이전 요소인 b의 값 보다 크다면 -1을 반환해 a가 b보다 앞에 있어야한다고 알려주도록 하겠습니다.

따라서 마찬가지로 a가 b 보다 작다 라는 조건식에는 1을 반환해주고, 그 외의 경우에는 0을 반환해주도록 하겠습니다.

이렇게 작성한 compare 이라는 함수를 sort 메서드에 매개변수로 전달하면, 출력 결과 colors 배열이 내림차순으로 정렬된 것을 확인할 수 있습니다.

이번에는 문자가 아닌 숫자가 담긴 배열을 정렬해보겠습니다.

numbers라는 배열을 생성하고, 1, 100, 25, 50, 120, 3 이라는 값을 넣어주겠습니다.

let numbers = [1, 100, 25, 50, 120, 3];
numbers.sort();

console.log(numbers); // [1, 100, 120, 25, 3, 50]

numbers 배열을 sort 메서드를 이용해 정렬을 하면, 숫자의 크기 순서가 아닌 사전순으로 정렬이 되는 것을 볼 수 있습니다.

그렇다면, 이번에는 사전순이 아닌, 숫자의 크기를 비교하는 함수를 직접 만들어서 sort메서드에 전달해보도록 하겠습니다.

const compare = (a, b) => {
    //오름차순
    return a - b;
};

let numbers = [1, 100, 25, 50, 120, 3];

numbers.sort(compare);
console.log(numbers); // [1, 3, 25, 50, 100, 120]

앞에서 배웠던 것처럼 이 compare 함수는 0보다 작은 값이 반환되면, 이전 요소와 다음 요소의 위치를 바꾸기 때문에,

다음 요소에서 이전 요소를 뺀 값이 0보다 커야하므로 다음 요소인 a 에서 이전 요소인 b를 뺀 값이 음수라면, 순서를 바꾸도록 a-b 의 값을 반환해주겠습니다.

실행 결과, 배열 요소의 크기 순으로 잘 정렬이 된 것을 확인할 수 있습니다.

이번에도 마찬가지로, 반대로 내림차순으로, 숫자의 크기가 큰 순서부터 정렬되도록 compare 함수를 변경해보겠습니다.

const compare = (a, b) => {
    //내림차순
    return b - a;
};

let numbers = [1, 100, 25, 50, 120, 3];

numbers.sort(compare);
console.log(numbers); // [120, 100, 50, 25, 3, 1]

이번에는 이전 요소의 값이 다음 요소의 값보다 크게 정렬해야하기 때문에, 이전 요소인 b 에서 다음 요소인 a 를 뺀 값이 음수일 경우 두 값의 위치를 서로 바꿔주어야 하므로 b에서 a를 뺀 값을 반환해주겠습니다.

코드를 실행하면, numbers 배열의 요소들이 내림차순으로 잘 정렬이 된 것을 확인할 수 있습니다.

sort 메서드는 배열 요소를 원하는 순서대로 정렬할 때 사용되는 내장함수로, sort 메서드를 사용할 때에는, sort 메서드를 한 번 사용하면, 이후에 해당 배열 요소의 순서는 정렬된 그대로 변경되어있다는 것을 주의해서 사용해야합니다.

reduce

이렇게 배열의 요소들을 정렬하는 sort 내장함수에 대해 알아보았습니다.

이번에는 reduce라는 내장함수에 대해 알아보도록 하겠습니다.

reduce 에 대해 배워보기 전에, 우리가 제일 처음으로 배운 forEach라는 내장함수를 사용해 numbers 배열의 요소들의 합을 구해보겠습니다.

let numbers = [1, 100, 25, 50];
let sum = 0;

numbers.forEach((elm) => {
    sum += elm;
});

console.log(sum); //176

numbers 배열에 값을 4개만 남겨두고, numbers 배열에 내장함수 forEach를 사용해보겠습니다.

배열 요소들의 합을 구해야하므로 elm 라는 매개변수를 1개만 작성하고, elm 더해주도록 하겠습니다.

그리고 더한 값을 저장하기 위해 sum 이라는 변수를 numbers 배열의 아래쪽에 작성하고 값을 0으로 초기화해주겠습니다.

복합대입 연산자를 사용해 sum 변수에 elm, 이 배열 요소들을 하나씩 계속 더해줍니다.

이후 sum 변수를 출력하면 numbers 배열 요소들을 모두 더한 값인 176이 출력되는 것을 볼 수 있습니다.

우리가 배우려고 하는 이 reduce라는 메서드는 우리가 작성한 이 코드 처럼, 배열의 각 요소에 대해 함수를 실행하고 누적된 값을 출력할 때 유용하게 사용되는 내장함수입니다.

reduce 메서드는 콜백함수와 initialValue라는 초기값을 전달하고, 이 콜백함수의 매개변수로는 accumulator, currentValue, currentIndex 가 있습니다.

reduce는 어떻게 작성해야하며 이 매개변수들은 어떤 역할을 하는 건지 직접 reduce를 사용해 살펴보겠습니다.

이 배열의 모든 요소들의 합을 구하는 코드를 reduce를 이용해 작성해보겠습니다.

sum 이라는 변수에 바로 reduce 메서드의 반환값을 저장해주겠습니다.

reduce에는 이렇게 콜백함수와 초기값(initialValue)이 들어가고, 콜백함수의 매개변수로는 acc, cur, idx 이렇게 3가지를 전달받을 수 있습니다.

이 accumulator(acc)는 콜백함수의 반환값을 누적하는 매개변수이고, cur이라는 매개변수는 우리가 계속 사용했었던 currentValue 즉, 처리할 현재 요소의 값을 나타냅니다.

마지막으로 매개변수 currentIndex(idx)는 처리할 현재 배열 요소의 인덱스를 나타냅니다.

let numbers = [1, 100, 25, 50];

let sum = numbers.reduce((acc, cur, idx) => {
    console.log(acc, cur, idx);
    return acc + cur;
}, 0);

console.log(sum);//176

console.log를 통해 매개변수 acc, cur, idx의 값이 어떻게 출력되는지 확인하고, sum 변수에는 누적된 값과 현재 처리할 요소를 더한 값을 반환해주도록 하겠습니다.

코드를 실행하면 0 1 0, 1 100 1, 101 25 2, 126 50 3이 출력되고, sum 변수는 176 이라는 값이 출력되는 것을 볼 수 있습니다.

맨 처음 acc의 값은 initialValue 인 0의 값이 적용되고, 이후 numbers 배열의 0번째 요소인 1이 출력됩니다.

그 다음, 이 0이라는 acc 값에 cur 값이 더해져 1이 다음 acc의 값으로 출력됩니다.

동일하게 numbers 배열의 1번째 요소인 100이 출력되고, acc의 값에 100을 더한 값인 101이 다음 acc의 값으로 출력되게 됩니다.

이 과정을 반복해서 최종적으로는 acc의 값에 176이라는 값이 누적되어 sum 변수를 출력하면 176 이라는 값이 나오게 됩니다.

여기서 initialValue 초기값은 acc 매개변수가 맨 처음에 갖고있게 될 초기값으로, 이 초기값을 10으로 변경한 다음 sum 변수를 출력해보겠습니다.

let numbers = [1, 100, 25, 50];

let sum = numbers.reduce((acc, cur, idx) => {
    console.log(acc, cur, idx);
    return acc + cur;
}, 10);

console.log(sum);//186

initialValue 값이 0일 때와 비교를 해보면, 맨 처음의 acc 값이 10으로 변경이 되어 최종적으로 sum 변수의 값이 10차이가 나는 것을 볼 수 있습니다.

이렇게 reduce 메서드는 배열의 모든 요소들에 대해 확인하고 누적된 값을 출력하고 싶을 때 유용하게 사용할 수 있고, 코드를 훨씬 깔끔하게 만들어주는 유용한 내장함수입니다.

isArray

이번 강의에서 마지막으로 배울 배열 내장함수는 isArray 라는 내장함수입니다.

isArray 메서드도 유용하게 사용되는 메서드로, 전달된 매개변수가 배열인지 아닌지를 판별하는 내장함수입니다.

isArray 메서드에 여러가지의 매개변수들을 전달해보고 그 결과를 출력해보도록 하겠습니다.

Array.isArray([1, 100, 50, 3]); // true
Array.isArray({ id: 3, color: "purple" }); // false
Array.isArray("string"); // false
Array.isArray(undefined); // false

이렇게 isArray 메서드는 괄호 안의 매개변수가 배열이면 true를 반환하고, 아니라면 false를 반환합니다.

자바스크립트를 사용해 프로그램을 작성하다보면, 특정 변수가 담고있는 값이 배열인지 객체인지, 혹은 특정 숫자인지 헷갈릴 경우가 종종 발생할 수 있습니다.

이럴 경우 이 isArray 메서드를 사용해 특정 변수가 담고있는 값이 배열인지 아닌지 쉽게 확인할 수 있습니다.

이렇게 배열의 여러가지 내장함수들에 대해 배워보았습니다.

이번 시간에는 자주 사용되는 내장함수들을 위주로 몇 가지만 살펴보았는데요, 자바스크립트의 배열 내장함수에는 매우 많은 내장함수들이 있습니다.

추가로 어떠한 내장함수들이 있는지 확인하고 싶으신 분들은 mozila 재단의 공식 사이트 를 통해 하나씩 살펴보시는 것을 추천드립니다.

다음시간에는 배열과 객체의 요소와 프로퍼티 값들을 쉽고 간편하게 추출할 수 있는 방법인 구조분해에 대해 배워보도록 하겠습니다.

감사합니다.