[JS] 13. 기초 문법: 배열 내장함수

배열은 배열을 쉽게 다룰 수 있도록 도움을 주는 굉장히 많은 수의 유용한 내장함수들을 가지고 있습니다.

배열 내장함수를 잘 이용하면 훨씬 더 깔끔하고 유연하면서 간결한 코드를 작성할 수 있습니다.  

 

알아볼 내장함수는 forEach, map, includes, indexOf, findIndex, find, filter, slice, concat, sort, join 이렇게 총 11가지 입니다. 이외에도 더 많은 유용한 내장함수들이 있지만 우선 기본적인 내장함수들만 정리해보겠습니다.

 

---

 

[ 들어가기 전에]

자바스크립트의 자료형은 모두 객체로 이루어져 있습니다. 그렇기 때문에 내장함수를 사용할 때는 객체의 메서드를 사용하는 것과 동일한 방식을 이용합니다. (객체의 프로퍼티에 접근하는 방식 중 점 표기법 - '객체명.key값') 

 

---

1) forEach

 

배열 요소를 하나씩 순회하는 내장함수입니다. 

 

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

arr.forEach(function (elm) {
  console.log(elm);
});

//화살표 함수로 작성
arr.forEach((elm) => console.log(elm));

 

forEach 내장함수의 인자로 함수를 전달하고 인자로 전달된 함수의 매개변수(elm)는 배열의 요소가 됩니다. 

 

---

2) map 

 

배열을 이용하여 또다른 새로운 배열을 생성하는 내장함수입니다. 배열 안의 각 원소를 변환할 때 사용합니다. 

(원본 배열 요소 값들이 수정되는 것이 아니라 새로운 배열을 만들어 반환하는 것입니다.)

 

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

/* 배열 arr의 요소 값들이 두 배가 되도록 변환 */
const newArr = arr.map((elm) => {
  return elm * 2;
});

console.log(newArr);  //2,4,6,8

 

---

3) includes

 

특정 값이 배열 안에 존재하는지를 확인

있으면 true, 없으면 false를 반환

 

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

let num1 = 3;
let num2 = 10;

/* 변수 num1과 num2에 저장된 값이 배열 arr에 존재하는지를 확인 */
console.log(arr.includes(num1));   //true 출력
console.log(arr.includes(num2));   //false 출력

 

 

 '===' 연산과 마찬가지로  값뿐만 아니라 자료형까지 일치해야 true를 반환합니다.

 

---

4) indexOf

 

특정 값이 배열의 몇 번째에 있는지, 즉, 인덱스를 반환하는 내장함수입니다.

해당 값이 배열에 없는 경우에는 '-1'을 반환합니다.

 

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

let num1 = 3;
let num2 = 10;

/* num1과 num2의 인덱스를 출력 */
console.log(arr.indexOf(num1)); //2 출력
console.log(arr.indexOf(num2)); //-1 출력

 

그런데 만약 배열 안의 요소들이 객체이거나 배열일 경우에는 indexOf를 사용하여 요소의 위치(인덱스)를 알아낼 수 없습니다. 이럴 때에는 다음에 나오는 findIndex 함수를 사용합니다.

---

5) findIndex

 

배열 안의 요소들이 객체이거나 배열인 경우에 사용하는 요소의 인덱스를 반환하는 함수입니다.

 

const arr = [
  { color: "red" },
  { color: "blue" },
  { color: "green" },
  { color: "green" },
  { color: "purple" }
];

console.log(
  arr.findIndex((elm) => {
    return elm.color === "green";
  })
);
//2 출력

 

배열 안에 조건과 일치하는 요소가 두 개 이상일 경우, 가장 먼저 나오는 인덱스를 반환합니다. 따라서 위 코드에서 "green"이라는 값을 가진 두 개의 요소가 존재하지만 먼저 나오는 요소의 인덱스 2가 반환됩니다.

 

이것은 indexOf 함수에서도 동일하게 적용됩니다. 

 

정리하자면, indexOf 함수와 findIndex 함수는 배열을 처음부터 끝까지 순서대로 순회하면서 가장 먼저 조건을 만족하는 요소의 인덱스를 반환합니다.

 

 

만약 배열의 인덱스가 아닌 찾고자 하는 요소에 직접적으로 접근하고 싶을 때에는 위와 같은 코드를 다음과 같이 활용할 수 있습니다. 

console.log(
  arr[
    arr.findIndex((elm) => {
      return elm.color === "green";
    })
  ]
);
//green

 

---

6) find

 

앞서 findIndex 함수를 이요앟여 배열 요소에 접근하는 방법을 보았습니다. 그런데 굳이 index를 알아내 요소에 접근하는 방법보다 더 좋은 접근 방법이 있습니다. 

 

find 함수는 조건과 일치하는 요소의 인덱스를 반환하는 것이 아니라 조건과 일치하는 요소를 그대로 반환합니다.

 

const arr = [
  { color: "red" },
  { color: "blue" },
  { color: "green" },
  { color: "green" },
  { color: "purple" }
];

let element = arr.find((elm) => {
  return elm.color === "green";
});

console.log(element); //green

let element = arr.find((elm) => {
  return elm.color === "green";
});

console.log(element); //green

---

7) filter

 

말 그대로 배열을 필터링하는 함수입니다. 

배열 내에 특정 조건을 만족하는 요소들만을 배열로 반환합니다.

 

const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "blue" },
  { num: 3, color: "green" },
  { num: 4, color: "green" },
  { num: 5, color: "purple" }
];

//컬러가 "green"인 요소만 가지고 오도록 필터링
console.log(arr.filter((elm) => elm.color === "green"));

 

콘솔 출력 화면

---

8) slice

 

 특정 인덱스를 기준으로 배열을 잘라내는 함수입니다.

기준이 되는 두 개의 인덱스를 slice 함수의 인자로 전달하는데, 첫 번째 인자를 begin, 두 번째 인자를 end라고 합니다.

 

begin의 요소부터 end에서 1을 뺀 인덱스의 요소까지 배열을 잘라내어 반환합니다. 

 

const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "blue" },
  { num: 3, color: "green" },
  { num: 4, color: "green" },
  { num: 5, color: "purple" }
];

console.log(arr.slice(0, 3));  // 인덱스 0에서부터 인덱스2까지의 배열 요소를 반환

---

9) concat

 

배열을 잘라내는 slice 함수와 반대로 배열을 붙이는 함수입니다. 

 

어떤 배열에 이어 붙이고자 하는 배열을 concat 함수의 인자로 전달합니다.

 

const arr1 = [
  { num: 1, color: "red" },
  { num: 2, color: "blue" },
  { num: 3, color: "green" }
];

const arr2 = [
  { num: 4, color: "purple" },
  { num: 5, color: "yellow" }
];

console.log(arr1.concat(arr2));

 

콘솔 출력 화면 

---

10) sort

 

배열을 문자열 기준으로 정렬하는 함수입니다. 

 

sort 함수는 원본 배열 자체를 정렬해줍니다. 즉, 정렬된 새로운 배열을 반환하는 것이 아니라 원본 배열 자체의 수정을 변경하는 것입니다.

 

let chars = ["나", "다", "가"];

chars.sort();

console.log(chars);

 

콘솔 출력 화면

 

이번에는 문자열 배열 말고 숫자 배열을 정렬해보도록 하겠습니다.

 

sort함수는 문자열 기준으로 사전 순으로 배열을 정렬하기 때문에 숫자를 크기 순서대로 정렬하지 않습니다.

(ex.  '3, 2, 1, 10, 20'을 문자열 기준으로 정렬하면 '1, 10, 2, 20, 3'으로 정렬됩니다. )

 

숫자 배열을 숫자 기준으로(숫자 크기 순서대로) 정렬하기 위해서는 비교함수를 만들어 sort 함수의 인자로 넣어주어야 합니다. 

 

let numbers = [0, 1, 3, 2, 10, 30, 20];

//비교 함수 - 같다/크다/작다 중 하나의 결과를 반환해야 합니다.
const compare = (a, b) => {
  //크다
  if (a > b) {
    return 1;    //내림차순 정렬 시에는 -1 
  }

  //작다
  if (a < b) {
    return -1;   //내림차순 정렬 시에는 1
  }

  //같다
  return 0;
};

numbers.sort(compare);

console.log(numbers);   //0,1,2,3,10,20,30

 

위 코드는 숫자를 오름차순으로 정렬한 것입니다. 숫자를 내림차순으로 정렬할 때는 큰지 작은지를 비교하는 조건문의 반환값을 서로 바꿔줍니다. 

 

비교함수를 직접 제작하여 sort 함수의 인자로 전달하면 숫자 배열 외에 객체/배열/함수들의 배열도 원하는 대로 정렬할 수 있습니다.

---

11) join

 

배열 내의 모든 요소를 하나로 묶어 문자열로 반환하는 함수입니다. 

 

join 함수의 인자는 각 요소들 사이 사이에 위치하는 구분 문자가 됩니다. 

(인자로 아무것도 전달하지 않으면 자동으로 쉼표(,)가 구분 문자로 적용됩니다.)

 

const arr = ["지금은", "오후", 11, "시", "입니다."];

console.log(arr.join());
//지금은,오후,11,시,입니다.

console.log(arr.join(" "));
//지금은 오후 11 시 입니다.