fn함수 리턴 값 순서에 관한 질문 입니다.

함수로 전달되는 tags 매개변수는 "${v.name}", "${v.items}"와 같이 "${ }" 부분을 기준으로 나뉘어진 배열로 전달됩니다. 따라서, fn`welcome ${v.name} !!주문가능항목${v.items}`는 ['welcome ' , ' !!주문가능항목', ''] 와 같은 tags 배열이 전달됩니다. 순차적으로 각각 tags[0], tags[1], tags[2]가 되는 것이구요. "tags[0] + name + tags[1] + items + tags[2]"는 'welcome ' + name + ' !!주문가능항목' + items + '' 처럼 조립이 되어 원하는 HTML 구조를 형성할 수 있습니다. welcome ${v.name} !! 주문가능항목 ${v.items} 와 같이 말이죠. 하지만, items와 tags[2]의 순서를 바꾸어 tags[2] + items를 반환하면, 겉으로는 정상적으로 보이지만, 실제로 형성된 HTML 구조는 의도와는 다름을 알 수 있습니다. welcome ${v.name} !! 주문가능항목 ${v.items} 맨 마지막 줄이 바뀌었음을 알 수 있습니다. 다음과 같이 console.log() 함수를 통해 변수를 확인해보면 더 자세히 알 수 있습니다. const data = [ { name: "coffee-bean", order: true, items: ['americano', 'milk', 'green-tea'] }, { name: 'starbucks', order: false }, { name: 'coffee-king', order: true, items: ['americano', 'latte'] } ] function fn(tags, name, items) { if(typeof items === "undefined") { items = "주문가능한 상품이 없습니다"; } console.log(tags); return tags[0] + name + tags[1] + items + tags[2]; } data.forEach((v) => { let template = fn`welcome ${v.name} !! 주문가능항목${v.items}`; console.log(template); document.querySelector("#message").innerHTML += template; });

fn

문법 중 하나로 ' 문자가 아닌 `문자를 사용하셔야 합니다. 키보드에서 tab키 바로 위에, 숫자 1 좌측에 있는 키로, 키 입력이 영문일 때 `문자를 입력하실 수 있습니다. 아래 링크의 Description 부분과 Tagged templates 부분 설명을 참고하시면 도움되실 것 같습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

tag가 병렬이 아닌 경우라면?(depth가 있는 경우)

`` 문법을 통해 함수로 전달되는 tags 매개변수는 "${ }"를 기준으로 구분되어 전달되기 때문에 depth를 가지는 형태가 불가능할 것으로 생각됩니다. 처음에 template을 초기화할 때, let template = fn`welcome ${v.name} !! 주문가능항목${v.items}`; 와 같이 Bold 부분의 HTML 태그를 "${ }" 앞뒤로 추가해줘도 결국 구분되어 전달됩니다. tags를 출력해보면, ["welcome ", " !! 주문가능항목", ""] 와 같이 나타납니다. 또한, 반환되는 값은 결국 document.querySelector("#message").innerHTML에 할당되기 때문에 제대로된 HTML 구조의 문자열만 잘 반환하면 괜찮습니다. 의도하신 질문이 이게 맞을까요?? 도움이 되셨길 바랍니다.

가짜배열을 진짜배열로

네! ES6 이전과의 차이를 보여주려고 일부러 사용하신 것 같습니다. 감사합니다.

a에 값을 안 주었을 때 왜 object가 + 되서 나오는 걸까요?

매개변수는 파라미터의 앞부분부터 순차적으로 전달되기 때문에 넘겨진 "b = { value: 10 }" 값은 b 파라미터가 아닌 a 파라미터로 전달되게 됩니다. 따라서 함수 내부에서 a를 출력해보시면, "{ value: 10}" Object가 전달된 것을 확인하실 수 있습니다. 이름을 명시해서 해당 값만 전달하고 싶으시다면, 정의를 조금 변경해서 사용해야 할 것 같습니다. function sum({a = 0, b = { value: 0 }}) { return a + b.value; } console.log(sum({b: { value: 10 }})); 이렇게 하면 "{ b: { value: 10 } }" Object를 파라미터로 전달하게 되는데, "{ a = 0, b = { value: 0 } }" Object 파라미터에서 b 키에 값이 맵핑되어 해당 파라미터 값은 "{ a: 0, b: { value: 10 } }"이 됩니다. (a 키의 값은 Default 값에 의해 0) 그렇게 한다면, 의도하는 것과 같이 함수가 10을 반환합니다.

가짜배열을 진짜배열로

"Array.prototype.slice.call"은 ES6 이전의 자바스크립트에도 사용 가능한 문법이고, "Array.from"은 ES6부터 지원되는 것으로 알고 있습니다. 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from