Array.reduce 활용

배열에 담겨있는 데이터들을 가지고 HTML로 찍어낼 때 활용하기 좋은 reduce 함수 샘플

 

<header id="header"></header>

안에 네비게이션 메뉴를 만든다.

// 페이지 헤더 데이타
var menus = [{
    id: 'menu-'+create_UUID(),
    url: 'index.html',
    title: '홈'
}, {
    id: 'menu-'+create_UUID(),
    url: 'post.html',
    title: '게시판'
}];

$("#header").html(`<nav class="navbar " id="mainNav">
    <ul class="navbar-nav ml-auto">
      ${menus.reduce((previous,current,currentIndex)=>{
            return `${currentIndex > 0 ? previous : ''}
              <li class="nav-item">
                <a class="nav-link" id="${current.id}" href="${current.url}">${current.title}</a>
              </li>`
        }, menus[0])}
    </ul>
</nav>`);