자바스크립트 회고록 - 1. 배열 나누기, 콤마 찍기
📌 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을 연결해서 사용하면 편할꺼 같다고 생각했지만 확장하면 충돌위험이 있다고 하니 안 쓰는게 좋겠다.
📌 2. 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를 변형된 문자열로 대입
Author And Source
이 문제에 관하여(자바스크립트 회고록 - 1. 배열 나누기, 콤마 찍기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yhj96/자바스크립트-회고록저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)