리액트로 컴포넌트를 구현하면서 부딪혔던 이슈.
길이가 n 인 배열이 존재하고, 각 인덱스에는 0 이상의 정수가 들어있다.
각 인덱스에 해당하는 내용을 가진 DOM요소를 인덱스에 해당하는 정수의 크기만큼 반환해야 한다.
우선 내가 기존에 알고있던 Javascript로 해보자.
var array = [0, 1, 0, 2, 3, 1],
result = '';
for ( var i = 0; i < array.length; i++ ) {
for ( var j = 0; j < array[i]; j++ ) {
result += '' + i + '
';
}
}
console.log( result );
// "1
3
3
4
4
4
5
"
배열 처리 펑션 reduce를 홀용해본다.
왠지 for문을 중첩해서 쓴 것보다 더 지저분해보인다. 난 for를 지우고싶다곸ㅋㅋ
var array = [0, 1, 0, 2, 3, 1];
var result = array.reduce(function(prev, curr, idx) {
var _result = '';
for ( var i = 0; i < curr; i++ ) {
_result += '' + idx + '
';
}
return prev + _result;
}, '');
console.log( result );
// "1
3
3
4
4
4
5
"
구글링하다가 Stackoverflow에서 Lodash를 사용한 코드를 봤다.
왠지 모르게 자꾸만 써보고싶은 Arrow function까지 같이 써보자.
const array = [0, 1, 0, 2, 3, 1];
// prev: 이전 작업 결과
// curr: 현재 요소의 실제 값
// idx: 현재 요소의 인덱스
let result = array.reduce((prev, curr, idx) => {
// curr: 작업을 반복할 횟수
// v: 현재 요소의 실제 값
// i: 현재 요소의 인덱스
return prev + _.times(curr, (v, i) => {
return '' + idx + '
';
}).join('');
}, '');
// _.times() 펑션은 인자로 넘겨진 함수에서 반환한 값을 담은 curr 길이의 배열을 리턴한다.
// _.times()에 넘겨준 펑션이 반환한 문자열 배열을 join()으로 하나의 문자열로 묶고,
// Array.reduce() 펑션으로 초기 문자열 ''에 모두 더해준 것.
console.log( result );
// "1
3
3
4
4
4
5
"
블로그를 github으로 옮겨야겠다.
코드 쓰기 너무 귀찮음.. 유유