배열 내장 함수

1. forEach()

배열의 모든 요소를 한 번씩 순회할 수 있도록 해줌

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

arr.forEach((elm) => console.log(elm)); // 1,2,3,4
// 위의 화살표 함수와 아래의 익명함수는 같음
arr.forEach(function (elm){
	console.log(elm * 2); // 2,4,6,8
});

2. map()

배열 내장함수로써 원본 배열의 모든 요소를 순회하면서 어떤 연산 등이 새로운 배열을 return으로 반환해줌

1) forEach 사용하여 newArr 배열에 arr 배열의 2배수 넣어주기

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

arr.forEach(function (elm) {
  newArr.push(elm * 2);
});

2) 📍map 사용하여 newArr 배열에 arr 배열의 2배수 넣어주기

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

console.log(newArr);

3. includes()

1) forEach를 사용한 방법

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

let number = 3;

arr.forEach((elm) => {
	if (elm === number) {
    	console.log(true);
    }
}); // number의 값이 arr 배열의 값에 있으면 true

2) 📍includes를 사용한 방법

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

let number = 3;

console.log(arr.includes(number));

내장함수 includes는 주어진 배열에서 전달받은 인자와 일치하는 값이 있는지 확인하고 불리언 값으로 반환한다.(true, false)
=== 비교연산자를 사용해서 값을 찾는다고 생각하면 된다.

4. indexOf()

indexof 함수는 주어진 배열에서 전달받은 인자와 일치하는 값의 index를 반환하는 함수.(배열에서 몇번째 값인지 반환)
만약 전달받은 인자가 배열에 포함되지 않으면 -1 반환함.

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

let number = 3;

console.log(arr.indexOf(number)); // 2

5. findIndex()

findIndex는 객체 배열을 순회하면서 조건에 맞는 요소를 찾아서 인덱스를 반환함.
객체에 같은 요소를 가진 것이 여러 개 있으면 첫번째 요소만 인식함.

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

let number = 3;

console.log(arr.findIndex((elm) => elm.color === "green")); // 3

// 아래와 같이 return 써도 됨
console.log(
  arr.findIndex((elm) => {
  	return elm.color === "green";
  })
);

6. find()

find는 조건을 만족하는 요소 자체를 반환함.

find : 요소 자체를 반환
findIndex : 요소의 인덱스 값을 반환

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

let number = 3;

const element = arr.find((elm) => {
  return elm.color === "blue";
});

console.log(element); // {color: "blue"}

7. filter()

filter는 배열을 필터링 할 수 있는 내장함수이다. 전달한 콜백함수가 true를 반환하는 모든 요소를 배열로 반환한다.

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

console.log(arr.filter((elm) => elm.color === "blue"));

8. slice()

slice 함수는 배열의 index 값을 기준으로 배열을 자를 수 있다.

📍주의 : slice(0,2) 는 index 0,1번째 값만 반환한다.
첫번째 인자인 0을 begin, 두번째 인자인 2를 end라고 하는데 두번째 인자의 index 값에서 1을 뺀 index 값까지만 반환한다.

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

console.log(arr.slice(0, 2));

9. concat()

concat 함수는 각자 다른 배열을 붙여줄 때 사용한다.

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

const arr2 = [
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];

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

10. sort()

sort 함수는 원본 배열 순서를 문자의 사전순대로 정렬해준다.
반환하는 것이 아닌 원본 배열의 순서를 정렬하는 것이다.

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

chars.sort();

console.log(chars); // "가", "나", "다"

📌 sort()로 숫자 배열을 정렬할 때

sort를 이용하여 숫자 배열을 정렬할 때는 비교 함수를 만들어서 sort 메서드에 전달해야함.

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

const compare = (a, b) => {
  if (a > b) {
    return 1; // 내림차순으로 정렬할 땐 -1
  }

  if (a < b) {
    return -1; // 내림차순으로 정렬할 땐 1
  }

  return 0;
};

numbers.sort(compare); // 직접 만든 비교함수 compare 전달

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

11. join()

join은 배열의 여러가지 요소 문자열 형태로 합치려고 할 때 사용된다.

const arr = ["홍길동", "님", "안녕하세요", "또 오셨군요"];

console.log(arr.join()); // 홍길동,님,안녕하세요,또 오셨군요 

join을 이용하면 배열의 요소들이 ,로 구분되어 하나의 문자열로 합쳐져서 반환이 된다.
여기서 ,를 제거하고 사용하려면 join(" ") 등으로 공백을 넣어주면 된다.

const arr = ["홍길동", "님", "안녕하세요", "또 오셨군요"];

console.log(arr.join(" ")); // 홍길동 님 안녕하세요 또 오셨군요