ES6 - 4

template, Tagged template literals, Arrow Function

1. template

const data = [
  {
    name : 'cofee-bean',
    order : true,
    items : ['americano', 'milk', 'green-tea']
  },
  {
    name : 'starbucks',
    order : false
  }
]

const template = `<div>welcome ${data[1].name}</div>`;
console.log(template);
// "<div>welcome starbucks</div>"

Tagged template literals

const data = [
  {
    name : 'cofee-bean',
    order : true,
    items : ['americano', 'milk', 'green-tea']
  },
  {
    name : 'starbucks',
    order : false
  },
  {
    name : 'coffee-machine',
    order : true,
    items : ['water', 'juice']
  }
]

function fn(tags, name, items) {
  if(typeof items === 'undefined') {
    items = '주문 가능한 상품이 없습니다.';
  }
  
  return (tags[0] + name + tags[1] + items + tags[2]);
}


data.forEach((v) => {
  let template = fn`<div>welcome ${v.name} !!</div> <h2>주문가능항목</h2> <div>${v.items}</div>`;
  console.log(template);

  /*
  "<div>welcome cofee-bean !!</div> <h2>주문가능항목</h2> <div>americano,milk,green-tea</div>"

  "<div>welcome starbucks !!</div> <h2>주문가능항목</h2> <div>주문 가능한 상품이 없습니다.</div>"

  "<div>welcome coffee-machine !!</div> <h2>주문가능항목</h2> <div>water,juice</div>"
  */ 
});