[React] includes() 사용하다가 find()로 바꿨다.

# 배경

리스트에서 이름과 주민등록번호가 동일하면 가격을 합쳐주는 코드를 짰다.

이름과 주민등록번호 같은걸 매칭할 때 includes()를 사용했다. 

그런데 이름에 삼성전자, 삼성이 있으면 삼성의 가격들이 삼성전자 가격에 합쳐졌다.

테스트를 할 때 이름을 다양하게 쓰다가 발견을 했다.

 

String을 찾을 때 정확히 다 매칭되는 경우 가격이 합치는걸로 사용로 했다.

 

# 리스트 정보 => 변수명 : list

id	이름	등록번호	수량	금액
1	지니	990101-2******	3	6272
2	지니	990101-2******	1	1830
3	유지니	990101-2******	2	3660
4	유지니	990101-2******	22	55318
5	유지니	990101-2******	2	4442
6	지니	990101-2******	3	12728
7	지니	990101-2******	4	6272
8	유지니	990101-2******	1	5881
9	유지니이다	990101-2******	7	6272
10	유지니이다	990101-2******	2	4442

 

# includes()

- 배열에서 특정 요소가 존재 여부를 체크하는 메서드

- 반환값은 true, false로 나온다.

- 순회기능은 없다. 그래서 map를 사용했다.

        list.map((v) => {
            if (
                v.donorName.includes("지니") &&
                v.registrationNo.includes("990101-2******")
            ){
                InfoIncludes.quantity = InfoIncludes.quantity + v.quantity;
                InfoIncludes.amount = InfoIncludes.amount + v.amount;
            }
        })

- map으로 list를 순회하면 배열에 "지니"와 "990101-2******" 값이 있으면 수량과 금액을 합쳐준다.

- "유지니", "유지니이다" 다 포함이 된다.

- 결과값:  quantity: 47, amount: 107117

---

# find()

- 배열에서 특정 조건을 만족하는 요소를 검색할 때 사용한다.

- 순회 기능이 있어서 map를 사용하지 않아도 된다.

      list.find((record) => {
            if (
                record.donorName === "지니" &&
                record.registrationNo === "990101-2******"
            ){
                InfoFind.quantity = InfoFind.quantity + record.quantity;
                InfoFind.amount = InfoFind.amount + record.amount;
            }
        });

- list를 돌면서 "지니"와 "990101-2******" 값이 정확히 일치하는 경우에만 수량과 금액을 합쳐준다.

- "유지니", "유지니이다" 다 포함되지 않는다.

- 결과값 : quantity: 11 , amount: 27102 이다.

---

그런데 find 말고 map를 사용해도 되는거 아닌가? 라고 생각이 들어서 find() 대신 map으로 변경했다.

    list.map((record) => {
            if (
                record.donorName === "지니" &&
                record.registrationNo === "990101-2******"
            ){
                InfoMap.quantity = InfoMap.quantity + record.quantity;
                InfoMap.amount = InfoMap.amount + record.amount;
            }
        });

- 각 배열 요소를 변환한 후 새로운 배열로 반환하는 메서드

- map를 사용하여 수량이나 금액을 누적시키는 건 적합하지 않다.

- 수량이나 금액을 누적 시키는 경우 forEach() 메서드를 사용한다.

- 결과값은 quantity: 0, amount: 0

 

---

자바스크립트와 친해지는 중.....