map을 사용했는데 의도하지 않은 쉼표가 출력된다면?

발생한 문제

redux를 공부하던 중 의도하지 않은 상황이 발생했습니다

 

var state = store.getState();
document.querySelector('#toc').innerHTML = `
<nav>
    <ol>
        ${state.content.map(item => (
                `<li><a href="${item.id}.html">${item.title}</a></li>`
            )
        )}
    </ol>
</nav>

 

위와 같이 store에서 state를 가져온 다음 그 내부의 content 배열을 map함수를 활용해 순회하며 각 item의 id와 title을 template literals을 활용해 작성해 둔 html 태그와 결합, 출력하는 코드를 작성했는데

 

이처럼 의도하지 않은 쉼표 (,) 도 함께 출력되었습니다. 

원인

검색해보니 map 함수가 문자열 형태로 값을 리턴할 때는 (template literals로 결합한 내용도 문자열 형태로 리턴되는 값이죠) 기본적으로 쉼표(,) 로 묶어서 리턴한다는군요. 매번 react component에 props를 내릴 때만 사용하다 보니 몰랐습니다.

해결

원인을 찾고 보니 해결은 간단했습니다.

 

var state = store.getState();
document.querySelector('#toc').innerHTML = `
<nav>
    <ol>
        ${state.content.map(i => (
                `<li><a href="${i.id}.html">${i.title}</a></li>`
            )
        ).join('')}
    </ol>
</nav>
`

 

위와 같이 map 함수뒤에 join('') 을 추가해주니 의도하지 않은 쉼표가 사라지고 내용이 잘 출력되었습니다.

그러니까 이전에는 join(',') 가 기본적으로 붙어있던 것과 같았던거죠.

참고

Unexpected comma using map()