[JS] 배열 내장 함수

✏️배열 내장함수

배열은 내장함수 많이 가지고 있다. 더 유연하고 깔끔한 멋진 코드를 만들 수 있다.

📌forEach 함수 = 배열을 단순히 순회하는 함수

const arr = [1,2,3,4]; //배열

arr.forEach((elm) => console.log(elm * 2));
// 내장함수에 콜백합수를 배열의 각각에 실행한다.

arr.forEach(funtion(elm){console.log(elm)});
// 2 , 4, 6 , 8

📌map 함수 = 배열의 값을 바꾸기

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

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

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

• 이 코드를 map으로 짧게 줄이기

const arr = [1,2,3,4]; //배열
//map은 각각 콜백함수를 실행한다. 
const newArr = arr.map((elm) =>{
  return elm * 2; //return으로 빼준다.
});
//[2 , 4, 6 , 8]

📌includes 함수 = 배열에 어떤값이 있다면 true, 없으면 false

주어진 배열에서 인자로 받은 값이 존재하는지 그렇지 않은지를 Booleam 식으로 리턴해준다.

const arr = [1,2,3,4]; //배열

let number = 3;

console.log(arr.includes(number))

📌indexOf 함수 = 존재하면 몇번째에 있는지 index 출력

const arr = [1,2,3,4]; //배열

let string = "3";
let number = 3;


console.log(arr.indexOf(string)) // -1 : 배열에 해당값이 없음!!
console.log(arr.indexOf(number)) // 2 : 배열에 해당값이 세번째에 있음!!

📌findIndex 함수

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

let number = 3;

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

📌find 함수 : 조건에 일치하는 값을 가져온다.

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

let number = 3;

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

console.log(element);
//{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"));

📌 slice 함수 : 배열을 삭뚝 자른다. 그리고 새로운 배열로 반환

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)); 
console.log(arr.slice(begin,end));
console.log(arr.slice(0,4); 

• end값 전까지만 반환
  
  
  

📌 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));
// 두 배열이 붙인다.

📌 sort 함수 : 문자열 사전(원본배열) 순으로 정렬

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

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

// 사전 순으로 정렬하고 싶다.
chars.sort();//["가","나","다"]

📌 sort 함수 : 숫자열 사전(원본배열) 순으로 정렬

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

numbers.sort();

🙅‍♀️sort로 숫자형 정열 안됨.

• 오름차순으로 정렬

const numbers = [0,1,3,2,10,30,20];
//비교함수
const compare = (a,b)=>{
 //1. 같다
 //2. 크다
 //3. 작다
  if ( a >b) {
    //크다
    return 1; //a를 뒤로 보내!!
  }
  if(a <b) {
    //작다
    return -1; //a를 앞으로 보내!!
  }
  
  //같다
  return 0;
};
//sort에 전달할 비교함수.
numbers.sort(compare);

console.log(numbers);// 문자열 정리 완료.

• 내림차순으로 정렬

const numbers = [0,1,3,2,10,30,20];
//비교함수
const compare = (a,b)=>{
 //1. 같다
 //2. 크다
 //3. 작다
  if ( a >b) {
    //크다
    return -1; //a를 앞으로 보내!!
  }
  if(a <b) {
    //작다
    return 1; //a를 뒤로 보내!!
  }
  
  //같다
  return 0;
};
//sort에 전달할 비교함수.
numbers.sort(compare);

console.log(numbers);// 문자열 정리 완료.

• 오름차순 쉽게 만들기

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

arr.sort(function(a, b)  {
  return a - b;
});

📌 join 함수 : 배열내의 모든요소를 문자열로 합치는 함수

const arr = ['다람', '님', '안녕하세요', '또 오셨군요'];

arr.join();//다람, 님, 안녕하세요, 또 오셨군요
arr.join(" ");//다람 님 안녕하세요 또 오셨군요
arr.join("==");//다람==님==안녕하세요==또오셨군요

• join()안에 무언가를 넣으면 구분자가 된다.