17. 배열 내장 함수

1. forEach 

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

arr.forEach((elm) => console.log(elm)); // 결과 : 1, 2, 3, 4

 

2. map

원본 배열의 모든 요소를 순회하며 리턴된 값들 만을 따로 반환

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

const newArr = arr.map((elm)=>{
  return elm * 2
});

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

 

3. includes

배열에서 전달받은 인자와 값이 일치하는지 확인(===과 동일) 

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

let number = 3;
let number2 = "3";

console.log(arr.includes(number)); // 결과: true
console.log(arr.includes(number2)); // 결과: false

 

4. indexOf

주어진 요소가 배열에 존재할 경우 몇번째 인덱스에 있는지 확인

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

let number = 3;
let number2 = "3";

console.log(arr.indexOf(number));  // 결과: 2
console.log(arr.indexOf(number2)); // 결과: -1 (해당 인자의 값은 배열에 없음)

 

5. findIndex

배열에서 원하는 속성을 갖는 객체배열의 인덱스를 확인

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

let colors = "green";
 
console.log(arr.indexOf(colors));  // 결과: -1
console.log(arr.includes(colors)); // 결과: false

// 이런식으로 배열이 복잡하다면 includes, indexOf는 사용하기 어려움

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

console.log(arr.findIndex((elm) => elm.color === "green" )); // 결과: 2

findIndex의 파라미터는 콜백함수이다. 해당 콜백함수가 true를 반환하는 첫번째 요소를 출력 

* 주의: 일치하는 요소가 두 개인 경우, 가장 먼저 반환되는 요소만을 찾음

 

 

6. find

조건에 일치하는 요소를 가져옴(인덱스만 가져오지 않음) 

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

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

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

 

 

7. filter

전달한 콜백함수가 true를 반환하는 모든 요소를 배열로 반환

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

console.log(arr.filter((elm) => elm.color === "blue"));
// 결과: 0: Object  num: 2  color: "blue"

 

 

8. slice

배열을 인덱스 기준으로 자름 

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

console.log(arr.slice(0,2));
// 결과: { num: 1, color: "red" }
//      { num: 2, color: "blue" }

index 0번부터 2-1 까지, 즉 0~1까지 자름 

 

 

9. concat

배열을 붙임

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

const arr2 = [
  { num: 3, color: "green" },
  { num: 4, color: "yellow" }
]


console.log(arr1.concat(arr2))
// 결과: (4) [Object, Object, Object, Object]
// { num: 1, color: "red" }
// { num: 2, color: "blue" }
// { num: 3, color: "green" }
// { num: 4, color: "yellow" }

 

 

10. sort

원본 배열을 정렬함

let arr = ['C', 'B', 'A']

arr.sort();

console.log(arr); // 결과: ["A", "B", "C"]

//-------------------------------------------------

let numbers = [0, 1, 20, 44, 1000, 42]

numbers.sort();

console.log(numbers); // 결과: [0, 1, 1000, 20, 42, 44]


// sort함수는 사전순으로 정렬을 하기 때문에 일반적인 숫자 정렬과는 다르게 나온다. 
// 인자로 비교함수를 넣으면 정렬이 가능하다.
let numbers = [0, 1, 20, 44, 1000, 42]

const compare = (a,b) => {

  if(a >  b){
    // 크다
    return 1;
    
  } else if(a < b){
    // 작다
    return -1;
    
  } else{
    // 같다 
    return 0;
  }

}

numbers.sort(compare);

console.log(numbers); // 결과: [0, 1, 20, 42, 44, 1000]

 

 

11. join

배열 내 모든 요소를 문자열로 합침 

const arr = ["안녕하세요", "무엇을", "도와드릴까요?"];

console.log(arr.join());    // 결과: 안녕하세요,무엇을,도와드릴까,요,? 
console.log(arr.join(" ")); // 결과: 안녕하세요 무엇을 도와드릴까요? 
console.log(arr.join("~")); // 결과: 안녕하세요~무엇을~도와드릴까요?