자바스크립트 회고록 - 1. 배열 나누기, 콤마 찍기

📌 배열의 요소들을 n개 만큼 묶어서 2차원 배열로 가져오기

로또 생성기를 만들던 중에 1차원 배열의 요소들을 n개씩 묶어서 사용하기 위해 함수를 구현했다.

const divide = (array, n) => {
    // (1)
    if(!Array.isArray(array)) return new Error("Not Array");
    const result = [];
    // (2)
    for (let i = 0, j = array.length; i < j; i += n) {
        // (3)
        const item = array.slice(i, i + n);
        result.push(item);
    }
    // (4)
    return result;
}

console.log(divide(1, 3));

📋 코드 동작 과정
① Array 정적 메소드인 isArray를 사용해서 Array인지 확인하고 !을 사용해서 Array가 아닐경우 오류를 던진다.
② 반복문 실행 핵심은 i += n 구문으로 반복횟수를 줄일 수 있다.
③ Array 프로토타입 메소드 slice를 사용해서 배열을 i ~ i + n 까지 나눈다. slice는 두 번째 요소는 (i + n - 1) 까지 복사한다. 그리고 result에 item을 넣어준다.
④ result 반환

🧩 Array.prototype에 연결하여 사용하기

// 위의 함수식을 Array.prototype 메소드로 넣어준다.
Array.prototype.divide = function (n) {
    // this는 Array 부분이다.
    const array = this;
    const result = [];
    for (let i = 0, j = array.length; i < j; i += n) {
        const item = array.slice(i, i + n);
        result.push(item);
    }
    return result;
}

console.log([1,2,3,4].divide(3));

💡 prototype에 연결하여 쓸려고 했지만 prototype에 연결하면 나중에 라이브러리나 패키지를 사용할 때 충돌할 위험이 있다고 해서 함수로 사용했다. index 파일에 prototype을 연결해서 사용하면 편할꺼 같다고 생각했지만 확장하면 충돌위험이 있다고 하니 안 쓰는게 좋겠다.

📌 Input-Value 값에 콤마 찍기

로또 생성기를 만드는 중에 input의 값을 숫자로 입력하는 부분에 1000000 이런 형태로 들어가면 가독성이 떨어져서 1,000,000 이런형태로 바꿔주기 위해서 콤마를 추가하는 함수를 고민했다.

// className = input인 요소 노드에 접근
const $input = document.querySelector(".input");
const makeComma = () => {
    // (1)
    const value = [...$input.value].filter((char) => char !== ',').join('');
    // (2)
    let resultInputValue = "";
    let count = 0;
    // (3)
    if (value.length < 4) resultInputValue = value;
    // (4)
    else for (let i = 0; i < value.length; i++) {
        // (5)
        if (i === 1) {
            resultInputValue += ',';
            count += 4;
        // (6)
        } else if (i !== 0 && count === i) {
            resultInputValue += ',';
            count += 3;
        }
        // (7)
        resultInputValue += value[i];
    }
    // (8)
    $input.value = resultInputValue;
}
// 이벤트 실행
$input.addEventListener("keyup", makeComma);

📋 코드 동작 과정
① input 요소 노드의 value 값이 들어올 때마다 문자열을 배열로 만들어서 콤마를 제거한뒤 문자열로 치환한다. (초기화)
② input.value 값으로 넣을 resultvalue를 초기화하고 count 변수를 만들어서 문자열의 길이를 카운팅한다.
③ 숫자가 3글자 이하일 때 예외처리
④ 4글자 이상일 경우 반복문 실행
⑤ 첫 번째 문자열 앞에 ',' 처리하고 첫 번째 자리를 제외하고 3개씩 묶어야 함으로 count에 4를 더해준다.
⑥ count의 값이 i이면서 i가 초기화인 0이 아닐경우 ',' 처리
⑦ 모든 요소의 문자열의 i를 넣기
⑧ input 요소 노드의 value를 변형된 문자열로 대입