모던 자바스크립트 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 메서드처럼 평탄화 깊이를 지정하지는 못함 |
'Front-End > JavaScript' 카테고리의 다른 글
26장 ES6 함수 (모던 자바스크립트 Deep Dive) (0) | 2023.05.04 |
---|---|
17장 생성자 함수에 의한 객체 생성 20장 strict mode 22장 this (모던 자바스크립트 Deep Dive) (0) | 2023.04.28 |
27장 배열(~slice) (모던 자바스크립트 Deep Dive) (0) | 2023.04.22 |
45장 프로미스 (모던 자바스크립트 Deep Dive) (0) | 2023.04.18 |
19장 프로토타입[19.8절~19.14절] (모던 자바스크립트 Deep Dive) (0) | 2023.04.13 |