JS ハンバーガーメニューについて

ある教材でハンバーガーメニューの実装をしております。
そこで、回答を見たのですが、JSにて'is-drawerActive'というクラスを追加しています。
HTML,CSSにそのようなクラスが無いのですがなぜ追加する必要があるのでしょうか。

HTML
1<header>
2    <button type="button" id="js-hamburger" class="button hamburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
3      <span class="hamburger__line">
4      </span>
5    </button>
6    <div class="sp-global-menu" id="js-global-menu" area-hidden="true">
7      <nav>
8        <ul>
9          <li>リスト</li>
10          <li>リスト</li>
11          <li>リスト</li>
12          <li>リスト</li>
13          <li>リスト</li>
14        </ul>
15      </nav>
16    </div><!-- /.sp-header-menu -->
17  </header>

SCSS
1$color01: #333;
2$color02: #fff;
3
4body {
5  margin: 0;
6  box-sizing: border-box;
7}
8header {
9  height: 80px;
10  border-bottom: 1px solid #000;
11}
12.button {
13  display: inline-block;
14  text-decoration: none;
15  -webkit-appearance: none;
16  -moz-appearance: none;
17  appearance: none;
18  border: none;
19  background-color: transparent;
20  cursor: pointer;
21}
22
23
24.hamburger {
25  position: fixed;
26  top: 16px;
27  right: 20px;
28  z-index: 3;
29  width: 48px;
30  height: 48px;
31  border-radius: 50%;
32  border: 1px solid $color01;
33  box-shadow: 0 0 2rem transparent;
34  outline: none;
35  -webkit-transition: all .3s ease-in-out;
36          transition: all .3s ease-in-out;
37  &:hover,
38  &:focus {  
39  box-shadow: 0 0 .5rem rgba(161, 161, 161, 0.5);
40}
41}
42
43
44.hamburger__line {
45  position: absolute;
46  top: 0;
47  right: 0;
48  bottom: 0;
49  left: 0;
50  margin: auto;
51  width: 18px;
52  height: 2px;
53  background-color: $color01;
54  -webkit-transition: inherit;
55          transition: inherit;
56  &::before,
57  &::after {
58    position: absolute;
59    display: block;
60    width: 100%;
61    height: 100%;
62    background-color: inherit;
63    content: '';
64    -webkit-transition: inherit;
65            transition: inherit;
66  }
67}
68
69.hamburger__line::before {
70  top: -5px;
71}
72.hamburger__line::after {
73  top: 5px;
74}
75.hamburger[aria-expanded="true"] {
76  border: 1px solid #fff!important;
77}
78.hamburger[aria-expanded="true"] .hamburger__line {
79  background-color: transparent;
80  &::before,
81  &::after {
82  top: 0;
83  background-color: $color02;
84}
85}
86.hamburger[aria-expanded="true"] .hamburger__line::before {
87  -webkit-transform: rotate(45deg);
88      -ms-transform: rotate(45deg);
89          transform: rotate(45deg);
90}
91
92.hamburger[aria-expanded="true"] .hamburger__line::after {
93  -webkit-transform: rotate(-45deg);
94      -ms-transform: rotate(-45deg);
95          transform: rotate(-45deg);
96}
97
98.sp-global-menu {
99  position: fixed;
100  width: 100vw;
101  top: 0;
102  right: 0;
103  bottom: 0;
104  overflow: hidden;
105  height: 100vh;
106  background-color: #000;
107  color: #fff;
108  visibility: hidden;
109}

JS
1const jsHamburger = document.getElementById('js-hamburger');
2const body = document.body;
3const spHeaderMenu = document.getElementById('js-global-menu')
4
5  jsHamburger.addEventListener('click', function() {
6    body.classList.toggle('is-drawerActive')
7    if (this.getAttribute('aria-expanded') == 'false') {
8      this.setAttribute('aria-expanded', 'true');
9      spHeaderMenu.style.visibility = "visible";
10      spHeaderMenu.setAttribute('area-hidden','false')
11    } else {
12      this.setAttribute('aria-expanded', 'false')
13      spHeaderMenu.style.visibility = "hidden";
14      spHeaderMenu.setAttribute('area-hidden','true')
15    };
16  });