한입 크기로 잘라먹는 리액트(React.js)-section2.배열 내장함수

const job = '프론트엔드';·2023년 8월 10일
0
post-thumbnail

배열 ⭐내장함수⭐

01 forEach

마치 for문을 사용하듯이 배열의 요소를 하나 하나 출력이 가능

  • forEach 내부는 마치 콜백함수처럼 생김(화살표 함수가 아닌 function함수 형태를 써줘도 됨)
  • 제시된 배열을 순회해서 파라미터(인자 혹은 매개변수)에 하나씩 담는 형식 !

feat. push

  • 배열에 가장 마지막부터 차례대로 추가하는 기능

02 map

배열의 모든 요소를 원정하면서 어떠한 연산을 수행한 값을 별도의 배열형태로 반환에 유용

  • map의 내부도 콜백함수가 쓰임
  • 콜백함수 내부에는 return이 가능
  • 제시된 배열 내부 요소에 한번씩 콜백함수가 수행되는데, 한번씩 return도 함
  • 위 forEach함수와 push를 함께 사용했을 때 결과값이 같지만 코드가 더 간소함

03 includes

전달받은 인자와 값이 일치하는 값이 있는지 묻는 내장함수

  • 해당 배열 value(요소)값에 해당 값이 포함되어 있어?
  • === 연산처럼 타입도 비교함
  • 있으면 true반환 / 없으면 false반환

04 indexOf

인자가 존재하는지 and 존재하면 몇 번째 인덱스에 있는지 반환하는 함수 (존재하면 인덱스 값을 반환

  • 만약에 존재하지 않는다면 무조건 -1을 반환
  • 또한 === 연산처럼 타입까지 비교

05 findIndex

해당 배열의 요소를 인자값으로 받아 한번씩 순회하면서 최초 일치하는 인덱스 값을 반환하는 기능(중복되더라도 제일 처음 만나는 인덱스 값을 반환)

  • 배열 안에 value가 객체 형태라면 유용함
  • findIndex(콜백함수)형태

06 find

배열내 객체 요소에 직접 접근하고 싶을때 사용

  • 배열 안에 일치하는 값이 있으면 index 값을 반환하는 것이 아니라 조건에 일치하는 요소를 그냥 가져옴
  • 사용방법은 findIndex와 동일함

07 filter

배열 안에 일치하는 값이 있으면 해당 객체의 모든 요소를 가져다 줌

  • 배열을 필터링하는 기능

  • 중복이면 중복되는 객체의 모든 요소를 가져다 줌

  • 그래서 배열에서 특정 조건에 만족하는 요소를 다시 배열로 반환 받을 때 유용

08 slice

배열의 범위를 정해서 잘라내는 기능

  • 2개의 파라미터를 전달 : slice(시작지점, 마지막) 그러면 시작지점부터 마지막 이전 인덱스까지만 반환
  • 파라미터로 아무것도 전달하지 않으면, 해당 배열 전체 요소를 slice하겠다는 것

09 concat

배열을 연결하는 기능

const gazero1 = [
  { num: 1, color: "red" },
  { num: 2, color: "orange" },
  { num: 3, color: "yellow" },
];

const gazero2 = [
  { num: 4, color: "green" },
  { num: 5, color: "blue" },
  { num: 6, color: "purple" },
  { num: 7, color: "red" },
];

gazero1.concat(gazero2);
// 첫번째 배열 : gazero1
// 뒤로
// 두번째 배열: gazero2 가 연결
  • 첫번째 명시된 배열 뒤로 두번째 명시된 배열이 연결

10 sort

배열을 사전순 정렬하는 기능

  • 원본 배열을 정렬해줌(반환하지 않음)

숫자의 경우에도 사전순으로 정렬되기 때문에 대소와 관계없이 정렬됨

  • 대소 비교 함수를 만들어야함

11 join

배열의 요소 값을 합쳐서 문자열로 반환하는 기능

  • 하지만 ','구분되어 하나로 합쳐짐
  • join에 전달하는 것은 구분자 역할을 함(아무것도 전달하지 않으면 초깃값이 ','컴마임)
  • 전달 인자에는 뭐가 들어가도 상관없음
profile
`나는 ${job} 개발자`

0개의 댓글