프로그래밍/HTML, CSS, JavaScript

[JavaScript] 원하는 조건의 배열값 가져오기(map, filter, find)

싯타마 2021. 5. 19. 13:06

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 사용법

- 첫 번째로 오는 글자를 나타내는 정규표현식 /^/