let template = `<div>
${
((item) => {
return item.map((x) => `<span class="genre">${x.name}</span>`).join("");
})(res.genres)
}
</div>`
api를 호출해서 스크립트 내부에서 html 요소를 생성하는 요구사항이 있었다.
템플릿 문자열을 활용하여 작성하려고 하였으나 genres 라는 요소는 배열 내부에 객체가 들어있는 형식이었기 때문에 html 문자열로 만들기 위해서는 추가적인 작업이 필요하였고 두 가지 방법이 떠올랐다.
- n개의 span 을 만들어 주는 함수 작성 & 템플릿 문자열 내부에서 사용
- 템플릿 문자열을 만든 뒤 for 문을 사용하여
genres요소 생성 및 문자열 붙이기
이 두 가지 방법을 함께 사용하여 템플릿 문자열 내부에서 익명함수를 활용 한다면 짧은 코드를 작성할 수 있을 것 같았다.
코드 해설을 하자면 이렇다.
익명함수 내부에서 for문대신 map함수를 쓰고 res.genres 라는 매개변수를 받아 item을 순회하면서 새 배열을 만들었다.
새 배열 안에는 템플릿리터럴로 만든 span요소의 문자열이 있는데 그걸 그냥 쓰게되면 배열로 값이 나오게 된다. 그거를 문자열로만 만들기 위해 join 이라는 메소드를 사용하였다.
join() 메서드만 사용할 경우 =>,가 기본적으로 붙어나오기 때문에 메서드 안에 ("")을 넣어서 구분자 없는 문자열을 만들었다.
값이 여러개 붙어서 나오게 하려면 div태그는 블록레벨이라 span태그로 옆에 붙도록 만들었다.
