Ep16. JS 배열 내장함수

hyobin·2022년 7월 17일

JavaScript frontend web 내장함수 배열 배열메서드

자바스크립트 기초

목록 보기

16/16

안녕하세요 🤗

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

배열 내장함수

배열은 굉장히 많은 내장함수(메서드)를 가지고 있습니다.

내장함수들을 잘 다룰 수 있게되면, 유연하고 깔끔한 프로그래밍이 가능합니다.

자바스크립트 배열의 내장함수들 중, 자주 사용되는 내장함수들을 설명해드리곘습니다.

forEach

지난시간, 우리는 배열의 모든 요소들에 접근하기 위해 for문을 사용해 아래와 같이 코드를 작성했었습니다.

let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

forEach는 우리가 배웠던 for문을 대체시킬 수 있습니다.

let arr = [1, 2, 3, 4, 5];

arr.forEach((elm) => {
    console.log(elm);
});

forEach 함수의 파라미터 elm 은 arr 배열의 각 원소를 가리킵니다.

forEach 메서드에는 인자로 함수를 전달 할 수 있는데, 함수를 파라미터로 전달하는 개념을 콜백 함수라고 설명했었습니다.

forEach는 전달받은 콜백함수를 배열의 요소 각각에 대해 모두 실행합니다.

이렇게 forEach를 사용하면 손쉽게 배열의 모든 요소들에 접근할 수 있습니다.

map

배열 메서드 map 을 설명하기 위해 arr 라는 배열의 모든 요소에 10을 곱해서 새로운 배열을 만드는 코드를 작성해보겠습니다.

let arr = [1, 2, 3, 4, 5];
let newArr = [];

for (let i = 0; i < arr.length; i++) {
    newArr.push(arr[i] * 10);
}
console.log(newArr);

위의 코드에서는 newArr 이라는 새로운 배열을 선언하고, for문을 통해 arr 배열의 모든 요소에 10을 곱한 값을 push 메서드를 사용해 newArr 배열에 넣었습니다.

map 을 이용하면, 같은 프로그램을 훨씬 짧은 코드로 구현할 수 있습니다.

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((elm) => {
    return elm * 10;
});
console.log(newArr);

map 메서드는 배열 안의 모든 원소를 변환할 때 사용되며,주어진 콜백함수를 호출한 결과를 모아서 새로운 배열로 반환합니다.

위의 코드처럼 map메서드도 forEach메서드처럼 콜백함수를 전달받습니다.

map의 콜백함수에는 return을 통해 무언가를 반환할 수 있고, 이 반환값들을 모아서 새로운 배열을 만듭니다.

map 메서드는 이렇게 배열의 모든요소에 연산을 적용하고, 그 결과를 새로운 배열로 돌려받을 수 있습니다.

includes

이번에는 배열을 순회할 때 사용하는 내장함수가 아니라, 배열에서 특정 요소를 찾는 함수를 살펴보도록 하겠습니다.

includes 메서드는 인자로 받은 요소를 배열이 포함하고 있는지 판별하여 boolean 값으로 반환합니다.

let arr = ["apple", "melon", "banana", "orange"];
console.log(arr.includes("apple")); // true
console.log(arr.includes("grape")); // false

이 includes 메서드는 이렇게 배열의 요소중 특정값이 존재하는지 쉽게 찾을 수 있습니다.

indexOf

indexOf 메서드는 원하는 요소가 몇 번째에 위치하는 요소인지를 찾아주는 함수입니다.

let arr = ["apple", "melon", "banana", "orange"];

위와 같은 arr배열에서, banana 가 몇 번째에 위치하는 요소인지 찾기 위해서는 다음과 같이 코드를 작성합니다.

let idx = arr.indexOf("banana");
console.log(idx); // 2

배열 요소의 순서는 0부터 시작하기 때문에, 출력 결과 2 가 출력이 되는 것을 볼 수 있습니다.

findIndex

indexOf는 특정 요소가 배열의 몇 번째 index 인지를 찾아주는 함수지만, indexOf 메서드는 객체나 배열 요소의 인덱스를 찾아주지는 못합니다.

아래와 같이 모든 요소들이 객체로 이루어진 배열이 있습니다.

let arr = [
    { id: 1, color: "green" },
    { id: 2, color: "blue" },
    { id: 3, color: "purple" },
    { id: 4, color: "yellow" },
];

여기서 만약 color 가 purple 인 객체가 몇 번째인지 찾기 위해서는 indexOf 가 아닌, findeIndex 함수를 사용해야합니다.

let arr = [
    { id: 1, color: "green" },
    { id: 2, color: "blue" },
    { id: 3, color: "purple" },
    { id: 4, color: "yellow" },
];

let idx = arr.findIndex((elm) => elm.color === "purple");

console.log(idx); // 2

findIndex는 배열의 모든 요소에 대해 순차적으로 콜백함수를 수행하며, 조건을 가장 먼저 만족하는 배열의 요소의 인덱스를 반환합니다.

find

find 함수는 findIndex 와 비슷하지만, 찾아낸 값의 인덱스를 반환하는 것이 아니라, 찾아낸 값 그 자체를 반환하는 함수입니다.

let arr = [
    { id: 1, color: "green" },
    { id: 2, color: "blue" },
    { id: 3, color: "purple" },
    { id: 4, color: "yellow" },
];

let idx = arr.find((elm) => elm.color === "purple");

console.log(idx); // { id: 3, color: "purple" }

위의 코드에서 find를 이용하게되면 color 가 purple인 요소 자체가 반환되어 { id: 3, color: "purple" } 이 출력됩니다.

filter

이번에는 특정 배열에서 원하는 요소들을 추출할 수 있는 메서드들을 살펴보겠습니다.

filter 함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 생성합니다.

let arr = [
    { id: 1, color: "green" },
    { id: 2, color: "blue" },
    { id: 3, color: "purple" },
    { id: 4, color: "yellow" },
];

let filterArr = arr.filter((elm) => elm.id >= 3);
console.log(filterArr);

filter 메서드에는 특정 조건을 검사하는 함수를 넣어줍니다.

위의 코드에서 filter 메서드를 이용해 id 값이 3 이상인 요소들을 새로운 filterArr 배열에 담았습니다.

[
    { id: 3, color: "purple" },
    { id: 4, color: "yellow" },
];

filterArr 배열을 출력하면 위와 같은 값이 출력되는 것을 확인할 수 있습니다.

slice

slice 메서드는 특정 배열을 원하는 부분만 잘라서 가져올 수 있습니다.

let arr = ["apple", "melon", "banana", "orange"];

let sliceArr = arr.slice(0, 2);
console.log(sliceArr);

slice 메서드는 두 개의 파라미터 begin부터 end까지 배열을 복사하여 새로운 배열 객체로 반환합니다.

위의 코드를 실행하면 sliceArr 배열에는 아래와 같은 배열이 저장됩니다.

["apple", "melon"];

concat

이번에는 두개의 배열을 이어 붙여보겠습니다.

concat 메서드를 이용하면 두 개의 배열을 이어 붙일 수 있습니다.

let arr1 = ["apple", "melon"];
let arr2 = ["banana", "orange"];

let concatArr = arr1.concat(arr2);
console.log(concatArr);

concat 메서드를 통해 배열을 이어 붙이게 되면, 하나의 배열로 합쳐줍니다.

실행 결과는 다음과 같습니다.

["apple", "melon", "banana", "orange"];

join

join 메서드는 concat 메서드와는 다르게 배열 안의 값들을 문자열 형태로 합쳐주는 역할을 합니다.

let arr = ["apple", "melon", "banana", "orange"];

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

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

위의 arr 배열의 요소들을 join 메서드를 통해 합친 후 출력하면 아래와 같은 결과값이 출력됩니다.

apple,melon,banana,orange
apple melon banana orange

sort

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

let arr = ["apple", "melon", "banana", "orange"];
arr.sort();

console.log(arr);

위의 코드를 시행시켜보면, arr 배열 안의 요소들이 사전순으로 정렬이 된 것을 확인할 수 있습니다.

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

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

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

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

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

let arr = ["apple", "melon", "banana", "orange"];
arr.sort(compare);

console.log(arr);

위의 코드에서는 compare 라는 이름의 함수를 생성했습니다.

compare 함수는 a와 b, 2개의 파라미터를 전달받습니다.

여기서 a는 배열의 앞요소, b는 배열의 뒷요소를 의미하고,
비교는 3가지로 구분되며, 3가지 중 한 개의 값을 반환합니다.

따라서 위의 코드의 실행결과는 다음과 같습니다.

["orange", "melon", "banana", "apple"];

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

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

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

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

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

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

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

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

위의 코드에서는 arr 요소를 오름차순으로 비교하기 위해 compareA 함수를 작성했습니다.

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

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

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

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

위의 코드에서는 arr 요소를 내림차순으로 비교하기 위해 compareD 함수를 작성했습니다.

실행 결과, 요소가 내림차순으로 잘 정렬이 된 것을 확인할 수 있습니다.

reduce

reduce 아주 유용한 내장 함수입니다.

만약 특정 배열 요소들의 합을 구해야 된다면, 어떻게 코드를 작성해야 할까요?

let arr = [1, 100, 50, 3];
let sum = 0;

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

console.log(sum); //154

위에서 배웠던, forEach 메서드를 이용해 배열 요소들의 합을 구할 수 있습니다.

우리는 위에 작성된 코드와 같은 기능을 하는 코드를 reduce 메서드를 이용해 간략하게 작성할 수 있습니다.

reduce 메서드는 배열의 각 요소에 대해 함수를 실행하고 누적된 값을 출력할 때 유용하게 사용됩니다.

reduce 메서드는 아래와 같이 콜백함수와, initialValue 를 전달하며,
콜백함수의 인자들은 accumulator, currentValue, currentIndex 가 있습니다.

arr.reduce(callback[, initialValue])

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

let arr = [1, 100, 50, 3];

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

accumulator(acc)는 콜백함수의 반환값을 누적합니다.
위의 출력 결과를 보면, 0 1 101 151 이 순차적으로 출력된 것을 볼 수 있습니다.

currentValue(cur)는 처리할 현재 요소의 값을 나타냅니다.
위의 출력 결과를 보면, 1 100 50 3 이 순차적으로 출력된 것을 볼 수 있습니다.

currentIndex(idx)는 처리할 현재 요소의 인덱스를 나타냅니다.
currentIndex는 initialValue 값이 있다면 0부터 시작하고, 값이 없다면 1부터 시작됩니다.

initialValue는 콜백함수의 최초 호출 시, 적용되는 초기값입니다.

let arr = [1, 100, 50, 3];

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

console.log(sum); //164

위의 코드처럼 initialValue 값을 10으로 변경한 후 sum 변수를 출력해보겠습니다.

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

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

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

괄호 안의 인자가 배열이면 true를 반환하고, 아니라면 false를 반환합니다.

이번 시간에는 자바스크립트의 여러가지 유용한 배열 메서드들에 대해 배워보았습니다.

이번 내용을 마지막으로 자바스크립트 기초가 끝이 났습니다:)

다음 시간부터는 자바스크립트 심화 개념들을 다뤄보도록하겠습니다.

감사합니다☺️

🙏참고 & 출처

https://ko.javascript.info/array-methods

hyobin

이전 포스트