Class Student {
constructor(name,age,enrolled,score) {
this.name = name // 이름
this.age = age // 나이
this.enrolled = enrolled // 등록
this.score = score // 점수
}
}
// 아래 예시에 활용하기위한 Student Class를 만들었습니다.
const students =[
new Student('학생1',30,true,70),
new Student('학생2',25,false,65),
new Student('학생3',20,true,45),
new Student('학생4',28,true,90),
new Student('학생5',40,true,80),
]
// students 변수에는 5명의 학생들이 있는 배열을 가지고 있습니다.
배열에 관련한 다양한 배열함수들이 있어 공부해봤다. 아래에는 예시를 통해 이해한 것들을 적어보려한다.
1. map
map은 우선적으로 forEach와는 다르게 새로운 배열을 return 한다는 차이점이 있다.
// 예를 들어 학생들이 가지고 있는 점수만 배열로 반환하고 싶다라면?
const res = students.map(student => student.score) // 화살표함수 예시
const res2 = students.map((student) => {
return student.score
})
students 라는 배열을 map을 통해 순회한다 그리고 조건에 맞는 값들을 새로운 배열로 반환하게 되는데, 파라미터인 student가 가지고 있는 것을 본다면 students 값들이 나올텐데 그 중 student가 가지고 있는 점수들만 반환하는 것이 목적이였기에 student.score을 리턴하게 된다면 학생들이 가지고 있는 점수들만 반환하게 된다.
2. find
find는 뜻에서 오는 느낌과 같이 "찾는다"라는 의미가 강하게 느껴진다. 그렇기 때문에 배열내에 가지고 있는 값들중 어떠한 조건에 해당하는 값을 찾을 때 유용한 것 같다.
// 점수가 90점인 학생만을 반환하고 싶다라면
const res = students.find(student => student.score === 90) // 화살표 함수예시
const res2 = students.find(student => {
if(student.score === 90) {
return student
}
})
students가 가지고 있는 배열을 순회하며, 특정한 조건 => "학생의 점수가 90점과 같다" 이와 같이 해당하는 조건에 맞는 값이 있다면 90점의 학생의 값인 학생 4가 반환될 것이다.
3. filter
filter 또한 어느 특정한 조건들을 걸러서 그 값들을 반환한다는 영어해석 느낌이 강하다. 배열 값들중 특정한 조건에 맞는 값들을 반환해주는 함수이다. 그런데 위에서보면 find와 filter가 같은 의미이지 않나? 라고 생각할 수도 있는데
find는 배열조건에 해당하는 첫 번째요소를 반환하고 filter는 배열조건에 해당하는 모든 요소를 반환하는데 차이가 있다.
// 입학등록이 true인 학생들만 뽑아보기
const res = students.filter(student => student.enrolled === true) // 화살표 함수
const res1 = students.filter(student => {
if(student.enrolled) {
return student
}
})
해당하는 조건인 등록여부가 true인 학생들만 필터링하여 해당하는 학생들만 배열로 반환하는 것을 볼 수 있다.
4. some / every
some과 every는 같이 설명을 하자면 some -> 몇몇의 , every -> 모든 이라는 뜻에 맞게 some은 해당하는 조건들중 하나라도 조건에 만족하는 값이 있으면 true를 반환하고 every는 모든 조건에 해당해야만 true를 반환하게 되는 Boolean Type이다.
// 점수가 50점 이하인 학생이 있는가?
// some
const res = students.some(student => student.score < 50) // true
// every
const res = students.every(student => student.score < 50) // false
'리액트' 카테고리의 다른 글
Promise에 대해 (1) | 2024.12.09 |
---|---|
Math.min / max (0) | 2024.12.08 |
String.legnth 에 대하여 (0) | 2024.11.26 |
for문 이해하기 (1) | 2024.11.26 |
React find Method (0) | 2024.11.25 |