[React #7] 자바스크립트 배열 내장 함수

01. includes()

• 주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 boolean 식으로 리턴
• 값과 타입 둘 다 포함해서 확인을 함 ('==='과 같은 의미)

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

let number = 3;
console.log(arr.includes(number)); // true

 

 

 

02. indexOf()

• 주어진 배열에서 전달받은 인자와 일치하는 값의 인덱스를 리턴
• 배열에 일치하는 값이 없을 때 '-1'을 리턴함

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

let number = 3;
console.log(arr.indexOf(3)); // true

 

 

 

03. findIndex()

• 주어진 배열에서 조건과 일치하는 값의 인덱스를 리턴
• 일치하는 요소과 중복된다면 배열의 앞 순서의 인덱스만 리턴

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

console.log(arr.findIndex((elm) => elm.color === "green")); // 3

 

✏️ 인덱스 말고 그 요소에 직접적으로 접근하고 싶을 때 (아래 find로 쉽게 할 수 있음)

const idx = arr.findIndex((elm) => elm.color === "green");
console.log(arr[idx]); // {color: "green"}

 

 

 

04. find()

• 주어진 배열에서 조건과 일치하는 요소 자체를 리턴

const idx = arr.find((elm) => elm.color === "green");
console.log(idx); // {color: "green"}

 

 

 

05. 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")); //(2) [Object, Object]

 

 

 

06. slice()

• 배열을 자르고 싶을 때 사용
• slice(begin, end) : begin부터 end에서 한 개를 뺀 요소를 리턴

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));
// 0: Object
// 	num: 1
// 	color: "red"
// 1: Object
// 	num: 2
// 	color: "black"

 

 

 

07. concat()

• 배열을 합치고 싶을 때 사용

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

const arr02 = [
  { num: 4, color: "green" },
  { num: 5, color: "yello" }
];

console.log(arr01.concat(arr02)); // (5) [Object, Object, Object, Object, Object]

 

 

 

08. sort()

• 원본 배열의 순서를 정렬할 때 사용
• 정렬된 배열을 반환하는 것이 아닌 원본 배열을 정렬
• 문자열을 기준으로 정렬

// 문자
let chars = ["나", "다", "가"];

chars.sort();

console.log(chars); // (3) ["가", "나", "다"]


// 숫자
let numbers = [5, 3, 0.5, 1, 100];

numbers.sort();

console.log(numbers); // (5) [0.5, 1, 100, 3, 5]

 

 

✅ 숫자로 정렬할 때는 인자로 비교함수를 만들어서 넣어주기

let numbers = [5, 3, 0.5, 1, 100];
const compare = (a, b) => {
  if (a > b) {
    // 크다
    return 1;
  }
  if (a < b) {
    // 작다
    return -1;
  }
  // 같다
  return 0;
};

numbers.sort(compare);

console.log(numbers); // (5) [0.5, 1, 100, 3, 5]

 

 

 

09. join()

• 배열 내에 모든 요소들을 쉼표로 구분하여 문자열 하나로 합쳐서 리턴
• 기본은 쉼표이지만 구분자를 설정하려면 () 괄호 안에 넣어 전달하면 됨
  ex.  (" ") 공백을 넣어주면 공백으로 구분하여 리턴

const arr01 = ["안녕", "하세요", "리엑트", "연습 중", "입니다."];

console.log(arr01.join()); // 안녕,하세요,리엑트,연습 중,입니다.
console.log(arr01.join(" ")); // 안녕 하세요 리엑트 연습 중 입니다.

const arr02 = [
  { fruit: "apple" },
  { fruit: "banana" },
  { fruit: "kiwi" },
  { fruit: "strawberry" }
];

console.log(arr02.map((elm) => elm.fruit).join()); // apple,banana,kiwi,strawberry

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'