Contoh Arrow Function Expression Javascript > 자유게시판

<div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Arrow function mirip seperti regular function secara perilaku, namun penulisannya jauh berbeda. Sama seperti namanya, fungsi didefinisikan dengan menggunakan tanda panah (=&gt;) dan tentu penulisan fungsi dengan arrow ini akan lebih singkat.</div><div dir="ltr" style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Untuk gambaran awal, perhatikan penulisan regular fungsi sebagai callback berikut:<br /><a name='more'></a></div><pre class="prettyprint linenums prettyprinted" dir="ltr" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.8px; line-height: unset; margin-bottom: 10px; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="kwd" style="box-sizing: border-box; color: #000088;">const</span><span class="pln" style="box-sizing: border-box; color: black;"> upperizedNames </span><span class="pun" style="box-sizing: border-box; color: #666600;">=</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="pun" style="box-sizing: border-box; color: #666600;">[</span><span class="str" style="box-sizing: border-box; color: #008800;">"Dimas"</span><span class="pun" style="box-sizing: border-box; color: #666600;">,</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="str" style="box-sizing: border-box; color: #008800;">"Widy"</span><span class="pun" style="box-sizing: border-box; color: #666600;">,</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="str" style="box-sizing: border-box; color: #008800;">"Buchori"</span><span class="pun" style="box-sizing: border-box; color: #666600;">]</span></li><br /><li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp; &nbsp; </span><span class="pun" style="box-sizing: border-box; color: #666600;">.</span><span class="pln" style="box-sizing: border-box; color: black;">map</span><span class="pun" style="box-sizing: border-box; color: #666600;">(</span><span class="kwd" style="box-sizing: border-box; color: #000088;">function</span><span class="pun" style="box-sizing: border-box; color: #666600;">(</span><span class="pln" style="box-sizing: border-box; color: black;">name</span><span class="pun" style="box-sizing: border-box; color: #666600;">)</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="pun" style="box-sizing: border-box; color: #666600;"></span></li><br /><li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span><span class="kwd" style="box-sizing: border-box; color: #000088;">return</span><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;name</span><span class="pun" style="box-sizing: border-box; color: #666600;">.</span><span class="pln" style="box-sizing: border-box; color: black;">toUpperCase</span><span class="pun" style="box-sizing: border-box; color: #666600;">();</span></li><br /><li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pun" style="box-sizing: border-box; color: #666600;">);</span></li><br /><li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span></li><br /><li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">console</span><span class="pun" style="box-sizing: border-box; color: #666600;">.</span><span class="pln" style="box-sizing: border-box; color: black;">log</span><span class="pun" style="box-sizing: border-box; color: #666600;">(...</span><span class="pln" style="box-sizing: border-box; color: black;">upperizedNames</span><span class="pun" style="box-sizing: border-box; color: #666600;">);</span></li><br /><li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span></li><br /><li class="L7" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">/* output:</span></li><br /><li class="L8" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">DIMAS WIDY BUCHORI</span></li><br /><li class="L9" style="background: rgb(238, 238, 238); box-sizing: border-box;"><span class="com" style="box-sizing: border-box; color: #880000;">*/</span></li><br /></ol><br /></pre><div style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Sedangkan menggunakan arrow function akan tampak seperti ini:</div><pre class="prettyprint linenums prettyprinted" dir="ltr" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.8px; line-height: unset; margin-bottom: 10px; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="kwd" style="box-sizing: border-box; color: #000088;">const</span><span class="pln" style="box-sizing: border-box; color: black;"> upperizedNames </span><span class="pun" style="box-sizing: border-box; color: #666600;">=</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="pun" style="box-sizing: border-box; color: #666600;">[</span><span class="str" style="box-sizing: border-box; color: #008800;">"Dimas"</span><span class="pun" style="box-sizing: border-box; color: #666600;">,</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="str" style="box-sizing: border-box; color: #008800;">"Widy"</span><span class="pun" style="box-sizing: border-box; color: #666600;">,</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="str" style="box-sizing: border-box; color: #008800;">"Buchori"</span><span class="pun" style="box-sizing: border-box; color: #666600;">]</span></li><br /><li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp; &nbsp; </span><span class="pun" style="box-sizing: border-box; color: #666600;">.</span><span class="pln" style="box-sizing: border-box; color: black;">map</span><span class="pun" style="box-sizing: border-box; color: #666600;">(</span><span class="pln" style="box-sizing: border-box; color: black;">name </span><span class="pun" style="box-sizing: border-box; color: #666600;">=&gt;</span><span class="pln" style="box-sizing: border-box; color: black;"> name</span><span class="pun" style="box-sizing: border-box; color: #666600;">.</span><span class="pln" style="box-sizing: border-box; color: black;">toUpperCase</span><span class="pun" style="box-sizing: border-box; color: #666600;">());</span></li><br /><li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span></li><br /><li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">console</span><span class="pun" style="box-sizing: border-box; color: #666600;">.</span><span class="pln" style="box-sizing: border-box; color: black;">log</span><span class="pun" style="box-sizing: border-box; color: #666600;">(...</span><span class="pln" style="box-sizing: border-box; color: black;">upperizedNames</span><span class="pun" style="box-sizing: border-box; color: #666600;">);</span></li><br /><li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span></li><br /><li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">/* output:</span></li><br /><li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">DIMAS WIDY BUCHORI</span></li><br /><li class="L7" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">*/</span></li><br /></ol><br /></pre><div style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Pada kasus fungsi yang dituliskan dalam satu baris dengan arrow function kita dapat menghapus kata&nbsp;<span style="box-sizing: border-box; font-weight: 700;"><em style="box-sizing: border-box;"><span style="background-color: #f9f2f4; box-sizing: border-box; color: #c7254e; padding: 2px 4px;">function</span></em></span>, tanda kurung, tanda kurawal, kata&nbsp;<span style="box-sizing: border-box; font-weight: 700;"><em style="box-sizing: border-box;"><span style="background-color: #f9f2f4; box-sizing: border-box; color: #c7254e; padding: 2px 4px;">return</span></em></span>, Tukang Aluminium dan&nbsp;<em style="box-sizing: border-box;">semicolon</em>&nbsp;(;). Kita hanya perlu menambahkan tanda panah (=&gt;) di antara parameter dan kode fungsinya.</div><div style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;"><img alt="202003121515581fc4405ca9a25eada9cbaf9598bf18e1.gif" class="fr-fic fr-dib" src="https://dicodingacademy.blob.core.windows.net/academies/202003121515581fc4405ca9a25eada9cbaf9598bf18e1.gif" style="border-style: none; box-sizing: border-box; display: block; float: none; margin: 5px auto; max-width: 100%; position: relative; vertical-align: top;" /></div><div style="background-color: white; box-sizing: border-box; color: #3d3d3d; font-family: Quicksand, sans-serif; font-size: 16px; margin-bottom: 1rem;">Lihat betapa sederhananya jika kita menggunakan arrow function<br /><br /><h4 dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; font-size: 1.5rem !important; font-weight: 300 !important; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;">Function Parameter</h4><div dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; margin-bottom: 1rem;">Pada penggunaan arrow function kita melihat bahwa variabel yang diletakan sebelum tanda panah (=&gt;) adalah merupakan parameter dari fungsi.&nbsp;</div><pre class="prettyprint linenums prettyprinted" dir="ltr" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.8px; line-height: unset; margin-bottom: 10px; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">// name merupakan parameter dari fungsi</span></li><br /><li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="kwd" style="box-sizing: border-box; color: #000088;">const</span><span class="pln" style="box-sizing: border-box; color: black;"> sayName </span><span class="pun" style="box-sizing: border-box; color: #666600;">=</span><span class="pln" style="box-sizing: border-box; color: black;"> name </span><span class="pun" style="box-sizing: border-box; color: #666600;">=&gt;</span><span class="pln" style="box-sizing: border-box; color: black;"> console</span><span class="pun" style="box-sizing: border-box; color: #666600;">.</span><span class="pln" style="box-sizing: border-box; color: black;">log</span><span class="pun" style="box-sizing: border-box; color: #666600;">(</span><span class="str" style="box-sizing: border-box; color: #008800;">`Nama saya $name`</span><span class="pun" style="box-sizing: border-box; color: #666600;">);</span></li><br /></ol><br /></pre><div dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; margin-bottom: 1rem;">Namun penulisan tersebut hanya berlaku jika fungsi memiliki satu parameter saja. Lantas bagaimana jika kita ingin membuat fungsi yang memiliki lebih dari satu parameter atau tanpa sebuah parameter? Hal itu sangat biasa dilakukan bukan?&nbsp;</div><div dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; margin-bottom: 1rem;">Pada arrow function jika terdapat dua atau lebih parameter fungsi kita perlu membungkusnya dengan tanda kurung seperti ini:&nbsp;</div><pre class="prettyprint linenums prettyprinted" dir="ltr" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.8px; line-height: unset; margin-bottom: 10px; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="kwd" style="box-sizing: border-box; color: #000088;">const</span><span class="pln" style="box-sizing: border-box; color: black;"> sayHello </span><span class="pun" style="box-sizing: border-box; color: #666600;">=</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="pun" style="box-sizing: border-box; color: #666600;">(</span><span class="pln" style="box-sizing: border-box; color: black;">name</span><span class="pun" style="box-sizing: border-box; color: #666600;">,</span><span class="pln" style="box-sizing: border-box; color: black;"> greet</span><span class="pun" style="box-sizing: border-box; color: #666600;">)</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="pun" style="box-sizing: border-box; color: #666600;">=&gt;</span><span class="pln" style="box-sizing: border-box; color: black;"> console</span><span class="pun" style="box-sizing: border-box; color: #666600;">.</span><span class="pln" style="box-sizing: border-box; color: black;">log</span><span class="pun" style="box-sizing: border-box; color: #666600;">(</span><span class="str" style="box-sizing: border-box; color: #008800;">`$greet, $name!`</span><span class="pun" style="box-sizing: border-box; color: #666600;">);</span></li><br /><li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span></li><br /><li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">sayHello</span><span class="pun" style="box-sizing: border-box; color: #666600;">(</span><span class="str" style="box-sizing: border-box; color: #008800;">"Dimas"</span><span class="pun" style="box-sizing: border-box; color: #666600;">,</span><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span><span class="str" style="box-sizing: border-box; color: #008800;">"Selamat Pagi"</span><span class="pun" style="box-sizing: border-box; color: #666600;">)</span></li><br /><li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span></li><br /><li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;"><span class="com" style="box-sizing: border-box; color: #880000;">/* output:</span></li><br /><li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">Selamat Pagi, Dimas!</span></li><br /><li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">*/</span></li><br /></ol><br /></pre><div dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; margin-bottom: 1rem;">Namun jika kita sama sekali tidak membutuhkan parameter, biarkan saja tanda kurung tersebut kosong.</div><pre class="prettyprint linenums prettyprinted" dir="ltr" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.8px; line-height: unset; margin-bottom: 10px; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="kwd" style="box-sizing: border-box; color: #000088;">const</span><span class="pln" style="box-sizing: border-box; color: black;"> sayHello </span><span class="pun" style="box-sizing: border-box; color: #666600;">=</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="pun" style="box-sizing: border-box; color: #666600;">()</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="pun" style="box-sizing: border-box; color: #666600;">=&gt;</span><span class="pln" style="box-sizing: border-box; color: black;"> console</span><span class="pun" style="box-sizing: border-box; color: #666600;">.</span><span class="pln" style="box-sizing: border-box; color: black;">log</span><span class="pun" style="box-sizing: border-box; color: #666600;">(</span><span class="str" style="box-sizing: border-box; color: #008800;">"Selamat pagi semuanya!"</span><span class="pun" style="box-sizing: border-box; color: #666600;">);</span></li><br /><li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span></li><br /><li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">sayHello</span><span class="pun" style="box-sizing: border-box; color: #666600;">()</span></li><br /><li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span></li><br /><li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;"><span class="com" style="box-sizing: border-box; color: #880000;">/* output:</span></li><br /><li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">Selamat pagi semuanya!</span></li><br /><li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">*/</span></li><br /></ol><br /></pre><div dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; margin-bottom: 1rem;">Atau beberapa developer biasanya mengubah tanda kurung menjadi garis bawah (_) agar penulisannya lebih simpel.</div><div dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; margin-bottom: 1rem;"><br style="box-sizing: border-box;" /></div><h4 dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; font-size: 1.5rem !important; font-weight: 300 !important; line-height: 1.2; margin-bottom: 0.5rem; margin-top: 0px;">Block Body Function</h4><div dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; margin-bottom: 1rem;">Fungsi merupakan&nbsp;<em style="box-sizing: border-box;">mini program</em>&nbsp;sehingga sangat mungkin terdapat lebih dari satu logika di dalamnya. Seperti yang kita ketahui bahwa logika-logika pada pemrograman terdiri dari banyak&nbsp;<em style="box-sizing: border-box;">expression</em>&nbsp;ataupun&nbsp;<em style="box-sizing: border-box;">statement</em>.&nbsp;</div><div dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; margin-bottom: 1rem;">Pada contoh kode arrow function sebelumnya kita hanya menuliskan satu buah expression sehingga penulisannya bisa sangat ringkas. Namun bagaimana jika dalam sebuah fungsi terdapat banyak logika di dalamnya? Apakah bisa dituliskan menggunakan arrow function? Jawabannya tentu bisa!</div><div dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; margin-bottom: 1rem;">Sama seperti regular function, arrow function sebenarnya tidak benar-benar menghilangkan tanda kurung kurawal ({ }) dalam penulisannya. Tanda kurung kurawal pun berfungsi sama seperti regular function yakni menampung&nbsp;<em style="box-sizing: border-box;">body function</em>&nbsp;di mana tempat logika fungsi dituliskan. Penulisan tanda kurung kurawal menjadi opsional ketika body fungsi hanya terdiri dari satu expression atau statement saja.</div><div dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; margin-bottom: 1rem;">Jika kita butuh lebih dari satu baris dalam body function, kita bisa menuliskannya seperti ini:</div><pre class="prettyprint linenums prettyprinted" dir="ltr" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; font-size: 12.8px; line-height: unset; margin-bottom: 10px; max-height: 500px; overflow-wrap: break-word; overflow: visible auto; padding: 2px; white-space: pre-wrap; word-break: break-all;"><ol class="linenums" style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; min-width: max-content;"><br /><li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="kwd" style="box-sizing: border-box; color: #000088;">const</span><span class="pln" style="box-sizing: border-box; color: black;"> sayHello </span><span class="pun" style="box-sizing: border-box; color: #666600;">=</span><span class="pln" style="box-sizing: border-box; color: black;"> language </span><span class="pun" style="box-sizing: border-box; color: #666600;">=&gt;</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="pun" style="box-sizing: border-box; color: #666600;"></span></li><br /><li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp; &nbsp;&nbsp;</span><span class="kwd" style="box-sizing: border-box; color: #000088;">if</span><span class="pun" style="box-sizing: border-box; color: #666600;">(</span><span class="pln" style="box-sizing: border-box; color: black;">language</span><span class="pun" style="box-sizing: border-box; color: #666600;">.</span><span class="pln" style="box-sizing: border-box; color: black;">toUpperCase</span><span class="pun" style="box-sizing: border-box; color: #666600;">()</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="pun" style="box-sizing: border-box; color: #666600;">===</span><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span><span class="str" style="box-sizing: border-box; color: #008800;">"INDONESIA"</span><span class="pun" style="box-sizing: border-box; color: #666600;">)</span><span class="pln" style="box-sizing: border-box; color: black;"> </span><span class="pun" style="box-sizing: border-box; color: #666600;"></span></li><br /><li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span><span class="kwd" style="box-sizing: border-box; color: #000088;">return</span><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span><span class="str" style="box-sizing: border-box; color: #008800;">"Selamat Pagi!"</span><span class="pun" style="box-sizing: border-box; color: #666600;">;</span></li><br /><li class="L3" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp; &nbsp; </span><span class="pun" style="box-sizing: border-box; color: #666600;"></span><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span><span class="kwd" style="box-sizing: border-box; color: #000088;">else</span><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span><span class="pun" style="box-sizing: border-box; color: #666600;"></span></li><br /><li class="L4" style="background: rgb(255, 255, 255); box-sizing: border-box;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span><span class="kwd" style="box-sizing: border-box; color: #000088;">return</span><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span><span class="str" style="box-sizing: border-box; color: #008800;">"Good Morning!"</span><span class="pun" style="box-sizing: border-box; color: #666600;">;</span></li><br /><li class="L5" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp; &nbsp; </span><span class="pun" style="box-sizing: border-box; color: #666600;"></span></li><br /><li class="L6" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="pun" style="box-sizing: border-box; color: #666600;"></span></li><br /><li class="L7" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span></li><br /><li class="L8" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="pln" style="box-sizing: border-box; color: black;">console</span><span class="pun" style="box-sizing: border-box; color: #666600;">.</span><span class="pln" style="box-sizing: border-box; color: black;">log</span><span class="pun" style="box-sizing: border-box; color: #666600;">(</span><span class="pln" style="box-sizing: border-box; color: black;">sayHello</span><span class="pun" style="box-sizing: border-box; color: #666600;">(</span><span class="str" style="box-sizing: border-box; color: #008800;">"Indonesia"</span><span class="pun" style="box-sizing: border-box; color: #666600;">));</span></li><br /><li class="L9" style="background: rgb(238, 238, 238); box-sizing: border-box;"><span class="pln" style="box-sizing: border-box; color: black;">&nbsp;</span></li><br /><li class="L0" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">/* output:</span></li><br /><li class="L1" style="background: rgb(238, 238, 238); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">Selamat Pagi!</span></li><br /><li class="L2" style="background: rgb(255, 255, 255); box-sizing: border-box; list-style-type: none;"><span class="com" style="box-sizing: border-box; color: #880000;">*/</span></li><br /></ol><br /></pre><div dir="ltr" style="box-sizing: border-box; font-family: Quicksand, sans-serif; margin-bottom: 1rem;">Selain itu juga, kita perlu menuliskan kembali keyword&nbsp;<span style="box-sizing: border-box; font-weight: 700;"><em style="box-sizing: border-box;"><span style="background-color: #f9f2f4; box-sizing: border-box; color: #c7254e; padding: 2px 4px;">return</span></em></span>&nbsp;agar fungsi tersebut dapat mengembalikan nilai</div></div>