배열 내장함수-1

안녕하세요 🤗

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

배열 내장함수

배열은 저번 시간에 배운 push 와 unshift 내장함수들 처럼 굉장히 많은 내장함수(메서드)를 가지고 있습니다.

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

이번 강의에서 자바스크립트의 모든 배열 내장함수들을 다루지는 않지만, 상당히 많은 내장함수들을 배워야하기 때문에, 2개의 강의로 나누어 설명해드리도록 하겠습니다.

자바스크립트 배열의 내장함수들 중, 자주 사용되는 내장함수들을 몇 가지 사용해보면서 배워보겠습니다.

forEach

코드샌드박스로 넘어오겠습니다.

지난시간, 우리는 배열의 모든 요소들에 접근하기 위해 for문을 사용했었습니다.

한 번 작성해보겠습니다.

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

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

이렇게 배열의 요소들에 접근하기 위해서는 for문을 사용할 수도 있지만, 자바스크립트에서는 배열의 내장함수를 이용해 더 간단하게 배열 요소에 접근할 수 있습니다.

forEach라는 배열 내장함수를 사용해 작성한 코드를 변경해보겠습니다.

forEach는 배열의 내장함수, 메서드 이기 때문에 배열의 이름인 arr의 뒤에 점을 찍고 forEach() 를 작성해줍니다.

forEach 메서드에는 매개변수로 함수를 전달 할 수 있는데, 지난 시간에 이 함수를 매개변수로 전달하는 개념을 콜백 함수라고 설명했었습니다.

forEach의 괄호 안에 콜백함수를 화살표형 함수로 작성해주겠습니다.

이 콜백함수에는 3가지의 매개변수를 전달 할 수 있는데요, 먼저 current value 즉, 처리할 현재 요소를 매개변수로 넣어주겠습니다.

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

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

이렇게 elm 이라는 처리할 현재 요소를 매개변수로 넣어준 다음 console.log 로 elm 을 출력하게 되면, 오른쪽 콘솔 탭에 배열 arr 의 요소들이 순서대로 출력되는 것을 볼 수 있습니다.

이 콜백함수의 매개변수 elm 은 arr 배열의 각 요소를 가리키기 때문에 이렇게 forEach 메서드를 사용하면, 훨씬 단순하게 코드를 작성할 수 있습니다.

이어서 콜백함수의 매개변수로 전달 할 수 있는 또 다른 값인, 실제 배열 요소의 순서를 나타내는 index 를 전달해보도록 하겠습니다.

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

arr.forEach((elm, idx) => {
    console.log(`${idx} 번째 요소는 ${elm} 입니다.`);
});

이 index 매개변수는 선택적 매개변수로, 첫 번째 매개변수의 옆에 두 번째 매개변수로 작성해주어야합니다.

매개변수 idx를 이용해 console.log에 idx 번째 요소는 elm 입니다 라는 문장을 출력해보면,

배열 요소의 index 번호와 그에 해당하는 elm 이 알맞게 출력되는 것을 볼 수 있습니다.

이렇게 콜백함수의 두 번째 매개변수는 배열 요소의 index를 출력할 수 있는 매개변수 입니다.

마지막으로 이 콜백함수에 넘겨줄 수 있는 매개변수는 array 입니다.

이번에는 작성된 코드의 맨 아래에 console.log 로 이 array 매개변수를 출력해보겠습니다.

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

arr.forEach((elm, idx, array) => {
    console.log(`${idx} 번째 요소는 ${elm} 입니다.`);
    console.log(array)
});

array 매개변수는 콜백함수의 세 번째 매개변수로 작성되며 출력결과 실제 arr 배열 그 자체가 출력되는 것을 확인할 수 있습니다.

이렇게 콜백함수의 세 번째 매개변수는 배열 요소의 수 만큼 동일한 배열을 출력하는 매개변수입니다.

이 forEach 내장함수는 배열에서 for문을 대체해 사용되고, 콜백함수의 여러가지 매개변수들을 통해 더 다양한 기능을 할 수 있는 유용한 배열 메서드입니다.

map

다음으로 알아볼 배열 내장함수는 map 입니다.

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

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

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

newArray 이라는 새로운 빈 배열을 생성하고, for문을 통해 arr 배열의 모든 요소에 10을 곱한 값을 push 메서드로 newArray 배열에 넣어보겠습니다.

이후 newArray 변수를 출력하면 10, 20, 30, 40, 50 의 요소가 담긴 배열이 출력됩니다.

이러한 코드는 map 을 이용하면, 훨씬 짧은 코드로 구현할 수 있습니다.

map 메서드도 forEach 메서드처럼 콜백함수를 전달받고, 배열 안의 모든 원소를 변환할 때 유용하게 사용되는 메서드입니다.

한 번 사용해보도록 하겠습니다.

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

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

newArray 라는 변수에 빈 배열 대신 arr이라는 배열을 작성하고 map 이라는 내장함수를 작성해주겠습니다.

map에는 화살표형의 콜백함수를 전달하고, 콜백함수의 매개변수로 elm 을 넘겨준 다음, 이 elm 은 arr 배열 요소의 값을 나타내기 때문에 return 문을 통해 elm에 10을 곱한 값을 반환해주겠습니다.

newArray 를 출력해보면, 실제로 이렇게 arr 배열 요소의 값에 10을 곱한 값이 담긴 새로운 배열이 출력되는 것을 볼 수 있습니다.

이 map 이라는 내장함수는 전달한 콜백함수를 호출한 결과를 모아서 새로운 배열로 반환해주는 내장함수, 배열의 모든요소에 연산을 적용하고, 그 결과를 새로운 배열로 돌려받을 수 있습니다.

내장함수 map 의 콜백함수에는 forEach와 동일하게 3가지의 매개변수를 전달할 수 있습니다.

마찬가지로 처리할 현재 요소, index, array 순서로 매개변수를 전달해 각각의 값을 활용할 수 도 있습니다.

at

이렇게 배열 요소들에 하나씩 접근해야할 때, 즉 배열을 순회할 때 사용하는 내장함수들에 대해 알아보았습니다.

이번에는 배열에서 특정 요소를 찾는 함수에 대해 알아보도록 하겠습니다.

먼저 colors 라는 배열을 생성하고, 초록색, 파랑색, 보라색의 요소들을 넣어보겠습니다.

우리가 배열에서 특정 인덱스에 해당하는 요소를 찾을 때에는 대괄호를 사용해 대괄호 안에 인덱스를 작성한 다음 요소의 값을 확인했었습니다.

let colors = ["green", "blue", "purple"];
console.log(colors[1]); //blue

하지만, 이 colors 배열에 매우 많은 값들이 들어있어 배열의 길이가 매우 길다면, 우리는 배열의 가장 마지막 값을 출력하기 위해 대괄호 안에 colors.length-1 이라는 값을 작성해주어야합니다.

이 at 이라는 배열 내장함수는 colors.length-1 이라는 값 대신에 쉽게 특정 배열의 마지막 요소에 접근할 수 있게 해줄 수 있는 내장함수입니다.

let colors = ["green", "blue", "purple"];
console.log(colors.at(1)); //blue
console.log(colors.at(-1)); //purple

at이라는 내장함수는 대괄호 안에 인덱스를 작성하는 방법과 동일하게, 매개변수로 배열의 인덱스를 넘겨주면 그 매개변수에 해당하는 인덱스의 배열요소가 출력됩니다.

하지만 이 매개변수로 -1 이라는 값을 넘겨주면 항상 배열의 마지막 요소의 값을 반환하는 내장함수입니다.

이렇게 at 메서드를 사용하면, 배열의 맨 마지막에 위치한 값을 알아야 할 때 훨씬 간편하게 작성할 수 있습니다.

includes

다음으로 알아볼 배열 메서드는 includes 입니다.

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

let colors = ["green", "blue", "purple"];
console.log(colors.includes("blue")); // true
console.log(colors.includes("yellow")); // false

includes 메서드를 사용해 blue라는 값과 yellow라는 값을 갖고 있는 배열 요소가 있는지 출력해보겠습니다.

출력 결과 blue의 값은 포함하고 있으므로 true가, yellow의 값은 포함하고 있지 않으므로 false가 출력됩니다.

includes 메서드는 매개변수로 또 다른 값을 전달할 수 있습니다.

우리가 찾을 배열 요소의 값이 적힌 매개변수 옆에 배열의 인덱스를 작성할 수 있습니다.

blue 라는 매개변수의 오른쪽에 매개변수로 각각 2와 1을 전달한 값을 출력해보겟습니다.

let colors = ["green", "blue", "purple"];
console.log(colors.includes("blue", 2)); // false
console.log(colors.includes("blue", 1)); // true

출력 결과 false 와 true 가 출력되는데, 이 매개변수는 fromIndex 다시말해, 이 colors 배열에서 특정 요소를 찾기 시작할 위치를 뜻합니다.

숫자 2를 넘겨준 코드는 colors 배열의 2번째 값부터 blue라는 요소가 있는지를 검사하는 코드이고, 숫자 1을 넘겨준 코드는 colors 배열의 1번째 값부터 blue라는 요소가 있는지를 검사하는 코드입니다.

colors 배열의 2번째 요소는 purple이고, 1번째 요소는 blue 이기 때문에 해당 요소부터 blue라는 값이 있는지를 검사하면, 순서대로 false, true의 값이 출력되는 것입니다.

이렇게 includes 메서드는 배열의 요소 중 특정값이 존재하는지를 쉽게 확인할 수 있는 메서드 입니다.

indexOf

이번에는 indexof 메서드에 대해 알아보겠습니다.

indexOf 메서드는 특정 값이 배열 요소에 있는지를 검사하는 것이 아니라, 특정 값을 지닌 요소가 몇 번째에 위치하는 요소인지를 찾아주는 함수입니다.

동일한 배열에서 purple 이라는 요소가 몇 번째에 위치하는 요소인지 찾아보도록 하겠습니다.

let colors = ["green", "blue", "purple"];
console.log(colors.indexOf("purple"));// 2

purple 이라는 값의 요소는 colors 배열의 2번째 인덱스에 있으므로, 출력 결과 2 가 출력이 되는 것을 볼 수 있습니다.

그럼 만약 colors 배열에 존재하지 않는 값을 indexOf 메서드를 통해 찾으려고 한다면 어떻게 될지 코드를 작성해보도록하겠습니다.

indexOf 의 매개변수로 yellow 라는 값을 전달해주겠습니다.

let colors = ["green", "blue", "purple"];
console.log(colors.indexOf("yellow")); // -1

코드를 실행해보면, -1 이라는 값이 출력되는 것을 볼 수 있습니다.

이렇게 배열에 존재하지 않는 값을 매개변수로 넣어 해당 값을 찾으려고 한다면, indexOf 메서드는 항상 -1 값을 반환합니다.

indexOf 메서드도 includes 메서드와 마찬가지로 이렇게 두 번째 매개변수로 검색을 시작할 인덱스를 전달 할 수 있습니다.

let colors = ["green", "blue", "purple"];
console.log(colors.indexOf("blue", 2)); // -1

findIndex

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

colors 배열의 요소들을 모두 객체로 변경해주겠습니다.

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

이렇게 배열 요소의 값이 객체 형태라면, color 가 purple 인 객체가 배열의 몇 번째인지 찾기 위해서는 indexOf 가 아닌, findeIndex 함수를 사용해야합니다.

findIndex 내장함수를 사용해 color 값이 purple인 배열 요소를 찾아보겠습니다.

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

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

console.log(idx); // 2

findIndex 또한 콜백함수를 작성해주고, 콜백함수의 매개변수로 elm 이라는 current value 를 전달합니다.

idx 라는 변수를 선언하고, 이 변수에 purple 값이 들어있는 배열 요소의 인덱스를 담아보겠습니다.

이 elm 는 현재 배열의 요소, id 값과 color 값을 가리키기 때문에, 우리는 이 elm 에서 color의 값이 purple인 값을 찾아야 하므로, 점표기법으로 color를 작성해주고, 이 값이 purple과 동일한지를 작성해줍니다.

이번에는 이 화살표형 함수에 중괄호와 return을 작성하지 않고, 바로 값을 비교하는 코드를 작성했는데요, 화살표형 함수를 작성할 때에는 중괄호를 사용하고 return을 통해 함수를 반환하는 방법도 있지만, 이렇게 간단하게 중괄호와 return문을 작성하지 않고 바로 코드를 작성해 값을 반환하는 방법도 있습니다.

그럼 이 idx 변수를 출력해보면, 2 라는 값이 출력됩니다. color 값이 purple인 배열 요소가 2번째 인덱스에 있기 때문에 알맞게 출력된 것을 볼 수 있습니다.

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

findIndex 내장함수 또한 매개변수로 current value와 index, array 를 전달할 수 있습니다.

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

colors.findIndex((elm, idx, array) => console.log(`${idx} 번째 값 - id: ${elm.id}, color: ${elm.color}`));
colors.findIndex((elm, idx, array) => console.log(array));

이렇게 작성한 다음 코드를 실행해보면, 동일하게 elm 에는 배열의 요소가, idx에는 배열 요소의 인덱스가, array에는 실제 colors 배열의 값이 담겨있는 것을 볼 수 있습니다.

find

다음으로는 findIndex 내장함수와 비슷한 find 라는 내장함수에 대해 배워보겠습니다.

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

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

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

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

idx 변수에 find 메서드를 사용해 배열 요소 중 color 값이 purple인 값 자체를 반환해보도록 하겠습니다.

idx 변수를 출력해보면, { id: 3, color: "purple" } 라는 객체가 그대로 출력되는 것을 볼 수 있습니다.

find 메서드 또한 마찬가지로 콜백함수의 매개변수로 current value와 index, array 를 전달할 수 있고,

이 find 메서드는 이렇게 주어진 조건을 만족하는 첫 번째 배열 요소의 값을 반환하고, 만약 배열 요소에 해당 값이 없다면, undefined 라는 값을 반환하는 내장함수입니다.

filter

지금까지 배열에서 특정 요소를 찾는 내장함수들에 대해 알아보았습니다.

at 메서드는 배열의 가장 마지막 요소에 쉽게 접근할 수 있게 해주는 메서드이고, includes 메서드는 배열 요소에 특정 값이 있는지를 판별하는 내장함수 그리고 indexOf 메서드는 특정 값을 지닌 요소가 몇 번째에 위치하는지를 반환하는 함수, findIndex는 배열의 요소가 객체로 이루어져있을 경우 특정 값을 지닌 요소가 몇 번째에 위치하는지를 반환하는 함수이고 마지막으로 find 메서드는 특정 값이 있는 요소의 그 값 자체를 반환하는 내장함수였습니다.

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

먼저 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 생성하는 filter 함수에 대해 알아봅시다.

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

let filterArray = colors.filter((elm, idx, array) => elm.id > 1);
console.log(filterArray);

filterArray 라는 변수를 선언해주고, filter 메서드를 통해 배열요소의 id 값이 1보다 큰 요소들을 담아주겠습니다.

이렇게 filterArray 를 출력해보면, { id: 2, color: "blue" } 와 { id: 3, color: "purple" } 값이 담긴 배열이 출력되는 것을 볼 수 있습니다.

filterArray는 조건을 만족하는 가장 첫 번째 값만 반환하는 것이 아니라, 조건을 만족하는 모든 값들을 새로운 배열에 담아 반환하는 내장함수입니다.

slice

다음으로 알아볼 내장함수는 slice 입니다.

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

colors 배열 요소에 id 값이 4이고 color의 값이 yellow인 요소를 추가한 다음 slice 메서드를 사용해보겠습니다.

slice 메서드는 두 개의 매개변수로, begin과 end를 전달받습니다s.

전달받은 매개변수로 begin부터 end보다 1 작은 인덱스의 요소까지 배열을 복사하여 새로운 배열 객체로 반환합니다.

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

let sliceArray = colors.slice(1, 3);
console.log(sliceArray);

slice 메서드에 1과 3을 매개변수로 전달하고, 반환값을 sliceArray 라는 변수에 담아보겠습니다.

코드를 실행하면 sliceArray 배열에는 { id: 2, color: "blue" } 와 { id: 3, color: "purple" } 값이 담겨있는 것을 볼 수 있습니다.

이렇게 이번시간에는 배열의 요소들을 순회할 수 있는 메서드, 배열에서 특정 요소를 찾는 메서드, 특정 요소들의 값을 추출하는 메서드들에 대해 배워보았습니다.

다음시간에는 더 다양한 메서드들에 대해 배워보도록 하겠습니다.

감사합니다.