배열 내장함수 11가지 ( forEach map includes indexOf findIndex find filiter slice concat sort join )

인프런에서 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 수강 중 

오늘은 배열 내장 함수를 배워봤다.  잘 정리 된 느낌임 

 

---

 

 

1.  forEach 

 

const arr = [1,2,3,4];
arr.forEach((e) => console.log(e));
// 1 
// 2
// 3
// 4

배열을 순회하는 함수. 

배열의 모든 요소를 출력하는 함수. 콜백함수를 매개변수로 넣는다. 

 

 

 

2. map

const newQrr =arr.map((e)=>{
return e * 2;
});

//[ 2, 4 ,6 ,8]

배열을 순회해서 리턴 값을 배열로 반환! 

 

 

 

3. includes

주어진 배열에서 전달받은 인자와 일치하는 값이 있는지 확인 . 불 형식으로 알려줌. 

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

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

//true

 

4. indexOf

 

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

console.log(arr.indexOf(num));

// 2

 

배열에서 전달받은 인자의 값이 몇 번째 인덱스에 있는지 알려줌. 

 

 

 

5.findIndex

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

let num = 3;

console.log(arr.findInex((e)=>{ return e.color ==="green"
}));

// 3

콜백함수를 전달해서 해당 콜백함수가 true를 반환하는 첫번째 인덱스를 알려준다. (여러개면 처음 한 개만 나온다. )

 

 

6.find

 

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

let num = 3;

console.log(arr.find((e)=>{ return e.color ==="green"
}));

// { color:"green"}

콜백함수를 전달해서 해당 콜백함수가 true를 반환하는 첫번째 값을 알려준다.

 

7. filiter 

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

let num = 3;

console.log(arr.filiter((e)=>{  e.color ==="blue"
}));

// [Object, Object]

특정한 조건을 만족하는 것을 배열로 반환하고 싶다. 

 

8. slice

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



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

//0,1 번째만 반환

해당 조건을 만족하는 것을 잘라서 반환. ( a , b ) -> a부터 b-1번째까지 반환

 

9. concat

const arr1 = [
{ num:1 ,color:"red"}
{ num:2 ,color:"black"}
{ num:3,color:"blue"}

];

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


console.log(arr1.concat(arr2)
);

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

배열을 합쳐준다.

 

10. sort

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

// ["가","나", "다"]

원본 배열 자체를 정렬해준다. 주의) 문자열 기준으로 정렬함. 숫자도 사전순으로 정렬함 

 

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

const compare = (a, b) => {
	if(a>b) {
    	return 1;
    }
    if(a<b){
    	return -1;
    }
   return 0;
}

chars.sort(compare);
console.log(chars);

// [0,1,2,3,10,20,30]

이렇게 비교함수 compare을 만들어서 sort에 매개변수로 넣어줘야한다. 

양수가 나오면 뒤로 보내고 , 작을땐 앞으로 보내고 , 같을땐 안바꾸게 되면 오름차순으로 정렬할 수 있다. 

 

 

11.join

const arr = ["김은하","안녕하세요","이제","오셨나요"];

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

// 김은하 안녕하세요 이제 오셨나요

배열의 요소를 문자열로 하나로 합쳐준다. join안의 매개변수를 중간에 넣어준다. 

 

 

 

---

* 오류나 보완점 댓글로 환영합니다