1. map()
map은 array의 안의 배열들을 호출하고 제공된 조건의 새로운 배열로 할당된다. 이때 기존 array와 같은 길이를 가진다.
-예시
const numbers = [1,2,3,4]
const a = numbers.map(number => number < 3)
console.log(a)
numbers의 값인 [1, 2, 3, 4]에서 값이 3 미만(<3)인 값들은 true, 초과인 값은 flase로 반환되고
a변수에 새로 할당된다.
2. filter()
filter는 array의 안의 배열들을 호출하고 조건에 맞는 값들만을 새로운 array로 할당할 수 있다. map과 달리 논리 값이 아닌 배열 값을 리턴하고 기존 array와 길이가 다를 수 있다.
-예시
const numbers = [1,2,3,4]
const a = numbers.filter(number => number < 3)
console.log(a)
numbers의 값인 [1, 2, 3, 4]에서 값이 조건 3미만(<3)에 true이면 리턴되고 false이면 리턴되지 않는다.
따라서 변수 a에는 [1,2]가 할당된다.
3. find()
find는 조건에 맞는 첫번째 값을 찾아서 리턴해준다.
const numbers = [1,2,3,4]
const a = numbers.find(number => number > 2)
console.log(a)
number이 [1, 2, 3, 4]인 배열에서 2 이상인 값 중 첫 번째인 값을 리턴한다.
따라서 변수 a에는 3이 리턴된다.
*findIndex()
findIndex()는 조건에 맞는 첫번쨰 값의 index값을 리턴한다.
- 예시
const transports = ['Car', 'Bike', 'Bus']
const a = transports.findIndex(transport => /^B/.test(transport))
console.log(a)
transport 배열에서 B로 시작하는 첫 번째 값의 index값을 리턴한다.
따라서 변수 a에는 Bike의 인덱스 값인 1이 리턴된다.
4. 배운점
- 콜백 함수 map, filter, find 사용법
- 첫 번째로 오는 글자를 나타내는 정규표현식 /^/
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
[HTML] Grouping Content 모음 (0) | 2022.03.29 |
---|---|
Node.js 재설치 npm 오류 /npx create-react-app Error: EPERM: operation not permitted오류 (0) | 2022.02.22 |
[JavaScript] 형 변환, 문자형을 숫자형으로 변경하는 법(parseInt, parseFloat) (0) | 2021.05.18 |
[JavaScript] 프로그래머스_가운데 글자 가져오기(substr() 사용하기) (0) | 2021.04.28 |
[HTML,CSS,JavaScript] jQuery 섹션 이동 버튼 만들기, 원하는 태그로 이동 하는법 (0) | 2021.04.24 |