본문 바로가기
Front-End/JavaScript

27장 배열(~ flatMap) (모던 자바스크립트 Deep Dive)

by kk님 2023. 4. 26.

모던 자바스크립트 Deep Dive 글 목록(스터디)
https://hello-kk.tistory.com/780

 

 

Array.prototype.메서드 정의 예시 특이점
join - 배열의 모든 요소를 문자열로 변환
- 요소를 '구분자'로 연결
const arr = ['hello','kk','!'] 
arr.join('-')
//'hello-kk-!'
파이썬은 구분자가 먼저 나옴
reverse 배열 순서를 반대로 변경 const arr = ['hello','kk','!'] 
arr.reverse()
//['!','kk',hello']
 
fill 1. 인수 1개
=> 첫번째 인수로 배열의 모든 요소 채움

2. 인수 2개
=> 첫번째 인수의 값을, 두번째 인수부터 채움

3. 인수 3개
=> 세번째 인수 직전에서 채우기 멈춤

4. 특정 요소로 채운 배열 생성

const arr = ['hello','kk','!'] 

1. arr.fill(0)//[0,0,0]

2. arr.fill(0,1) //['hello',0,0]

3. arr.fill(0,1,2) //['hello',0,'!']

4. const arr= new Array(3)
arr.fill('blog')
// ['blog','blog','blog']
원본 배열 직접 수정
↔ Array.from
includes 배열에 특정 요소 포함 여부 확인

1. 첫번째 인수
 => 검색 대상 지정

2. 두번째 인수
 => 시작할 인덱스

생략시 0, 음수 가능

3.
  true와 false를 반환값으로 갖기 때문에 indexOf보다 편리
flat 배열 평탄화
1. 기본값은 1
2. 2이상의 값 전달 가능
3. Infinity를 전달시 중첩배열 모두 평탄화
[1,[2,3],4].flat()
//[1, 2, 3, 4]

[1,[2,[3]],4].flat(2)
//[1,2,[3],4]
 

Array.from()은 마치,

const arr = new Array(length) 와 생성된 배열 안에 들어갈 요소를 채우는 과정이 합쳐진 것과 같은 것 같다

 

27.9 배열 고차 함수

고차 함수: 함수를 인수로 전달받거나 함수를 반환하는 함수

 

this를 쓴다면, 화살표 함수를 쓰자!

Array.prototype.메서드 기본 정의 목적 특이점
sort - 정렬(기본 오름차순)
- 내림차순 정렬 방법
 (1) 오름차순 정렬 후,
 (2) reverse()
정렬 1. 기본: 문자열 정렬
↔ 숫자 정렬: 정렬 순서를 정의하는 비교 함수를 인수로 전달(반환값이 0보다 큰지 아닌지)
반환값이 0보다 크면 두번째 인수를 우선 정렬
(a,b) => a-b //내림차순 정렬
2. 원본 배열 직접 변경
3. 객체를 요소로 하는 배열


forEach 1. 반환값 없음

2. 원본 배열을 변경하지 않음(가능은 함)

3. this를 일치시키기 위해 두번째 인수로 객체를 전달
=> 화살표 함수를 사용하면 해결!

4. break, continue 사용 불가

5. 희소 배열에서 요소가 존재하지 않는다면, 순회 대상에서 제외
단순 반복문을 대체하기 위한 고차함수 map과 유사

[차이점]
forEach는,
1. 반환값 없음(=  undefined)

2. 원본 배열을 변경 가능 ↔ map도 가능하지만, map은 새로운 배열을 반환하는 것이 목적이기 때문에, 권장하지 않음

3. 각 요소에 대해 특정 작업을 실행할 때 ↔ map은 새로운 배열을 만들 때

4. 희소배열

forEach의 세번째 인수
*this*

map 1. 새로운 배열을 반환

2. 희소 배열도 순회
=>호출한 배열의 length와 반환된 배열의 length 같다
   
filter 1. 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열 반환

2. 원본 배열 변경하지 않음
1. 필터링 조건을 만족하는 특정 요소만 추출하여 새로운 배열을 만들고 싶을 때 사용

2. 특정 요소를 제거하고 싶을 때.
특정 요소 모두를 제거하기 때문에,

하나만 제거하려면?

indexOf 메서드와 splice 활용
reduce 콜백 함수와 초기값을 전달받아, 하나의 결과값을 만들어 반환


자신을 호출한 배열의 모든 요소를 순회하며 하나의 결과값을 구해야 하는 경우에 활용

1. 평균
2. 최대값→Math.max권장
3. 요소의 중복 횟수
4. 중첩 배열 평탄화→flat권장
5. 중복 요소 제거→filter 또는 Set 권장
1. 초기값으로 0 뿐만 아니라, Set, 배열도 가능

2. 초기값 전달하기
some 콜백 함수의 반환값이 단 한번이라도 참이면 true, 모두 거짓이면 false 반환 배열 요소 중 조건을 만족하는 요소가 1개 이상 존재하는지 확인 빈 배열인 경우 늘 false 반환
every 콜백 함수의 반환값이 전부 참이면 true, 하나라도 거짓이면 false 반환 배열의 모든 요소가 조건을 만족하는지 확인 빈 배열인 경우 늘 true 반환
find 1. 반환값이 true인 첫 번째 '요소' 반환(인덱스 아님)
=> 하나만 반환

2. true인 요소가 없다면 undefined 반환
   
findIndex 1. 반환값이 true인 첫 번째 '인덱스' 반환
=> 하나만 반환

2. true인 요소가 없다면 -1 반환
   
flatMap map 메서드와 flat 메서드를 순차적으로 실행한 효과 map 메서드를 통해 생성된 새로운 배열을 평탄화 1단계 평탄화만 가능
=> flat 메서드처럼 평탄화 깊이를 지정하지는 못함