배열 길이를 넘어갈 때 순환 처리하는 방법 (% 연산자 활용)

프로그래머스

기존 코드

function solution(s, n) {
    const upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const lower = 'abcdefghijklmnopqrstuvwxyz';

    function increaseItem(sItem, type) {
        const itemIndex = type.indexOf(sItem);
        const len = type.length;
        const increaseIndex = itemIndex + n > len - 1 ? itemIndex + n - len : itemIndex + n;
        if (itemIndex !== -1) {
            return type[increaseIndex]; 
        }
        return sItem; 
    }

    const sArr =  s.split('').map((sItem) => {
        if (upper.includes(sItem)) return increaseItem(sItem, upper);
        if (lower.includes(sItem)) return increaseItem(sItem, lower);
        return sItem; 
    }).join('');
    
    return sArr;
}

 

알파벳이 소문자면 소문자 배열에서 n만큼 증가(대문자일 경우도)하도록 코드를 구현하였습니다.

❓if 문을 통한 index 계산

const increaseIndex = itemIndex + n > len - 1 ? itemIndex + n - len : itemIndex + n;

• itemIndex + n이 배열 길이를 초과하면 itemIndex + n - len으로 조정
• 그렇지 않으면 그대로 사용

인덱스는 0부터 시작하여 배열의 길이와 기준을 맞추기 위해서는 각각의 요소에 1을 더하거나 빼줘야 하며 if문을 써서 가독성이 좋지 못하다고 생각했습니다.

✅ 나머지 연산자를 통한 배열 순환

const increaseIndex = (itemIndex + n) % type.length

나머지 연산자를 활용하여 배열의 길이을 초과하면 자동으로 순환됩니다.

 

itemIndex = 3, type.length = 5, n = 4라고 가정해 봅시다.

• 기존 방식
  • 3 + 4 = 7
  • 7 > 4 이므로 7 - 5 = 2
• 나머지 연산자를 통한 방식
  • 7 % 5 = 2

이처럼 if문 없이도 간단하게 해결됩니다. if문을 사용하지 않으니 성능도 개선되었겠죠?

 

연산량 감소로 실행 속도가 빨라진 것을 확인할 수 있습니다.

 

이렇게 하다 보니 제 프로젝트의 이전/다음 버튼에서 페이지 순환 처리 방법을 나머지 연산자로 바꾸면 좋겠다고 생각했습니다.

기존 코드

const handlePrev = () => {
    const prevId = query > 1 ? query - 1 : MOCK_DATA.length;
    navigate(`?id=${prevId}`);
};

const handleNext = () => {
    const nextId = query < MOCK_DATA.length ? query + 1 : 1;
    navigate(`?id=${nextId}`);
};

• handlePrev: query > 1일 경우 현재 query에서 1을 빼서 이전 페이지로 이동합니다. query가 1일 경우에는 MOCK_DATA.length로 돌아가도록 설정해서 순환하도록 합니다.
• handleNext: query < MOCK_DATA.length일 경우 현재 query에서 1을 더해 다음 페이지로 이동합니다. query가 MOCK_DATA.length일 경우에는 1로 돌아가도록 설정해서 순환하도록 합니다.

나머지 연산자를 통한 페이지 순환

const handlePrev = () => {
    const prevId = (query - 1 + MOCK_DATA.length - 1) % MOCK_DATA.length + 1;
    navigate(`?id=${prevId}`);
};
    
const handleNext = () => {
    const nextId = query % MOCK_DATA.length + 1;
    navigate(`?id=${nextId}`);
};

• handlePrev: prevId가 음수가 나오면 안되므로 MOCK_DATE.length로 나누기 전 query에 -1, 그리고 MOCK_DATA.length - 1을 미리 더해준 후 나눕니다. id는 1부터 시작하므로 +1을 해줍니다. 
• handleNext: query % MOCK_DATA.length를 사용하여 query가 MOCK_DATA.length를 초과하면 다시 1로 돌아가게 처리합니다. 마지막에 + 1을 해줍니다.

프로젝트에서 테마가 여러 가지일 때 순차적으로 변경하는 경우나 배너에서 자동으로 다음 이미지를 보여주는 경우 등 이 방식을 활용하면 좋을 것 같습니다.