낀대코딩

요즘 React, Vue, Angular 등 프레임워크/라이브러리를 이용한 SPA(Single Page Application)를 제작을 많이 하게 되는데 리스트를 페이징 보다는 more버튼으로 처리하고 있다. 대다수의 사용자들이 더보기 버튼을 더 선호하기 때문이라는 결과도 있고 페이징보다는 더보기 버튼이 리스트가 더 빠르다고 느끼기도 하는 거 같다.

앞으로도 많이 사용할거 같고, 공부하는 겸 가볍게 만들어본다.

[참고] brunch.co.kr/@blackindigo-red/13

1. 리스트 조건

실무를 할때엔 개발 document API 받아서 진행하므로 스터디 할땐,  DB 연결이나, 로컬스토어가 아닌 ajax를 사용하여 JSON파일의 데이터를 리스트로 구현해 보자.

[ 조건 ]

- 1025px 이상은 리스트 열 안에 4개씩, 8개씩 보이게

- 769px 까지는 리스트 열 안에 3개씩

- 500px 모바일에서는 열 1개씩

- 데이터 JSON으로 넘기기[mokup data]

- 썸네일 이미지는 크기 상관없이 중간에 위치

- 이메일은 한 줄 말줄임 처리

JSON 데이터는 아래 사이트에서 더미 데이터로 만들면 된다.
[mokup data] www.mockaroo.com/

2. 코딩

이번 리스트는 javascript를 연습하는 게 목적이고, 나중에 실무를 할 때 많은 데이터들을 동적으로 그려지는 게 유지보수, 운영이나 구축하는 데 있어 핵심이다고 생각하여 HTML 태그를 js에서 그려오는 형태로 제작하기로 했다.

<HMTL5>

<div class="wrap">
	<ul class="listWrap"></ul>
</div>

<JS>

"use strict";

const dataURL = './data/MOCK_DATA.json';
const _WRAP = document.querySelector('.wrap');
const _UL = document.querySelector('.listWrap');

const list = {
    init:function(){
    	// ajax로 데이터 불러오기
        list.ajax();
    },
    listView:function(data){
    	// Column안에 들어갈 리스트 그리기
        let _LI = document.createElement('li');
        _LI.className = 'list';
        _LI.innerHTML = `<div class="list-thum">
                            <img src="${data.img}" alt="img-${data.id}">
                         </div>
                         <div class="list-user">
                            <span>${data.username}</span>
                            <span>${data.date}</span>
                         </div>
                         <div class="list-email">${data.email}</div>`;
        return _LI;
    },
    more:function(length,max){
        //more button
        let _BTN = document.createElement('button');
        _BTN.className = 'btn-more';
        _BTN.innerText = 'more';
        return length > max && _WRAP.appendChild( _BTN ); 
    },
    ajax:function(){
        $.ajax ({
            type : 'get',
            url: dataURL,
            datatype : 'json',
            success : function(data){    
                const max = 8; // 최대 8개
                let start = 0; // 리스트데이터 시작번호
				
                // 처음 리스트 데이터
                for(let i=start;i<max;i++){
                    _UL.appendChild( list.listView( data[i] ) );
                }
				
                // 마지막 리스트 도달시
                const _P = document.createElement('p');
                      _P.innerText='...List END'; 
                
                let cnt = 1; // 버튼클릭수 
                list.more(data.length,max).addEventListener('click',function(e){
                    // 클릭수
                    cnt++;
                    
                    /***** 
                    * 보여질 데이터 초과시 
                    */
                    // 더보기버튼으로 불러올 리스트 개수
                    // data.length(총 데이터 개수) / max(최대 8개)
                    if( data.length / max < cnt ){
                        const target = e.target;
                        target.after(_P);
                        return false
                    };
					
                    // 다음 리스트 그리기
                    for(let i=max*(cnt-1);i<max*cnt;i++){
                        _UL.appendChild( list.listView( data[i] ) );
                    }
                });
            },
            error : function(err){
                 console.log('err : ',err)
            }
        })
    },
}

//리스트 그려지도록 선언
list.init();

3. 최종 화면단

이미지스러운 걸 넣으려고 인터넷에 떠돌아다니는 https://api.tvmaze.com/search/shows?q=batman 를참고했는데,

데이터 길이가 10개라서 1줄에 4개씩 처리하게 됐다.

코드는 위에 작성한 대로 사용했고, 다른  json 데이터를 가져와도 쉽게 고칠 수 있었다. 

다만 뭔가 좀 더 보기 쉽거나 간결하게 작성하는 방법은... object 보다는 함수로 작성하여 불러오는 게 낫나 싶기도 하다.

PC버전은 코드펜으로 넘어가서 확인하자 ㅎ.ㅎ

기본 연산자, 논리 연산자를 이용한 동적 셀렉트 박스를 구현하면서 javascript를 많이 경험해 보자

1. 연산자

수학 연산자

• 덧셈 연산자 +
• 뺄셈 연산자 -
• 곱셈 연산자 *
• 나눗셈 연산자 /
• 나머지 연산자 %
• 거듭제곱 연산자 **

var a = 3;
var b = 2;
var c = 4;

[나머지연산자]
a % b = 1  // 3을 2로 나눈 후 나머지 출력

[거듭제곱 연산자]
a ** b = 9   // a를 b의 수만큼 곱한 수 출력
a ** c = 81  // a를 c의 수만큼 곱한 수 출력

할당 연산자 = 

let a = 1;
let b = 2;
let c = 3 - (a = b + 1); //a = 3 , c = 0;

let aa, bb, cc;
aa = bb = cc = 2 + 3;  // aa = 5, bb = 5, cc = 5

// 위 코드와 동일한 코드, 가독성 좋게 줄을 나눠서처리
cc = 2 + 3;
bb = cc;
aa = cc;

복합 할당 연산자

let n = 5;
n += 3;     // n은 8
n *= 4;     // n은 32, 위 덧셈이 적용되어 8 *4 계산이 출력
n += 1 + 4  // n은 37

let a = 1, b = 1;
let c = ++a; // 2
let d = b++; // 1

let aa = 2;
let x = 1 + (aa *= 2);  // x = 5

증감 감소 연산자

See the Pen gOgxvEr by JNoony (@jnoony) on CodePen.

비트 연산자 : 인수를 32비트 정수로 변환하여 이진 연산을 수행

• 비트 AND &
• 비트 OR |
• 비트 XOR ^
• 비트 NOT ~
• 왼쪽 시프트(LEFT SHIFT) >>
• 오른쪽 시프트(RIGHT SHIFT) <<
• 부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) >>>

쉼표 연산자: 코드를 짧게 쓰려는 의도로 가끔 사용

let a = (1 + 2, 3 + 4);  // a = 7;

2. 비교 연산자

불린 형 반환

alert(2 > 1)   // treu
alert(2 == 1)  // false
alert(2 != 1)  // true

//반환된 변수 변수에 할당
let result = 5 > 4;
alert(result)  // true

문자열 비교

alert('z' > 'a');      // true
alert('pink' > 'red')  // false
alert('Bee' > 'Be')    // true
alert( '2' > 1 );      // true
alert( '01' == 1 );    // true

alert( 'c' == 'C' )   // false
alert( 'c' > 'C' )    // true
alert( 'c' < 'C' )    // false

문자열 비교 시 적용되는 알고리즘은 다음과 같습니다. (영어는 사전 순이 아니라 유니코드 순.)

unicode-table.com/kr/alphabets/english/

1. 두 문자열의 첫 글자를 비교
2. 첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자보다 크면(작으면), 첫 번째 문자열이 두 번째 문자열보다 크다고(작다고) 결론 내고 비교를 종료합니다.
3. 두 문자열의 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교합니다.
4. 글자 간 비교가 끝날 때까지 이 과정을 반복합니다.
5. 비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론 냅니다. 비교가 종료되었지만 두 문자열의 길이가 다르면 길이가 긴 문자열이 더 크다고 결론 냅니다.

일치 연산자

alert( 0 == false );    // true
alert( ' ' == false );  // true :: 동등모드
alert( 0 === false );   // false  ::엄격모드 

alert( null === undefined ); // false
alert( null == undefined );  // true

null vs 0  , 비교가 불가능한 undefined

alert( null > 0 );   // false
alert( null == 0 );  // false
alert( null >= 0 );  // true

alert( undefined > 0 );  // false 
alert( undefined < 0 );  // false 
alert( undefined == 0 ); // false 

3. if문

let year = prompt('오늘은 몇년도?', '');
if (year == 2021) {
  alert( "정답입니다!" );
}
else if(year > 2021) {
  alert( '년도를 내리시지' ); 
}
else {
  alert( '오답입니다!' ); 
}

4. 논리 연산자

• || (or)  :  result = value1 || value2;
• && (and)  : result = a && b;
• ! (not) : result =! value;
• ?? (null 병합)

alert( 1 && null && 2 );  // null
alert( null || 2 && 3 || 4 );   // 3

※ '??'와 '||'의 차이

let height = 0;
alert(height || 100);  // 100
alert(height ?? 100);  // 0, height가 null이나 undefined일 경우에만 100


let _height = null;
let _width = null;
let area = (_height ?? 100) * (_width ?? 50);

alert(area);  // 5000
alert(_height ?? (100 * _width) ?? 50)  // 0

5. while과 for 반복문

let i = 0;
while(i < 3){
   alert(i);
   i++;
} // 0,1,2가 출력됨

while(i){
   alert(i--)
} // 3,2,1 이 출력됨

do... while 반복문

let i = 0;
do{
   alert( i );
   i++;
} while ( i < 3 );  // 0,1,2 출력

for 반복문

for( let i = 0;i < 3;i++ ){
  alert(i)
} //0,1,2 출력

반복문 빠져나오기

let sum = 0;
while(true){
   let val = +prompt('숫자 입력','');
   if( !val ) break;  // 숫자 쓰는란이 ''이면 빠져나옴
   sum += val;  // 숫자 입력한 만큼 더해짐
}
alert('총: '+sum);  

다음 반복으로 넘어가기

for( let i=0; i<10; i++){
   if( i % 2 == 0){
      alert(i)
   } // 0,2,4,6,8
}

6. 정리한 내용 모아서 간단한 동적 Select Box 만들기

<!-- HTML5 -->
<h1>오늘 뭐 먹지?</h1>
<select id="sel">
  <option>--종류 고르기--</option>
  <option value="food1">양식</option>
  <option value="food2">한식</option>
  <option value="food3">분식</option>
  <option value="food4">중식</option>
  <option value="food5">일식</option>
  <option value="food6">패스트푸드</option>
  <option value="food7">편의점</option>
</select>

/*********
* javascript
*********/ 
//첫번째 셀박
let selBox = document.querySelector('#sel'); 

//첫번째 셀박의 selected 감지
selBox.addEventListener('input',function(e){
  // 배열오브젝트 데이터에 selected된 value값으로 filter
  let data = listData.filter(item => item.name === e.target.value);
  
  // 첫번째 value에 관련된 두번째 셀박 그리기
  secondSelBox(data[0].name, data[0].data);
  
  // 다음 선택시 이전 두번째 셀박 삭제하기
  document.querySelectorAll('select')[1].nextSibling.remove();
})

// 선택한 Element 다음형제 만드는 프로토타입 만들기
Element.prototype.appendAfter = function (element) {
    element.parentNode.insertBefore(this, element.nextSibling);
}, false;

// 두번째 셀박 그리기 함수
function secondSelBox(name,data){
  var sel = document.createElement('select');
  sel.id = 's-'+name;
  for ( let i=0,len = data.length; i<len;i++) {
    var opt = document.createElement("option");
    opt.value = data[i].val;
    opt.innerHTML = data[i].name;
    sel.appendChild(opt);
  } 
  sel.appendAfter(document.getElementById('sel'));
}



//데이터
var listData = [
  {
    name:"food1",
    data:[
      {val:'sec-food1',name:'돈까스'},
      {val:'sec-food2',name:'스테이크'},
      {val:'sec-food3',name:'폭립'}
    ],
  },
  {
    name:'food2',
    data:[
      {val:'sec-food1',name:'콩비지'},
      {val:'sec-food2',name:'보리밥'},
      {val:'sec-food3',name:'해물칼국수'}
    ]
  },
  {
    name:'food3',
    data:[
      {val:'sec-food1',name:'김밥'},
      {val:'sec-food2',name:'즉석떡볶이'},
      {val:'sec-food3',name:'쫄면'},
      {val:'sec-food4',name:'오뎅'},
      {val:'sec-food5',name:'비빔만두'}
    ]
  },
  {
    name:'food4',
    data:[
      {val:'sec-food1',name:'마라탕'},
      {val:'sec-food2',name:'꿔바로우'}
    ]
  },
  {
    name:'food5',
    data:[
      {val:'sec-food1',name:'초밥'},
      {val:'sec-food2',name:'다코야키'}
    ]
  },
  {
    name:'food6',
    data:[
      {val:'sec-food1',name:'감자튀김'}
    ]
  },
  {
    name:'food7',
    data:[
      {val:'sec-food1',name:'라면'},
      {val:'sec-food2',name:'커피우유'},
      {val:'sec-food3',name:'과자'},
      {val:'sec-food3',name:'아이스크림'}
    ]
  }
]

See the Pen ZELXyqw by JNoony (@jnoony) on CodePen.

브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능

1. 기본적인 사용방법

1) alert

메시지를 지정할 수 있는 경고 대화 상자

/*
* alert(message)
*/

var txt = 'alert! 경고!!';
function text(){ return 'alert! 경고!!' }

window.alert('alert! 경고!!')
alert('alert! 경고!!')
alert(txt)
alert(text())
//위의 4개의 alert는 동일한 결과를 도출한다

2) prompt

사용자가 텍스트를 입력할 수 있도록 안내하는 선택적 메세지를 갖고 있는 대화 상자

/*******************************************************
* prompt(title, [default]);
* Internet Explorer(IE)에서는 항상 '기본값’을 넣어주세요.
* prompt("Test", ''); <-- IE 사용자를 위한 매개변수 처리
********************************************************/

let year = prompt('오늘이 몇년도?', 2021);

alert(`오늘은 ${year}년 입니다.`); // 오늘은 2021년 입니다.

확인버튼 일경우	취소버튼 일경우

undefined : 값이 할당되지 않은 상태
null  :  존재하지 않는(nothing) 값, 비어 있는(empty) 값, 알 수 없는(unknown) 값

3) confirm

확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 모달 대화 상자

/*******************************************************
* confirm(question);
********************************************************/

let tired = confirm('피곤하십니까?');

alert( tired ); // 확인 -> true,  취소 -> false

확인	취소

불린형 : true, false를 나타낼 때

2. 활용 - form

간단한 form을 짜서 유효성 검사 경고창을 띄어보자

See the Pen jOyVymr by JNoony (@jnoony) on CodePen.

회원 목록 중 한 명 찾기

1. 재사용 할수 있는 코드 && 없는 코드

데이터 리스트를 임의로 정의해보자

var users = [
    {id:1,name:"Hoon",age:27},
    {id:2,name:"woong",age:29},
    {id:3,name:"jimin",age:26},
    {id:4,name:"K",age:32},
    {id:5,name:"Tom",age:28},

    {id:6,name:"TT",age:32},
]

/** 재사용 할수 없는 코드 **/
var user;
for(var i =0,len=user.length;i<len;i++){
    if(users[i].id == 3){
        user = users[i];
        break;
    }
} 
console.log( user ); // {id:3,name:"jimin",age:26}



/** 재사용 할수 있는 코드 **/
function findById(list,id){
    for(var i=0,len=list.length;i<len;i++){
        if( list[i].id == id) return list[i]
    }
}
console.log( findById(users,3) );  //{id: 3, name: "jimin", age: 26}

위와 같은 코드는 재사용할 수 있지만, 회원 리스트에서 아이디 값뿐 아니라, 나이, 이름으로도 찾고 싶을 수도 있는데 이럴 때마다 함수를 생성/선언해야 하기 때문에 위 코드는 함수 형적이지 않다.

2. 함수형 코드 만들기

function findBy(list,key,val){
    for(var i=0,len=list.length;i<len;i++){
        if( list[i][key] === val ) return list[i]
    }
}
console.log( findBy(users,'name','Hoon') ) //{id: 1, name: "Hoon", age: 27}

인자 값 key에 객체의 key값과 찾고자 하는 value값으로 찾을 수 있게 된 함수이다. 

하지만, 더 많은 예외가 있을 경우 처리가 어렵다

• key가 아닌 메서드를 통해 값을 얻어야 할 때
• 두 가지 이상 조건이 필요할 때
• ===이 아닌 다른 조건으로 찾고자 할 때

filter나 map처럼 인자로 키와 값 대신 함수를 사용하여 모든 상황에 대응 가능한 find함수를 만들어보자

function User(id,name,age){
    this.getId = function(){
       return id;
    }
    this.getName = function(){
       return name;
    }
    this.getAge = function(){
       return age;
    }
}
/* 새로운 데이터 리스트 생성 */
var users2 = [
    new User(1,'ID',32),
    new User(2,'AD',25),
    new User(3,'MJ',28),
    new User(4,'BJ',29),
    new User(5,'HA',24),
    new User(6,'HO',32),
]

/* 값대신 함수를 받아 처리 */
// 인자 predicate안에 함수식
// 인자 list 는 본문 맨위에 선언한 데이터
function find(list,predicate){
    for(var i=0,len=list.length;i<len;i++){
        if(predicate(list[i])) return list[i]
    }
}

console.log(
    find( users2, function(u){return u.getAge() == 25;} ).getName()
) // AD
console.log(
    find( users, function(u){return u.name.indexOf('j') != -1;} )
) // {id: 3, name: "jimin", age: 26}
console.log(
    find( users, function(u){return u.age == 32 && u.name == 'K'} )
) // {id: 4, name: "K", age: 32}
console.log(
    find( users2, function(u){return u.getAge() > 30} ).getName()
) // ID

3. 고차 함수 만들기

고차 함수란 함수를 인자로 받거나 함수를 리턴하는 함수
- 함수를 인자로 받아 필요한 때에 실행하거나 클로저를 만들어 리턴

find의 인자 predicate를 함수로 만들어서 인자 값 고차 함수 만들기

function bmatch1(key,val){
    return function(obj){
        return obj[key] === val;
    }
}
console.log( find(users, bmatch1('id',3) ) )        // {id: 3, name: "jimin", age: 26}
console.log( find(users, bmatch1('name','Hoon') ) ) // {id: 1, name: "Hoon", age: 27}
console.log( find(users, bmatch1('age',32) ) )      // {id: 4, name: "K", age: 32}

/**************************
*  여러 데이터 불러오기
*  전에 만들어뒀던 filter, map 활용 예):
***************************/
function filter(list, predicate){
    var new_list = [];
    for(var i=0,len=list.length; i<len; i++){
    	if(predicate(list[i])) new_list.push(list[i]);
    }
    return new_list;
}

function map(list, iteratee){
    var new_list = [];
    for(var i =0,len=list.length;i<len;i++){
        new_list.push(iteratee(list[i]));
    }
    return new_list;
}
console.log( filter(users, bmatch1('age',32) ) ) // 0: {id: 4, name: "K", age: 32}, 
                                                 // 1: {id: 6, name: "TT", age: 32}

4. 비교하는 함수 만들기

function object(key,val){
    var obj = {};
    obj[key] = val;
    return obj;
}

function match(obj,obj2){
    for(var key in obj2){
        if(obj[key] !== obj2[key]) return false;
    }
    return true;
}

function bmatch(obj2,val){
    if(arguments.length == 2) obj2 = object(obj2,val);
    return function(obj){
       return match(obj,obj2);
    }
}

console.log(
   match( find(users, bmatch('id',3)), find(users, bmatch('name','jimin')) )
) // true

console.log(
   find(users, function(u){return u.age == 32 && u.name == 'TT'}) 
) //{id: 6, name: "TT", age: 32}

>> [ 위 코드들 통합 ]

See the Pen qBqGNme by JNoony (@jnoony) on CodePen.

[출처::책] 함수형 자바스크립트
http://book.interpark.com/product/BookDisplay.do?_method=detail&sc.prdNo=272822398&gclid=EAIaIQobChMIi739ieqR7wIVOcEWBR2CgwMxEAQYASABEgLcrvD_BwE

[출처::책] 함수형 자바스크립트
http://book.interpark.com/product/BookDisplay.do?_method=detail&sc.prdNo=272822398&gclid=EAIaIQobChMIi739ieqR7wIVOcEWBR2CgwMxEAQYASABEgLcrvD_BwE

좋은 프로그램의 척도는 사용성, 성능, 확장성,
기획 변경에 대한 대응력, 효율적이고 생산적으로 성공적인 프로그래밍.

책에서 설명하고 있는 좋은 프로그램의 척도 이다.

프런트단을 코딩하다 보면 내가 과연 코드를 잘 짜고 있는지, 이게 유지보수에 쉬울지 가독성은 어떨지 고민하게 된다.

코딩을 가르쳐주셨던 선생님은 현재 문제에 급급한 코딩을 할게 아니라, 후에 유동적으로 덧붙이거나 재사용하거나, 변경하기 쉽게 라이브러리를 만든다 생각하며 구조를 짜는 게 기본적인 이해나 여러 예외처리를 접할 수 있어 경험적으로 굉장히 도움이 된다 하셨다. 이를 항상 생각하면서 코딩을 짜는데 이게 여간 어려운 것이 아니다.

높은 모듈화 수준은 생산성을 높이고
오류가 없는 함수들의 조합은 프로그램의 안정성을 만드는
성공적인 프로그래밍의 핵심. 

책에서는 filter, map, find 등 메서드 사용 전, 하드코딩으로 함수로 사용하는 방식으로 구조 파악용으로 진행하고 있다.

회원 목록 중 여러 명 찾기

1. 기본적인 함수형

/**********************
* 함수와 클로저를 이용한 
* 함수형 자바스크립트 스타일
**********************/

function addMaker(a){
    return function(b){
    	return a + b;   
    }
}

addMaker(10)     //function(b){return a + b;}
addMaker(10)(5); //15

var add5 = addMaker(5);
add5(3) //8
add5(6) //11

var add7 = addMaker(7);
add7(3)  //10
add7(10) //17

2. 실무에서 적용할 수 있는 함수형

/*******
* 실무적인 코드
*******/
var users = [
    {id:1,name:"ID",age:32},
    {id:2,name:"HA",age:25},
    {id:3,name:"BJ",age:28},
    {id:4,name:"PF",age:32},
]


var temp_users = [];
for(var i=0, len=users.length; i<len; i++){
    if(users[i].age<30) temp_users.push(users[i])
}
console.log(temp_users) //(2)[{...},{...}] , temp_users.length = 2;


// 위코드를 함수형으로 변경

/*
* filter
*/
function filter(list, predicate){
    var new_list = [];
    for(var i=0,len=list.length; i<len; i++){
    	if(predicate(list[i])) new_list.push(list[i]);
    }
    return new_list;
}
var users_under_30 = filter(users,function(user){return user.age < 30});
console.log(users_under_30.length) //2

var ages = [];
for(var i=0,len = users_under_30.length;i<len;i++){
    ages.push(users_under_30[i].age);	
}
console.log(ages) //(2) [25, 28]

- 절차 지향 프로그래밍은 위에서 아래로 내려가면서 특정 변수의 값을 변경해 나가는 식으로 로직을 만들고,

- 객체지향 프로그래밍은 객체들을 만들어 놓고 객체들 간의 협업을 통해 로직을 만든다.

- 함수형 프로그래밍에서는 항상 동일하게 동작하는 함수들을 만들고 보조 함수를 조합하는 식으로 로직을 완성한다.

/*
* map
*/
function map(list, iteratee){
    var new_list = [];
    for(var i =0,len=list.length;i<len;i++){
        new_list.push(iteratee(list[i]));
    }
    return new_list;
}

var users_under_30 = filter(users,function(user){return user.age > 30});
console.log(users_under_30) //(2) [{…}, {…}]


var ages = map(
   filter(users,function(user){return user.age > 30}),
   function(user){return user.age;}
)
console.log(ages) //(2) [32, 32]


function log_length(val){
    console.log(val.length);
    return val;
}
console.log(log_length(
   map(
      filter(users,function(user){return user.age < 30}),
      function(user){return user.age;}
   )
)) 
// 2             -->log_length함수안 콘솔값
// (2) [25, 28]  -->맨마지막 콘솔값

/*
* 함수를 리턴하는 함수 bvalue
*/
function bvalue(key){
   return function(obj){
      return obj[key];
   }
}

console.log(log_length(
   map(
      filter(users,function(user){return user.age < 30}),
      bvalue('age')
   )
))  // (2) [25, 28]

console.log(log_length(
   map(
      filter(users,function(user){return user.age < 30}),
      bvalue('name')
   )
))  // (2) ["HA", "BJ"]

>> 위 코드 통합본

See the Pen eYBojQa by JNoony (@jnoony) on CodePen.