소개
게시글
질문&답변
2019.10.17
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; });
- 1
- 1
- 78
질문&답변
2019.10.17
fn
문법 중 하나로 ' 문자가 아닌 `문자 를 사용하셔야 합니다. 키보드에서 tab키 바로 위에, 숫자 1 좌측에 있는 키로, 키 입력이 영문일 때 `문자를 입력하실 수 있습니다. 아래 링크의 Description 부분과 Tagged templates 부분 설명을 참고하시면 도움되실 것 같습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
- 0
- 1
- 153
질문&답변
2019.10.17
tag가 병렬이 아닌 경우라면?(depth가 있는 경우)
`` 문법을 통해 함수로 전달되는 tags 매개변수는 "${ }"를 기준으로 구분되어 전달되기 때문에 depth를 가지는 형태가 불가능할 것으로 생각됩니다. 처음에 template을 초기화할 때, let template = fn` welcome ${v.name} !! 주문가능항목 ${v.items} `; 와 같이 Bold 부분의 HTML 태그를 "${ }" 앞뒤로 추가해줘도 결국 구분되어 전달됩니다. tags를 출력해보면, [ " welcome " , " !! 주문가능항목 " , " " ] 와 같이 나타납니다. 또한, 반환되는 값은 결국 document.querySelector("#message").innerHTML에 할당되기 때문에 제대로된 HTML 구조의 문자열만 잘 반환하면 괜찮습니다. 의도하신 질문이 이게 맞을까요?? 도움이 되셨길 바랍니다.
- 0
- 1
- 168
질문&답변
2019.10.17
가짜배열을 진짜배열로
네! ES6 이전과의 차이를 보여주려고 일부러 사용하신 것 같습니다. 감사합니다.
- 0
- 3
- 191
질문&답변
2019.10.17
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을 반환합니다.
- 0
- 1
- 83