> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/javascript/dataset.md).

# dataset

```html
<li class="tab-button" data-id="0">Products</li>
```

dataset은 화면에서 보이지 않게 데이터를 숨겨 둘 수 있는 방법으로 HTML5에서 새로 확장된 속성

```javascript
document.querySelector('.tab-button').dataset.id;
// 출력 결과 '0' 
```

{% code title="js011.html" %}

```html
<li class="tab-button" data-id="0">Products</li>
<li class="tab-button orange" data-id="1">Information</li>
<li class="tab-button" data-id="2">Shipping</li>
```

{% endcode %}

{% code title="app.js" %}

```javascript
$('.list').click(function(e){
  tabOpen(e.target.dataset.id);
})
```

{% endcode %}

이렇게 하면 기존의 코드보다 많이 줄여서 작성할 수 있다.

기존의 방법대로 해도 괜찮지만 내가 짠 소스코드를 어떻게 하면 더 줄이고&#x20;

가독성을 좋게 할 수 있나 고민하는게 실력향상에 많은 도움이 된다.