JS array.includes는 어떻게 동작할까

고병찬·2024년 8월 2일

TIL

목록 보기
10/54

투두를 드래그앤드롭했을 때 순서를 변경해줘야 하는데 드래그앤드롭은 현재 선택된 날짜와 카테고리로 필터링된 리스트 안에서 일어난다. 그래서 리스트 안에서만 순서가 유니크한지 확인한다면 전체 투두에서 순서가 중복될 가능성이 있다. 서버에서는 순서가 한 유저가 가진 투두 내에서 유니크함이 보장돼야 한다. 그래서 처음에 전체 투두를 받아올 때 전체 투두의 순서만 따로 빼서 existingOrders라는 리스트를 정의해두고 드래그앤드롭 이벤트로 순서가 변경되었을 때 새로 생성된 순서가 이미 존재하는지 확인하는 함수를 만들어야했다.
이때 lexorank 라이브러리에서 최소와 최대값에 도달했을 때 genNextgenPrev가 어떻게 동작하는지도 생각해봐야할 것 같다. 이것도 시간 나면 코드를 한번 봐볼 것.

// 모든 기존 todos의 order 값 추출
existingOrders = 모든 데이터에서 order 값 추출

// 새로운 order가 겹치지 않도록 보장하는 함수
함수 generateUniqueOrder(proposedOrder):
    uniqueOrder = proposedOrder
    conflict = existingOrders에 uniqueOrder가 있는지 확인

    // 중복된 order가 존재할 경우 새로운 order 생성
    while conflict:
        uniqueOrder를 다음 순서로 업데이트
        conflict를 다시 확인

    반환 uniqueOrder

대략 이런 흐름이지 않을까.

conflict를 확인하는 방법으로 간단하게는 JS에서 배열에 요소가 존재하는지 확인하는 array.includes 메소드를 써도 될 것 같다. 근데 existingOrders는 이미 오름차순으로 정렬된 리스트이다. 서버에서 정렬해서 보내준다. 그러면 이진 탐색으로 찾으면 더 빠르지 않을까array.includes는 얼마나 빠를까 시간복잡도가 얼만지 궁금했다.
찾아보면서 신기한건 array.includes가 어떻게 동작해야 하는진 pseudo 코드로 설명되어 있다는 거다. 아무튼 신기하다. 새로운 세계 ECMAScript가 무슨 약속이었나 그런거라고 얼핏 들은 것 같기도... 한번 나중에 찾아서 정리해서 블로그 써보고 싶다.

Mozilla, ecma
pseudo 코드대로라면 시간복잡도는 O(n)이 되겠다.
암튼 이진탐색을 직접 구현해서 하면 O(logN)으로 좀 더 빨라지지 않을까 생각함! 근데 나중에 시간 나면 해야겠다.

profile
안녕하세요, 반갑습니다.

0개의 댓글