배열 메소드 map 사용시 쉼표가 반복되어 나오는 현상??

map 메소드를 사용할떄  , (쉼표)가 반복되어 나오는 상황이 생겼다, 리엑트만 이용할떄는 항상 쉼표없이 출력이 되었는데 순수 자바스크림만 활용해서 사용하는데 쉼표가 출력되는 현상이 있어 글로 남기고자한다.

 

의도치 않은 현상

 

const template = [축구, 농구 ,족구 ,배구]

($('#root') as HTMLUListElement).innerHTML = data
    .map(v) => {
      return `<p>${v.name}</p>`;
    })

출력되는 화면

쉼표가 생기는 윈인

map 함수가 문자열 형태로 값을 리턴할 때는 (template literals로 결합한 내용도 문자열 형태로 리턴된다고 한다)

기본적으로 쉼표(,) 로 묶어서 리턴이 된다고 한다.

 

해결

해결 방법은 정말 간단하다

map함수 끝나는 뒷부분에 join("")을 해주면 해결된다

let result: string[] = ['축구', '농구', '족구', '배구'];

($('#root') as HTMLDivElement).innerHTML = result
  .map((v) => {
    return `<div>${v}</div>`;
  })
  .join('');

이러한 쉬운 방법으로 해결되었다!!