내일배움캠프 동영상 강의/내배캠_ React 입문

배열

콛 다이어리 2024. 9. 15. 00:16

push( )

배열.push( )

배열에 요소 추가

 

pop( )

배열.pop( )

배열의 마지막 요소 출력

 

map( )

배열.map(콜백함수( ))

원본 배열에서 각 요소를 가공한

새로운 배열을 리턴하는 함수

1) 배열 내의 모든 요소 각각에 대해

2) 주어진 함수를 호출한 결과를 모아

3) 새로운 배열을 반환

 

filter( )

배열.filter(콜백함수( ))

변수를 선언해서 사용해야 함

 

reduce

reduce(콜백함수(누적된 값, 일반 값))

배열의 각 요소에 대한 함수를 실행하고

결과를 누적해서 반환함

숫자던, 배열이던, 객체던

하나의 값으로 줄여 리턴하는 함수

// 숫자들의 합을 구하기

// 가장 큰 숫자 찾기

(누적기)

numbers.reduce(function (누적값, 일반값) {
  console.log("------");
  console.log(누적값);
  console.log(일반값);
});

// ------

// 1 → 최초 누적된 값

// 2 →  두번째 요소

// ------

// undefined

// 3

// ------

// undefined

// 4

// 5

// 처음 reduce를 할 때는

// 첫번째 요소가 누적된 값,

// 두번째 요소가 일반 값에 담긴다.

// 여기서 주목할 것 2가지!!

// map( ) 이나 filter( )의 경우에는

// (요소의 갯수만큼 도니까)

// 5번만 돌았겠지만

// reduce는

// 첫번째 ------ 부터 두번째 ------까지 한 번,

// 2부터 세번째 ------까지 두 번,

// 3부터 네번째 ------까지 세 번,

// 네번째 ------부터 5까지 네 번 돌았다.

// 왜냐하면,

// const numbers = [1, 2, 3, 4, 5]; 에서

// 1부터 2까지 한 번, 3, 4, 5까지 한 번씩

// 총 네 번이기 때문이다.

// 첫번째 요소 1은 누적된 값, 두번째 요소 1는 일반 값,

// 세번째, 네번째, 다섯번째의 3, 4, 5도 잘 들어갔다.

// (일반 값에)

// 하지만, 누적된 값은 두번째 순회할 때부터 undefined가

// 나오기 시작한다.

// 그래서 로직을

const result = numbers.reduce(function (누적값, 일반값) {
  console.log("------");
  console.log(누적값);
  console.log(일반값);
  return 누적값 + 일반값;
});

// 이렇게 변경한다면

// ------

// 1 (첫번째 값)

// 2 

// ------

// 3 (첫번째 값)

// 3

// ------

// 6 (첫번째 값)

// 4

// ------

// 10 (첫번째 값)

// 5

// return 에서 말하고 있는 값은

// 첫번째 요소들에 해당되는 누적된 값이다.

// return 문에서 말한 그 값이 다음에 순회할 때

// 바로 누적된 값을 들여오는 것이다

// 그래서 '누적기' 라고도 하는 것이다

 

sort

배열 순서를 변경

sort( )내 숫자를 넣지 않으면 문자열로 인식

배열.sort(function(a, b) {return b - a})

오름차순 정렬

배열.sort(function(a, b) {return a - b})

내림차순 정렬

문자열은 localeCompare

<블로그 내 다른 글 참고>