배열 내장함수 - 1
배열을 순환하는 방법
for 문 사용 시
const arr = [1, 2, 3, 4];
for(let i = 0; i < arr.length; i++){
console.log(arr[i])
}
forEach
- 배열의 모든 요소를 한 번씩 순회 할 수 있도록 해주는 내장 함수
- 즉, elm 은 배열의 요소들을 한 번씩 전달 받습니다.
const arr = [1, 2, 3, 4];
arr.forEach((elm) => console.log(elm));
arr.forEach((elm) => console.log(elm * 2));
기존의 값으로 새로운 배열 만들기
push
- 위의 예시는 출력만 할 뿐 배열로 저장하고 있지는 않습니다.
- push 를 이용해 새로운 배열로 값을 추가 할 수 있습니다.
const arr = [1, 2, 3, 4];
const newArr = [];
arr.forEach((elm) => newArr.push(elm * 2));
console.log(newArr);
map
- 위의 코드를 map 을 사용하면 더 쉽게 만들 수 있습니다.
- map 은 원본 배열의 모든 요소를 순회하면서 return 된 값들만을 따로 새로운 배열로 만들어서 반환을 할 수 있습니다.
- 즉, 아래 예시는
1 * 2
, 2 * 2
, 3 * 2
, 4 * 2
를 리턴 합니다.
const arr = [1, 2, 3, 4];
const newArr = arr.map((elm) => {
return elm * 2;
});
console.log(newArr);
배열안에 값이 있는지 찾는 방법( True / False )
forEach 사용 시
const arr = [1, 2, 3, 4];
let number = 3;
arr.forEach((elm) => {
if(elm === number){
console.log(true);
}
});
includes
- 주어진 배열에서 전달 받은 인자와 일치하는 값이 존재하는지 확인 합니다.
- 만약 문자열 3 을 전달하게 되면 false 가 나옵니다.
- 즉, === 연산을 사용해서 값을 찾습니다.
const arr = [1, 2, 3, 4];
let number = 3;
console.log(arr.includes(number));
배열 안에 값이 몇 번째에 있는지 ( 인덱스 번호 )
indexOf
- 배열의 인덱스는 0 부터 시작 합니다.
- 일치하는 값이 없는 경우는 -1 를 반환 합니다.
const arr = [1, 2, 3, 4];
let number = 3;
console.log(arr.indexOf(number));
findIndex
- 객체 배열에서 원하는 속성을 가지는 인덱스를 가져오기
const arr = [
{ color : "red"},
{ color : "black"},
{ color : "blue"},
{ color : "green"}
];
console.log(arr.findIndex((elm) => elm.color === "green"));
console.log(arr.findIndex((elm) => elm.color === "red"));
만약 일치하는 요소가 다중으로 있을 경우 ?
const arr = [
{ color : "red"},
{ color : "black"},
{ color : "blue"},
{ color : "green"},
{ color : "blue"}
];
console.log(arr.findIndex((elm) => elm.color === "blue"));
인덱스가 아닌 배열 요소에 직접 접근하고 싶은 경우 ?
- 아래 처럼 하는 방법도 있지만,
find
를 이용하면 쉽게 할 수 있습니다.
const arr = [
{ color : "red"},
{ color : "black"},
{ color : "blue"},
{ color : "green"},
];
const idx = arr.findIndex((elm) => {
return elm.color === "blue"
});
console.log(arr[idx]);
조건에 일치하는 요소를 가져오기
find
findIndex
와 find
의 전달하는 콜백 함수의 역할은 동일 합니다.
- 조건을 만족하는 첫 번째 요소를 반환 합니다.
- 차이점은
find
는 만족하는 요소 자체를 반환하고
findIndex
는 만족하는 요소의 인덱스 번호를 반환 합니다.
const arr = [
{ color: "red" },
{ color: "black" },
{ color: "blue" },
{ color: "green" }
];
const idx = arr.find((elm) => {
return elm.color === "blue";
});
console.log(idx);
참조