[JS] 배열 내장 함수들 정리 [map, includes, indexOf 등]

자바 스크립트에서 정말 중요하고 많이 쓰이는 ‘배열' 그 배열을 다룰 때 사용할 때 매우 유용한 내장 함수들을 알아두는 것은 정말 정말 중요하다.

배열 내장함수를 왜 써야하는가?

안 써도 되잖아?

 

맞는 말이다. 하지만 더 빠르고 간편한 방식이 있는데 그걸 모르는 것은 비효율적이라고 생각한다. 간단히 예시를 들어보자

---

(예시) 배열 내장함수 없이 배열 순회하는 방법

• for문과 length 프로퍼티를 이용하여 순회하기

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

for (i = 0; i < arr.length; i++) {

console.log(arr[i]);

//1, 2, 3, 4 차례로 배출

나 역시 이 방법으로 배열을 순회해왔다.

하지만 배열 함수라는 것을 접하고 부터는 잘 안쓰게 되었다.

 

 

 

내장함수를 이용해서 배열 순회하는 방법

 

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

arr.forEach(function (elm) {

console.log(elm);
});
//1,2,3,4

배열 내장함수 forEach를 사용하니 훨씬 코드가 간결해졌다.

-콜백함수를 가진 forEach는 파라미터로 배열 요소를 순서대로 전달하는 기능을 가졌다.

 

 

하지만 console.log로는 표시만 한 것이고 리턴이 되는 것이 아니다.
추가적인 작업이 필요하다. 즉, 새로운 배열에 담아주는 과정 필요

 

 

new arr 선언과 push 프로퍼티 사용

let arr = [1, 2, 3, 4];
let newArr = [];// 빈 배열 선언 

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

});
 
// newArr이 실제로 [3, 6, 9, 12]
//로 빈 객체를 치워졌음을 알 수 있다.

하지만 이걸로 만족할 수 없다. 더 빠른 길이 있다. 배열 내장 함수에서 정말 많은 비중을 차지하는 map 내장함수라는 게 존재!

 

---

map (); : 이 함수를 사용하면 더 간편하게 한번 씩 각각의 배열 요소의 결과 값에 대하여 리턴 받기 가능.

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


});

console.log(newArr);

//결과 2,4,6,8이 newArr에 더 간단하게 리턴해서 들어감

 

 

includes() : 메서드는 배열이 특정 요소를 포함하고 있는지 판별

 

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

특정 요소가 있는지 없는지 'boolean'타입으로 반환해줌

 

 

indexOf (); : 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환 

 

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



let number = 3;
console.log(arr.indexOf(number));

// 2 (3이 존재하기때문에 일치하는 요소의 인덱스 반환


let number = "3";
console.log(arr.indexOf(number));

// -1 (문자열 3은 존재하지 않기 때문에 -1을 고정적 반환)

• finedIndex () : 판별 함수를 만족하는 첫 식별자 반환
  : callback(element, index, array) → 골백함수가 받는 인자

(각 인자는 findIndex 메서드를 호출한 배열에서 받아옴)

 

 

 

const arr = [

{ color : "red"},
{ color : "black"},
{ color : "blue"},
{ color : "green"},
{ color : "green"},
{ color : "blue"},
];

let number = 3;

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


//2 반환 

//배열 그 자체를 반환 받고 싶다면 
다른 방식을 이용해야함


{ color : "red"},
{ color : "black"},
{ color : "blue"},
{ color : "green"},
{ color : "green"},
{ color : "blue"},
];

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

console.log(arr[idx]);

//color : blue
요소를 있는 그대로 반환받고 싶다면
  color : blue;

 

 

find : 더 빠르게 특정한 조건 엘리먼트를 받아올 수 있음 findindex를 안쓰고도

{ color : "red"},
{ color : "black"},
{ color : "blue"},
{ color : "green"},
{ color : "green"},
{ color : "blue"},
];

let number = 3;
const idx = arr.find(elm) => {
return elm.color === "blue";
});

console.log(element);

//color : blue

//파인드를 쓰면 인덱스가 아니라 엘리먼트 잘 반환가능

 

 

 

 

* filter : 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

 

{ num :1 color : "red"},
{ num :2 color : "black"},
{ num :3 color : "blue"},
{ num :4 color : "green"},
{ num :5 color : "green"},
{ num :6 color : "blue"},
];

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

// 0: ojbject 
   num :3
   color : "blue"


//1: ojbject 
   num :5
   color : "blue"

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

 

 

 

---

배열을 자르고 붙이기 (두 가지 내장 함수)

 

 

 

slice (); : 어떤 배열의 begin 부터 end 까지 (end 미포함)에 대한 얕은 복사로 새로운 배열 객체 반환 (원본 배열 안 바뀜)

 

 

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

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

// num :4 
//color : green까지만 반환 반환값으로 쓸 수 있다

 

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

//arr1 뒤로 arr2를 갖다 붙여서 
//하나의 배열로 리턴해줌

 

 

---

배열 정렬

 

sort(); : 원본 배열의 순서를 사전 순서대로 배열하는 메서드

 

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

chars.sort();

console.log(chars);

// 0: "가" 1: "나" 2 : "다"로 사전 순서대로 출력

하지만 숫자에 경우에는 우리가 원하는 결과가 나오지 않는다. 숫자 값이 작은 대로 나오는 것이 아니라는 것.

 

 

 

 

 

**해결법 **

⇒ 비교 함수를 사용해서 필터링해줘야하는 과정을 거친다.

 

 compareFunction를 선언할 경우 sort() 메서드는 compareFunction에게 배열의 요소를 2개씩 반복해서 보낸 뒤, compareFunction이 반환하는 값을 기준으로 정렬합니다.

*반환 값 < 0 : a 가 b보다 앞에 있어야 한다.
*반환 값 = 0 : a와 b의 순서를 바꾸지 않는다.
*반환 값 > 0 : b가 a보다 앞에 있어야 한다.

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

const compare = (a, b) => {
// 같다
// 크다
//작다 

if (a > b) {
return 1;
}
if (a < b) {
return -1;
}

return 0;

};

number.sort(compare);
console.log(numbers);

 

만족스러운 결과

 

 

 

join(); : 쉼표로 구분되서 문자열로 하나로 합쳐서 리턴 된다.

console.log(arr.join("바보"));
// 이OO 바보 바보안녕하세요바보또오셨군요
console.log(arr.join(""));
//이정환 님 안녕하세요 또 오셨군요 

//join안에 들어가는 것은 구분자가 된다.