꿈꾸는 개발자 지망생.
분류 전체보기 (101)
Daily Life (5)
세상살이 (0)
IT (74)
작업실 (1)
생각하자 (9)
게임 (10)
영화 (1)
보관소 (1)
119,184 Visitors up to today!
Today 31 hit, Yesterday 104 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으로 옮겨야겠다.

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

저작자 표시 비영리 변경 금지
신고
킷츄 | 2017.05.12 09:15 신고 | PERMALINK | EDIT/DEL | REPLY
http://stackoverflow.com/questions/4169832/update-my-github-repo-which-is-forked-out-from-another-project
킷츄 | 2017.05.12 10:14 신고 | PERMALINK | EDIT/DEL | REPLY
http://stackoverflow.com/questions/6119774/ssh-to-aws-instance-without-key-pairs
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

티스토리 툴바