배열은 굉장히 많은 내장 함수를 가지고 있다.
내장 함수를 잘 이용한다면 코드를 훨씬 간결하게 작성할 수 있다.

1. forEach

forEach는 배열을 순회하는 함수로 for 문을 더 간편하게 대체할 수 있다.

forEach 함수의 파라미터로, 각 원소에 대해 처리하고 싶은 코드를 함수로 넣어준다.
이렇게 함수형태의 파라미터로 전달되는 것을 콜백함수라고 한다.

기존 for문 사용

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

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

forEach 사용

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

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

2. map

map은 배열의 모든 원소가 각각 콜백함수를 수행해서 새로운 배열을 반환하는 함수이다.

기존 배열의 2배수인 새로운 배열을 만들고 싶다고 가정하자.

forEach 사용
forEach를 사용한다면 새로운 빈 배열을 만들어 push로 넣어주는 과정을 거쳐야한다.

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

arr.forEach((elm) => newArr.push(elm*2));

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

map 사용
map 사용하면 더 간결한 코드로 구현할 수 있다.

const arr = [1, 2, 3, 4];
const newArr = arr.map((elm) => {return elm * 2;})

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

3. includes

주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 확인하고 true나 false를 반환하는 함수.
값의 타입까지 비교하는 일치 비교(===)를 한다.

배열에 보물이 있으면 콘솔에 "찾았다!"를 출력하는 코드를 만들어보자.

• forEach 사용

const arr = ['사과', '보물', '오렌지', '포도'];

let treasure = '보물';

arr.forEach((ele)=>{
  if(ele===treasure) {
    console.log("찾았다!");    
  }
});

• includes 사용

const arr = ['사과', '보물', '오렌지', '포도'];

let treasure = '보물';

if(arr.includes(treasure)){
     console.log("찾았다!"); 
};

4. indexOf

배열 안의 값이 숫자, 문자열, 불리언인 경우, 주어진 배열에서 전달받은 인자가 몆 번째 원소인지 반환하는 함수.

값의 타입까지 비교하는 일치 비교(===)를 한다.

일치하는 값이 없을 경우 -1을 반환한다.

const arr = ['사과', '보물', '오렌지', '포도'];

let treasure = '보물';

console.log(arr.indexOf(treasure));		// 1

5. findIndex

배열 안에 있는 값이 객체거나 배열이라면 findIndex 함수에 찾고자 하는 조건을 콜백함수로 넣어 가장 먼저 조건을 만족하는 원소가 몇 번째 원소인지 찾을 수 있다.

아래에서 id가 4인 객체를 찾는다고 가장하자.

const students = [
  {
    id: 1,
    name: "선희",
    gender: "여"
  },
  {
    id: 2,
    name: "강희",
    gender: "여"
  },
  {
    id: 3,
    name: "선우",
    gender: "남"
  },
  {
    id: 4,
    name: "민주",
    gender: "여"
  },
];

const student = students.findIndex(student=>student.id===4);
console.log(student);		// 3

6. find

배열 안에 있는 값이 객체거나 배열이라면 조건과 일치하는 원소 자체를 반환한다.

const students = [
  {
    id: 1,
    name: "선희",
    gender: "여"
  },
  {
    id: 2,
    name: "강희",
    gender: "여"
  },
  {
    id: 3,
    name: "선우",
    gender: "남"
  },
  {
    id: 4,
    name: "민주",
    gender: "여"
  },
];

const student = students.find(student=>student.id===4);
console.log(student);		// {id: 4, name: "민주", gender: "여"}

7. filter

filter 함수는 특정 조건을 만족하는 값들만 추출하여 새로운 배열로 반환한다.

파라미터로 조건을 나타내는 콜백 함수를 넣어준다. 이 콜백함수가 true를 반환하면 새로운 배열에 따로 추출을 해준다.

const students = [
  {
    id: 1,
    name: "선희",
    gender: "여"
  },
  {
    id: 2,
    name: "강희",
    gender: "여"
  },
  {
    id: 3,
    name: "선우",
    gender: "남"
  },
  {
    id: 4,
    name: "민주",
    gender: "여"
  },
];

const student = students.filter(student=>student.gender==='여');
console.log(student);	
/* (3) [Object, Object, Object]
    0: Object
   	 id: 1
   	 name: "선희"
   	 gender: "여"
    1: Object
   	 id: 2
   	 name: "강희"
   	 gender: "여"
    2: Object
   	 id: 4
   	 name: "민주"
     gender: "여"
*/

8. splice

splice는 배열에서 원소를 제거할 때 사용한다.
첫 번째 파라미터는 어떤 인덱스부터 지울지, 두 번째 파라미터는 몇개를 지울지를 의미한다.

아래 배열에서 2부터 4까지 제거한다고 가정하자.
2의 인덱스는 1이기 때문에 인덱스 1부터 3개를 지워준다.

const arr = [1, 2, 3, 4, 5, 6, 7];

arr.splice(1, 3);

console.log(arr);	// (4) [1, 5, 6, 7]

9. slice

slice는 배열을 잘라낼 때 사용하며 기존 배열은 그대로 두고 새로운 배열을 반환한다.
첫 번째 파라미터는 어디서부터 자를지, 두 번째 파리미터는 어디까지 자를지를 의미한다.

2부터 5까지를 새로운 배열로 반환해보자.
2는 인덱스 1이니 1부터, 두 번째 파라미터는 넣은 인덱스 전까지 잘리기 때문에 인덱스 5를 넣어야한다.

const arr = [1, 2, 3, 4, 5, 6, 7];

const newArr = arr.slice(1, 5);

console.log(arr);
console.log(newArr);	// (4) [2, 3, 4, 5]

10. concat

contcat은 여러 개의 배열을 하나의 배열로 합쳐준다.
인자로 받는 배열이 뒤로 붙는 형식이 된다. 기존에 존재하던 arr1, arr2 함수에는 변화를 주지 않는다.

const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7];

const newArr = arr1.concat(arr2);

console.log(newArr);	// (7) [1, 2, 3, 4, 5, 6, 7]

11. sort

sort는 배열의 문자열을 기준으로 순서를 정렬해준다.

const strings = ['라','가','다','나'];

console.log(strings.sort());	// (4) ["가", "나", "다", "라"]

하지만 sort는 문자열을 기준으로 하기 때문에 숫자가 배열에 있을 때는 올바르게 정렬해주지 못한다.

const numbers = [1,20,4,30,6];

console.log(numbers.sort());	//  (5) [1, 20, 30, 4, 6]

이 때 값을 비교해주는 비교함수를 만들어 sort에 전달해주면 된다.
비교함수는 크다, 작다, 같다 3가지 결과를 기준으로 나눠야한다.

const numbers = [1,20,4,30,6];

// 비교 함수수
const compare = (a, b) => {
  if (a > b) {
    // 1. 크다
    return 1;
  }
  if (a < b) {
    // 2. 작다
    return -1;
  }
  // 3. 같다
  return 0;
}

console.log(numbers.sort(compare));		// (5) [1, 4, 6, 20, 30]

• if (a > b) { return 1; }
  : a가 b보다 큰 경우, a가 b의 뒤로 간다. (큰 값이 뒤로 이동)

• if (a < b) { return -1; }
  : a가 b보다 작은 경우, a가 b의 앞으로 간다. (작은 값이 앞으로 이동)

• return 0;
  : a와 b가 같은 경우, 그대로 자리 유지.

이렇게 하면 오름차순으로 숫자를 정렬할 수 있다.

12. join

join은 배열 안의 값들을 문자열 형태로 합쳐준다.
괄호 안에 연결자를 넣어주면 된다.

const hello = ["안녕","하세요","우리","또","만났네요"];

console.log(hello.join());		// 안녕,하세요,우리,또,만났네요 
console.log(hello.join(" "));	// 안녕 하세요 우리 또 만났네요