꿈꾸는 개발자 지망생.
분류 전체보기 (101)N
Daily Life (5)
세상살이 (0)
IT (74)N
작업실 (1)
생각하자 (9)
게임 (10)
영화 (1)
보관소 (1)
105,100 Visitors up to today!
Today 9 hit, Yesterday 134 hit
2017.03.28 21:43


리액트로 컴포넌트를 구현하면서 부딪혔던 이슈.

길이가 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으로 옮겨야겠다.

코드 쓰기 너무 귀찮음.. 유유

저작자 표시 비영리 변경 금지
신고
Name
Password
Homepage
Secret
2017.03.23 15:07


https://www.tensorflow.org/


나중에 한번 보자!

저작자 표시 비영리 변경 금지
신고
Name
Password
Homepage
Secret
2017.03.22 11:22


ES6 스펙 트래킹 : )


https://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/


저작자 표시 비영리 변경 금지
신고
Name
Password
Homepage
Secret

티스토리 툴바