James Jeon

함수로 전달되는 tags 매개변수는 "${v.name}", "${v.items}"와 같이 "${ }" 부분을 기준으로 나뉘어진 배열로 전달됩니다.
따라서, fn`<h2>welcome ${v.name} !!</h2><h4>주문가능항목</h4><div>${v.items}</div>`는
['<h2>welcome ' , ' !!</h2><h4>주문가능항목</h4><div>', '</div>'] 와 같은 tags 배열이 전달됩니다.
순차적으로 각각 tags[0], tags[1], tags[2]가 되는 것이구요.

"tags[0] + name + tags[1] + items + tags[2]"는
'<h2>welcome ' + name + ' !!</h2><h4>주문가능항목</h4><div>' + items + '</div>' 처럼 조립이 되어
원하는 HTML 구조를 형성할 수 있습니다.

<pre class="language-markup"><code><h2>welcome ${v.name} !!</h2>
<h4>주문가능항목</h4>
<div>${v.items}</div></code></pre>

와 같이 말이죠.

하지만, items와 tags[2]의 순서를 바꾸어 tags[2] + items를 반환하면,
겉으로는 정상적으로 보이지만, 실제로 형성된 HTML 구조는 의도와는 다름을 알 수 있습니다.

<pre class="language-markup"><code><h2>welcome ${v.name} !!</h2>
<h4>주문가능항목</h4>
<div></div>${v.items}</code></pre>
맨 마지막 줄이 바뀌었음을 알 수 있습니다.

다음과 같이 console.log() 함수를 통해 변수를 확인해보면 더 자세히 알 수 있습니다.
<pre class="language-javascript"><code>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`<h2>welcome ${v.name} !!</h2>
 <h4>주문가능항목</h4><div>${v.items}</div>`;
 
 console.log(template);
 document.querySelector("#message").innerHTML += template;
});</code></pre>

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

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

`` 문법을 통해 함수로 전달되는 tags 매개변수는 "${ }"를 기준으로 구분되어 전달되기 때문에
depth를 가지는 형태가 불가능할 것으로 생각됩니다.

처음에 template을 초기화할 때,
let template = fn`<h2>welcome ${v.name} !!</h2>
&nbsp; &nbsp; <h4>주문가능항목</h4><div>${v.items}</div>`;
와 같이 Bold 부분의 HTML 태그를 "${ }" 앞뒤로 추가해줘도 결국 구분되어 전달됩니다.
tags를 출력해보면,
<span class="pun" style="color: #666600; font-family: SourceCodeProRegular, Menlo, consolas, monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2; background-color: #ffffff;">[<span class="str" style="color: #008800; font-family: SourceCodeProRegular, Menlo, consolas, monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2; background-color: #ffffff;">"<h2>welcome "<span class="pun" style="color: #666600; font-family: SourceCodeProRegular, Menlo, consolas, monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2; background-color: #ffffff;">,<span class="pln" style="font-family: SourceCodeProRegular, Menlo, consolas, monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2; background-color: #ffffff;"> <span class="str" style="color: #008800; font-family: SourceCodeProRegular, Menlo, consolas, monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2; background-color: #ffffff;">" !!</h2> &nbsp; &nbsp; <h4>주문가능항목</h4><div>"<span class="pun" style="color: #666600; font-family: SourceCodeProRegular, Menlo, consolas, monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2; background-color: #ffffff;">,<span class="pln" style="font-family: SourceCodeProRegular, Menlo, consolas, monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2; background-color: #ffffff;"> <span class="str" style="color: #008800; font-family: SourceCodeProRegular, Menlo, consolas, monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2; background-color: #ffffff;">"</div>"<span class="pun" style="color: #666600; font-family: SourceCodeProRegular, Menlo, consolas, monospace; font-size: 14px; font-variant-ligatures: normal; orphans: 2; white-space: pre-wrap; widows: 2; background-color: #ffffff;">]
와 같이 나타납니다.

또한, 반환되는 값은 결국 document.querySelector("#message").innerHTML에 할당되기 때문에
제대로된 HTML 구조의 문자열만 잘 반환하면 괜찮습니다.

의도하신 질문이 이게 맞을까요??
도움이 되셨길 바랍니다.

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

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

가짜배열을 진짜배열로

매개변수는 파라미터의 앞부분부터 순차적으로 전달되기 때문에 넘겨진 "<span style="caret-color: #000a12; color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; background-color: #ffffff;">b = { value: 10 }" 값은
b 파라미터가 아닌 a 파라미터로 전달되게 됩니다.
따라서 함수 내부에서 a를 출력해보시면, "{ value: 10}" Object가 전달된 것을 확인하실 수 있습니다.
이름을 명시해서 해당 값만 전달하고 싶으시다면, 정의를 조금 변경해서 사용해야 할 것 같습니다.

<pre class="language-javascript"><code>function sum({a = 0, b = { value: 0 }}) {
 return a + b.value;
}

console.log(sum({b: { value: 10 }}));</code></pre>

이렇게 하면 "{ b: { value: 10 } }" Object를 파라미터로 전달하게 되는데,
"{ a = 0, b = { value: 0 } }" Object 파라미터에서 b 키에 값이 맵핑되어
해당 파라미터 값은 "{ a: 0, b: { value: 10 }&nbsp;}"이 됩니다. (a 키의 값은 Default 값에 의해 0)
그렇게 한다면, 의도하는 것과 같이 함수가 10을 반환합니다.

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

<span style="caret-color: #000a12; color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; background-color: #ffffff;">"Array.prototype.slice.call"은 ES6 이전의 자바스크립트에도 사용 가능한 문법이고,
<span style="caret-color: #000a12; color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; background-color: #ffffff;">"Array.from"은 ES6부터 지원되는 것으로 알고 있습니다.
<span style="caret-color: #000a12; color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; background-color: #ffffff;">
<span style="caret-color: #000a12; color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; background-color: #ffffff;">참고:&nbsp;<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from</a>

James Jeon

Posts