배열 내장함수

forEach

배열의 모든 요소를 순회할 수 있도록 함

하나 요소를 forEach 메서드안에 전달되는 콜백함수에 한번씩 전달를 파라미터로 하면서 원하는 작업을 할 수 있게 함

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

map

모든 요소에 콜백함수를 수행한다고 생각함. 리턴도 한번씩 다 받음

원본 배열의 모든 요소를 순회 연산을 해서 리턴 값을 따로 배열로 추려내서 반화함

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

console.log(newArr);

includes

주어진 배열에서 전달받은 인자를 존재하는지 불리언형식으로 리턴해줌

비교연산에서 === 연산자 사용한다는 느낌으로 보면 됨

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

let number = 3;

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

indexOf

주어진 배열에서 전달받은 인자를 존재하면 몇번째 인덱스에 위치를 하는지 리턴

만약에 존재하지 않으면 -1로 리턴함

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

let number = "3";

console.log(arr.indexOf(number)); // -1

존재하면

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

let number = 3;

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

 

findIndex

콜백함수를 전달해서 해당 콜백함수를 트루를 반환하는 로직을 만들 수 있다.

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

];

let number = 3;

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

 

만약에 요소가 두개가 존재하다면 처음 만나는 요소를 반환함

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

let number = 3;

console.log(arr.findIndex((elm) => elm.color === "blue")); // 2

인덱스를 그대로 출력

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

let number = 3;

const idx = arr.findIndex((elm) => {
  return elm.color === "blue";
})

console.log(arr[idx]); // {color: "blue"}

요소 자체라면 find

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

let number = 3;

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

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

filter

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

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"));

// (2) [Object, Object]
// 0: Object
// 1: Object
// (2) [Object, Object]
// 0: Object
// num: 3
// color: "blue"
// 1: Object
// num: 5
// color: "blue"

slice

slice(begin, end)

end -1 까지 자름

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));

// (2) [Object, Object]
// 0: Object
// num: 1
// color: "red"
// 1: Object
// num: 2
// color: "black"

concat

첫번째 명시한 arr1에 두번째 명시한 arr2를 붙임

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)); // [Object, Object, Object, Object, Object]

sort()

원본 배열을 정렬한 후 반환함 - 문자열 기준으로 정렬함

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

chars.sort();

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

sort()숫자 정렬

오름차순

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

const compare = (a, b) => {
  // 1. 같다
  // 2. 크다
  // 3. 작다

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

numbers.sort(compare);

console.log(numbers); // [0, 1, 2, 3, 4, 10, 14, 30]

내림차순

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

const compare = (a, b) => {
  // 1. 같다
  // 2. 크다
  // 3. 작다

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

numbers.sort(compare);

console.log(numbers); // [30, 14, 10, 4, 3, 2, 1, 0]

join()

배열에 존재하는 모든 것을 문자열로 반환한다.

const arr = ['이도영', '님', '안녕하세요', '또 오셨네요'];

console.log(arr.join(" "));