[React.js] React 사용을 위한 자바스크립트 기본 - 3 (배열 내장함수)

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

includes는 주어진 배열에서 값이 존재하는지, 아닌지에 대한 결과를 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("")); // 예뻤어 날 바라봐 주던 그 눈빛~

저작자표시 비영리 변경금지

배열의 내장함수

forEach

Map

includes

indexOf

findIndex

find

filter

slice

concat

sort

join

티스토리툴바