1. JavaScript 기본 - 배열 내장 함수 (1)

1 ) foreach

배열 안에 있는 원소들을 가지고 어떤 작업을 일괄적으로 하고 싶을 때,

forEach문을 사용해 간결한 코드 작성 가능.

const arr = [1, 2, 3, 4];
 
for (let i = 0; i < arr.length; i++) {
console.log(arr[i] * 2);
}


// 출력
2
4
6
8

for문을 사용해서 1,2,3,4 의 배열에 곱하기 2를 하는 값을 로그로 찍고 싶다면 위의 코드처럼 작성할 수 있음.

 

하지만, foreach 문을 통해서 좀 더 간편하게 사용할 수 있음.

const arr = [1, 2, 3, 4];
 
arr.forEach(function (elm) {
console.log(elm * 2);
});


// 출력
2
4
6
8

forEach 내장함수는 콜백함수를 사용함.

forEach를 사용하여 각각의 배열에 있는 원소에 대해 함수를 실행함.

const arr = [1, 2, 3, 4];
 
arr.forEach((elm) => console.log(elm * 2)); // 콜백함수


// 출력
2
4
6
8

화살표를 사용하여 함수를 작성할 수도 있음.

이 전의 코드와 함수 표기방법만 달라진 거임.

 

 

 

2 ) map

배열의 요소들을 전체적으로 변환해주고 싶을 때 사용.

const arr1 = [1, 2, 3, 4, 5];
 
// forEach 내장함수를 이용
const newArr1 = [];
arr1.forEach((elm) => newArr1.push(elm * 2));
console.log(newArr1);


//출력
[2,4,6,8,10]

map 내장 함수를 사용하기 전에 forEach문으로 새로운 배열에 옮겨봄.

새로운 배열을 하나 만들고 push로 값을 하나씩 밀어 넣는 방식으로 함.

 

하지만, map 내장함수를 사용하면 엄청 간단하게 사용할 수 있음. 

const arr1 = [1, 2, 3, 4, 5];

const newArr2 = arr1.map((elm) => {
return elm * 2;
});
console.log(newArr2);


//출력
[2,4,6,8,10]

map 내장함수는 배열로 반환되기 때문에 곧바로 newArr2에 대입할 수 있음.

이렇게 사용하면 간편하게 배열을 옮길 수 있게 됨.

 

 

 

3 ) includes, indexOf

includes : 원하는 항목이 배열 내에 있다면 true 없다면 false를 반환함.

indexOf : 원하는 항목이 배열 내에서 어디 위치하는지 인덱스 값을 반환함. 

const arr3 = [1, 2, 3, 4];
let number = 3;
 
arr3.forEach((elm) => {
if (elm === number) {
console.log(true);
}
});


//출력
true

먼저 forEach로 구현함.

3이라는 숫자가 있으면 true 로그를 찍으면서 3 숫자 존재를 알 수 있음.

 

하지만, 내장함수를 이용하면 간단함.

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

// includes를 사용하는 방법
console.log(arr3.includes(number));
 
// indexOf 사용하는 방법
console.log(arr3.indexOf(number));


//출력
true
2

 

includes로 원하는 항목이 배열 내에 있다는 것을 확인 후 true를, 

indexOf로 원하는 항목이 배열 내에서 어디에 있는지 찾아서 인덱스 값을 반환함. 

 

 

 

4 ) findIndex, find

findIndex : 객체의 인덱스를 반환함.
find : 객체를 반환함.

 

const arr4 = [
{ color: "red" },
{ color: "black" },
{ color: "blue" },
{ color: "green" }
];
 
console.log(arr4.findIndex((elm) => elm.color === "black"));
 
console.log(arr4.find((elm) => elm.color === "blue"));


//출력
1
{color: "blue"}

 

만약 배열 안의 값들이 객체이거나 조건일 때, 값을 찾고자 한다면 indexOf 함수로는 할 수 없음.

이 경우 'findIndex' 함수를 사용해야 함.

findIndex는 특정 조건을 확인해서 그 조건이 일치하면, 일치하는 원소가 몇 번째인지 알려줌.

find는 특정 조건을 확인해서 그 조건이 일치하면, 일치하는 원소 자체를 알려줌.

 

 

 

6. filter

특정 조건을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열을 만드는 것.

const arr5 = [
{ num: 1, color: "red" },
{ num: 2, color: "black" },
{ num: 3, color: "blue" },
{ num: 4, color: "green" },
{ num: 5, color: "blue" }
];
 
console.log(arr5.filter((elm) => elm.color === "blue"));


//출력
[Object,Object]

0: Object
	num: 3
    color: "blue"
1: Object
	num: 5
    color: "blue"

filter 함수를 사용하면, color가 "blue"인 값을 가진 객체를 배열로 반환해줌.