React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
배열의 내장함수
배열의 내장함수를 사용하면 더 깔끔하고 간결하게 코드를 작성할 수 있다.
forEach
// 기존 for문으로 배열을 순회하는 방식
const arr = [1, 2, 3, 4];
for(let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// forEach를 이용한 순회
const arr = [1, 2, 3, 4];
arr.forEach((elm) => console.log(elm)); // 화살표 함수 이용
/*
1
2
3
4
*/
arr.forEach((elm) => console.log(elm*2));
/*
2
4
6
8
*/
// arr 연산 결과를 다른 배열에 담기
const arr = [1, 2, 3, 4];
const newArr = [];
arr.forEach(function (elm) {
newArr.push(elm * 2);
});
console.log(newArr);
/*
2
4
6
8
*/
Map
위 코드 중 arr 연산 결과를 다른 배열에 담는 코드는 더욱 쉽고 짧게 map을 이용해 구현할 수 있다.
const arr =[1, 2, 3, 4];
const newArr = arr.map((elm) => {
return elm * 2;
});
console.log(newArr);
/*
2
4
6
8
*/map은 원본 배열의 모든 요소를 순회하면서 어떤 연산을 한 후 return으로 그 값을 받아오는 게 가능하다. 즉, arr의 원소들에 2를 곱한 결과를 리턴하면 newArr 배열에 담기는 식이다.
includes
const arr =[1, 2, 3, 4];
let number = 3;
console.log(arr.includes(number)); // trueincludes는 주어진 배열에서 값이 존재하는지, 아닌지에 대한 결과를 Boolean 타입으로 반환한다. includes는 == 연산이 아닌 === 연산과 동일하게 데이터 타입까지 확인한다.
indexOf
includes와 동일하게 배열 내에 값이 있는지 없는지 판별하고, 더 나아가 몇 번째 인덱스에 있는지 알려준다. return 값은 Boolean이 아닌 number 타입이다.
const arr =[1, 2, 3, 4];
let number = 3;
console.log(arr.indexOf(number)); // 2 출력만약 값이 배열 안에 존재하지 않는다면 -1을 반환한다.
findIndex
findIndex는 배열의 처음부터 검색하다가 값과 일치하는 배열이 나오면 해당 인덱스를 반환한다. 여러 개의 값 중에서 제일 처음에 만난 값을 찾고 함수를 종료하므로 그 뒤에 똑같은 값을 가진 요소는 출력되지 못한다.
const arr = [
{ color : "red" },
{ color : "black" },
{ color : "blue" },
{ color : "green"}
];
console.log(arr.findIndex((elm)=> elm.color === "green")); // 3출력
// 중복된 값이 있을 경우
const arr = [
{ color: "red" },
{ color: "blue" },
{ color: "green" },
{ color: "black" },
{ color: "red" },
{ color: "blue" }
];
console.log(arr.findIndex((elm)=> elm.color === "blue")); // 1 출력
find
findIndex는 값을 검색해 해당 요소의 인덱스를 반환했지만 find는 요소 값 자체를 반환한다.
const arr = [
{ color: "red" },
{ color: "black" },
{ color: "blue" },
{ color: "green" },
{ color: "blue" }
];
let number = 3;
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"));
/*
[Object, Object]
0: Object
1: Object
출력
*/
slice
배열을 자르고 싶을 때 사용한다. 원하는 길이만큼 잘린 배열을 리턴한다.
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, 2));
// { num: 1, color: "red" }
// { num: 2, color: "black" }
// 두 개의 배열 반환참고로 slice 매개변수는 slice(begin, end)이며 begin부터 end-1까지 잘라 반환한다. 즉 begin 포함, end 미만의 배열을 반환한다.
concat
slice()처럼 자르는 게 아니라 배열을 붙이고 싶을 때 사용한다.
const arr1 = [
{ num: 1, color: "red" },
{ num: 2, color: "black" },
];
const arr2 = [
{ num: 3, color: "blue" },
{ num: 4, color: "green" },
{ num: 5, color: "blue" }
];
console.log(arr1.concat(arr2));
/*
[Object, Object, Object, Object, Object]
0: Object
1: Object
2: Object
3: Object
4: Object
*/
sort
배열 요소를 사전순대로 정렬하고 싶을 때 사용한다. 정렬 후 리턴 값은 존재하지 않고 원본 배열 자체를 정렬한다.
let chars = ["다", "나", "가", "마"];
chars.sort();
console.log(chars);
/*
(4) ["가", "나", "다", "마"] 출력
*/
그런데 문자가 아닌 숫자로 sort()를 하면 뭔가 좀 이상한 결과가 나온다.
let numbers = [0, 1, 3, 2, 10, 20, 30];
numbers.sort();
console.log(numbers); // (7) [0, 1, 10, 2, 20, 3, 30]0, 1, 2, 4, 10, 20, 30이 아닌 0, 1, 10, 2, 20, 3, 30으로 정렬이 된다. 이 이유는 sort()는 '사전순'으로 정렬하기 때문에 숫자 10의 10의 자리 숫자가 1이기 때문에 1 다음으로 정렬이 된 것이다. 이럴 때는 비교 함수 만들어서 같이 사용하면 된다.
let numbers = [0, 1, 3, 2, 10, 20, 30];
const compare = (a, b) => {
if(a > b) {
// 크다
return 1;
}
if(a < b) {
return -1;
}
// 같다
return 0;
}
numbers.sort(compare);
console.log(numbers); // [0, 1, 2, 3, 10, 20, 30]compare()의 원리는 a와 b를 매개변수로 받는다. numbers의 0과 1로 예를들어보자. a에는 0, b에는 1이 대입된다. 만약 a가 b보다 클 경우 a는 오른쪽으로 이동하게 되고, a가 b보다 작을 경우엔 음수 값을 리턴하여 왼쪽으로 이동하게 된다. 만약 a와 b가 같다면 자리를 옮기지 않는다. 0과 1의 경우 0이 더 작으니 0은 왼쪽으로 이동해 처음 자리에 그대로 있게된다.
만약 내림차순으로 정렬하고 싶은 경우에는 부등호를 반대로 수정하면 된다.
let numbers = [0, 1, 3, 2, 10, 20, 30];
const compare = (a, b) => {
if(a < b) {
return 1;
}
if(a > b) {
return -1;
}
return 0;
}
numbers.sort(compare);
console.log(numbers); // (7) [30, 20, 10, 3, 2, 1, 0]
join
join은 배열의 모든 문자열을 합쳐주는 메소드이다.
const arr = ["예뻤어", " 날 바라", "봐 주던", " 그 눈빛~"];
console.log(arr.join()); // 예뻤어, 날 바라,봐 주던, 그 눈빛~쉼표로 요소를 구분해 String으로 출력해준다. 쉼표가 보기 싫을 때는 join()의 매개변수로 "" 빈 문자열을 넣어도 된다. 즉, join의 매개변수는 구분자가 된다.
const arr = ["예뻤어", " 날 바라", "봐 주던", " 그 눈빛~"];
console.log(arr.join("")); // 예뻤어 날 바라봐 주던 그 눈빛~
