JavaScript Sec01_12 배열 내장함수

객체의 메소드를 쓰는 것처럼 사용한다 ( 배열명.메소드명( ~ ) )

 

forEach

---

• 배열의 모든 요소를 한 번씩 순회 할 수 있도록 해주는 내장 함수
• const arr = [1,2,3,4]; for(let i =0; i<arr.length ; i++){ console.log(arr[i]); }

⇒

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

arr.forEach(function(elm){
console.log(elm);
});

 

map

---

• 원본 배열의 모든 요소들을 순회하고 연산하여 return 값들을 요소로 하는 배열로 반환해주는 함수

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

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

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

⇒

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

 

includes

---

• 주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 확인하는 함수
• boolean 타입으로 출력된다.

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

arr.forEach((elm)=>{
  if (elm === number){
    console.log(true);
  }
});

⇒

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

 

findIndex

---

• 콜백함수를 전달하여 해당 콜백함수가 true를 반환하는 첫 번째 인덱스를 반환하는 함수

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

console.log(
  arr.findIndex((elm)=>{
    return elm.color==="blue";
  }) 
);

 

find

---

• 요소의 index를 가져오는 게 아니라 조건에 일치하는 요소 자체를 직접 가져오는 함수

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

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

console.log(element);

출력값 : {color : “blue”}

 

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

출력값 :

 

slice(시작 인덱스, 끝 인덱스 +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,4));

출력값 :

 

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

---

• 정렬된 배열을 반환하는 게 아니라 원본 배열을 정렬해주는 함수
• 숫자형 기준이 아닌 문자형 기준으로 (사전 순으로) 정렬을 한다.

let chars=["나","다","가"];
chars.sort();
console.log(chars);

출력값 : ["가", "나", "다"]

 

join(" ")

---

• 배열 안에 있는 모든 요소들은 하나로 합쳐서 문자열로 반환하는 함수
• 파라미터 안에는 구분자가 들어간다. 파라미터 값이 없으면 자동으로 , 가 출력된다.

const arr = ["최영서", "님", "안녕하세요", "또오셨군요"];
console.log(arr.join());

출력값 : 최영서,님,안녕하세요,또오셨군요

const arr = ["최영서", "님", "안녕하세요", "또오셨군요"];
console.log(arr.join(" "));

출력값 : 최영서 님 안녕하세요 또오셨군요