1 line
34 KiB
HTML
1 line
34 KiB
HTML
<!doctype html><html lang="en" itemscope itemtype="https://schema.org/Article"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Daftar Pertanyaan Wawancara Kerja Front-End ★ Front-end Job Interview Questions</title><meta name="description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta name="keywords" content="front-end, interview questions, css questions, js questions, html questions, performance questions, interview test"><meta name="author" content="Front-end Job Interview Questions"><meta itemprop="author" content="Front-end Job Interview Questions"><meta itemprop="name" content="Daftar Pertanyaan Wawancara Kerja Front-End ★ Front-end Job Interview Questions"><meta itemprop="description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta itemprop="image" content="https://h5bp.github.io/Front-end-Developer-Interview-Questions/assets/images/og-image.png"><meta property="og:title" content="Daftar Pertanyaan Wawancara Kerja Front-End ★ Front-end Job Interview Questions"><meta property="og:description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta property="og:url" content="https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/indonesian/"><meta property="og:site_name" content="Front-end Job Interview Questions"><meta property="og:image" content="https://h5bp.github.io/Front-end-Developer-Interview-Questions/assets/images/og-image.png"><meta property="og:image:secure_url" content="/assets/images/og-image.png"><meta property="og:type" content="website"><meta property="og:locale" content="en_US"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Daftar Pertanyaan Wawancara Kerja Front-End ★ Front-end Job Interview Questions"><meta name="twitter:description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta name="twitter:site" content="@h5bp"><meta name="twitter:image" content="https://h5bp.github.io/Front-end-Developer-Interview-Questions/assets/images/og-image.png"><meta name="twitter:creator" content="@h5bp"><link type="image/png" rel="apple-touch-icon" href="/assets/images/apple-touch-icon.png"><link type="image/png" sizes="32x32" rel="icon" href="/assets/images/favicon-32x32.png"><link type="image/png" sizes="16x16" rel="icon" href="/assets/images/favicon-32x32.png"><link type="image/png" color="#181818" rel="mask-icon" href="/assets/images/favicon-96x96.png"><meta name="mobile-web-app-capable" content="yes"><meta name="robots" content="index,follow"><style>code[class*=language-],pre[class*=language-]{color:#c5c8c6;text-shadow:0 1px rgba(0,0,0,.3);font-family:Inconsolata,Monaco,Consolas,'Courier New',Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#1d1f21}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#7c7c7c}.token.punctuation{color:#c5c8c6}.namespace{opacity:.7}.token.keyword,.token.property,.token.tag{color:#96cbfe}.token.class-name{color:#ffffb6;text-decoration:underline}.token.boolean,.token.constant{color:#9c9}.token.deleted,.token.symbol{color:#f92672}.token.number{color:#ff73fd}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a8ff60}.token.variable{color:#c6c5fe}.token.operator{color:#ededed}.token.entity{color:#ffffb6}.token.url{color:#96cbfe}.language-css .token.string,.style .token.string{color:#87c38a}.token.atrule,.token.attr-value{color:#f9ee98}.token.function{color:#dad085}.token.regex{color:#e9c062}.token.important{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--font-family-heading:sans-serif;--font-family-body:Georgia,serif;--font-family-code:Menlo,Monaco,'Courier New',monospace;--color-primary:#835EFF;--color-secondary:#FF008D;--color-safe:#8338EC;--color-gradient:linear-gradient(to right, var(--color-primary), var(--color-secondary));--color-highlight:var(--color-primary);--color-gray-opacity:rgba(39,39,39,0.04);--color-heading:#23231A;--color-text:#23231A;--background-default:#F9F9F9;--border-radius-default:5px;--box-shadow-default:0 2rem 4rem rgba(0,0,0,.15);--transition-duration:0.27s}*{margin:0;padding:0;box-sizing:border-box;outline-color:var(--color-primary)}::selection{background:var(--color-primary);color:var(--background-default)}::-moz-selection{background:var(--color-primary);color:var(--background-default)}.nav{padding:1rem 0;margin-bottom:1rem}.navigation{list-style:none;display:flex;font-size:1rem}.navigation-item-emoji{margin-right:.8rem}.navigation-item-emoji a{text-decoration:none;display:inline-block;vertical-align:middle}.navigation-item:not(:last-of-type){margin-right:.8rem}.topbar{width:100%;height:.18rem;background:var(--color-gradient)}.skip-link{position:absolute;top:0;left:0;padding:.5rem 1rem;background-color:var(--color-primary);color:#fff;text-decoration:none;transform:translateY(-100%)}.skip-link:focus{transform:none}.header{margin-bottom:2rem}.header-big-title{font-size:6.9rem;line-height:1.06;margin:2.1rem 0;color:var(--color-primary);word-break:break-word}@supports (mix-blend-mode:lighten){.header-big-title{display:inline-block;position:relative;color:#000;background:#fff;mix-blend-mode:multiply}.header-big-title::before{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-image:url(/assets/images/gradient.svg);pointer-events:none}.header-big-title::before{mix-blend-mode:screen}}.header-heading{font-size:2.3rem;text-transform:uppercase}.header-big-description{font-size:1.8rem;line-height:1.4;padding:1rem 0}.header-description{padding-top:1rem}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family-body);font-weight:400;font-size:1.2rem;line-height:1.5;color:var(--color-text)}section+section{padding-top:2rem}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);color:var(--color-heading);font-style:normal;line-height:1.2;font-weight:600}section+section{padding-top:2rem}a{color:inherit;text-decoration:none;color:var(--color-secondary);transition:color ease-out var(--transition-duration)}a:focus:not(.skip-link),a:hover:not(.skip-link){color:var(--color-primary)}a[rel~=external]{text-decoration:overline}ul:not(.navigation):not(.inline-list){list-style:none}ul:not(.navigation):not(.inline-list) li::before{content:"\25A0";color:var(--color-primary);font-weight:700;display:inline-block;width:1em;margin-left:-1em}li{margin-bottom:.6rem}b,strong{font-weight:600}time{display:inline-block;color:var(--color-gray-70)}[tabindex='-1']{outline:0}img,svg{vertical-align:middle}img{display:block;max-width:100%;border-radius:var(--border-radius-default)}code{font-family:var(--font-family-code);color:var(--color-code);font-style:normal;font-size:1rem}blockquote:not([class]){padding-left:1rem;margin-left:-1rem;border-left:2px solid var(--color-primary);color:var(--color-gray-70);font-style:italic}code[class*=language-],pre[class*=language-]{font-size:.9rem;font-style:normal}p+pre[class*=language-]{margin-bottom:1.8rem}mark{color:var(--color-highlight);background-color:transparent}dt{font-weight:700}dd+dt{padding-top:.5rem}abbr[title],acronym[title]{text-decoration:overline;background:var(--color-gray-opacity);border:1px solid var(--color-gray-opacity);cursor:help}.container{max-width:54rem;padding:3rem 4rem 4rem;margin-right:auto;margin-left:auto}.content li:not(:last-of-type){margin-bottom:.5rem}.content h2{max-width:33rem}.content>:not(:last-child){margin-bottom:2rem}.content :not(hr)+h2,.content :not(hr)+h3{padding-top:1rem}.content ol:not(.inline-list),.content ul:not(.inline-list){padding-left:1.2rem}.content-simple li:not(:last-of-type){margin-bottom:.5rem}.content-edit{text-align:right;margin-top:2rem}.inline-list{padding:0;list-style:none}.inline-list li{padding:0;display:inline-block;vertical-align:middle;text-align:center}.inline-list li::before{content:'';margin-left:0}.inline-list li img{display:block;margin:auto;margin-bottom:.6rem}.inline-list li a{display:inline-block;vertical-align:middle;margin:0 .15rem}.avatar{max-width:12rem}.footer{padding-top:3rem}.footer-text{font-size:.8rem}</style></head><body><div class="topbar"></div><div class="container"><a class="skip-link" href="#main-content">Skip to main content</a><nav class="nav"><ul class="navigation"><li class="navigation-item"><span class="navigation-anchor">Questions:</span></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/coding-questions/" title="Coding Questions">Coding</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/css-questions/" title="CSS Questions">CSS</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/fun-questions/" title="Fun Questions">Fun</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/general-questions/" title="General Questions">General</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/html-questions/" title="HTML Questions">HTML</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/javascript-questions/" title="JavaScript Questions">JavaScript</a></li><li class="navigation-item"><a rel="external noreferrer noopener" target="_blank" class="navigation-anchor" href="https://scottaohara.github.io/accessibility_interview_questions/" title="Accessibility Questions (external link)">A11y</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/network-questions/" title="Network Questions">Network</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/performance-questions/" title="Perfomance Questions">Perfomance</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/testing-questions/" title="Testing Questions">Testing</a></li><li class="navigation-item">|</li><li class="navigation-item-emoji"><a class="navigation-anchor" href="/" title="Home">🏠</a></li><li class="navigation-item-emoji"><a class="navigation-anchor" href="/translations" title="Translations">🌐</a></li></ul></nav><main id="main-content" tabindex="-1"><header class="header"><h1 class="header-big-title">Daftar Pertanyaan Wawancara Kerja Front-End</h1></header><div class="content"><h1>Daftar Pertanyaan Wawancara Kerja Front-End</h1><p>File ini berisi sejumlah pertanyaan teknis yang dapat digunakan saat mewawancarai calon pekerja. Namun, bukan berarti anda dianjurkan untuk bertanya kepada si calon pekerja dengan semua pertanyaan dari daftar di bawah ini (karena itu akan memakan waktu beberapa jam). Dengan cukup memilih beberapa pertanyaan dari daftar ini akan membantu anda mengenal kemampuan yang anda cari dari si calon pekerja.</p><p><strong>Catatan:</strong> Perlu diingat bahwa kebanyakan pertanyaan-pertanyaan ini bersifat terbuka dan mungkin dapat mengarah menjadi diskusi menarik yang bisa memberikan gambaran lebih lanjut mengenai kemampuan seseorang.</p><h2 id="daftar-isi"><a class="header-anchor" href="#daftar-isi" aria-hidden="true"></a> Daftar Isi</h2><ol><li><a href="#pertanyaan-umum">Pertanyaan Umum</a></li><li><a href="#pertanyaan-html">Pertanyaan HTML</a></li><li><a href="#pertanyaan-css">Pertanyaan CSS</a></li><li><a href="#pertanyaan-js">Pertanyaan JS</a></li><li><a href="#pertanyaan-pengujian">Pertanyaan Pengujian</a></li><li><a href="#pertanyaan-kinerja">Pertanyaan Kinerja</a></li><li><a href="#pertanyaan-jaringan">Pertanyaan Jaringan</a></li><li><a href="#pertanyaan-koding">Pertanyaan Koding</a></li><li><a href="#pertanyaan-seru--sampingan">Pertanyaan Seru / Sampingan</a></li></ol><h2 id="cara-partisipasi"><a class="header-anchor" href="#cara-partisipasi" aria-hidden="true"></a> Cara Partisipasi</h2><ol><li><a href="#contributors">Kontributor</a></li><li><a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTING.md">Cara Kontribusi</a></li><li><a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/LICENSE.md">Lisensi</a></li></ol><h4>Pertanyaan Umum:</h4><ul><li>Apa yang baru Anda pelajari kemarin / minggu ini?</li><li>Apa yang membuatmu tertarik dengan coding?</li><li>Tantangan teknis apa yang baru-baru ini Anda hadapi, dan bagaimana Anda mengatasinya?</li><li>Pertimbangan-pertimbangan apa yang Anda ambil dari sisi UI, Keamanan, Kinerja, SEO, Maintainability maupun Teknologi saat Anda membangun aplikasi web atau situs?</li><li>Jelaskan tentang lingkungan coding yang Anda sukai. (OS, Editor atau IDE, Browser, Tools, dll)</li><li>Sistem kontrol versi apa saja yang Anda kenali?</li><li>Dapatkah Anda menjelaskan alur kerja Anda ketika Anda membuat sebuah situs?</li><li>Katakan Anda memiliki 5 stylesheet yang berbeda, bagaimana cara terbaik untuk mengintegrasikannya ke situs Anda?</li><li>Dapatkah Anda menjelaskan perbedaan antara <em>progressive enhancement</em> dan <em>graceful degradation</em>?</li><li>Bagaimana Anda mengoptimalkan aset / resource sebuah website?</li><li>Berapa banyak <em>resource</em> yang didownload oleh browser dari domain pada suatu waktu?<ul><li>Apa saja pengecualiannya?</li></ul></li><li>Sebutkan 3 cara untuk mengurangi beban halaman (waktu yang dirasakan maupun waktu loading yang sebenarnya).</li><li>Jika Anda mendapatkan sebuah proyek, dan dalam proyek ini mereka menggunakan <em>tab</em> dan Anda menggunakan <em>space</em>, apa yang akan Anda lakukan?</li><li>Jelaskan bagaimana Anda membuat halaman slideshow sederhana.</li><li>Jika Anda bisa mempelajari satu teknologi tahun ini, apakah itu?</li><li>Jelaskan pentingnya standar dan badan-badan standar.</li><li>Apa itu <em>Flash of Unstyled Content</em> alias FOUC? Bagaimana Anda menghindari FOUC?</li><li>Jelaskan apa itu ARIA dan <em>screenreader</em>, dan bagaimana membuat sebuah website dapat diakses.</li><li>Jelaskan beberapa pro dan kontra animasi CSS dibandingkan animasi JavaScript.</li><li>Apa arti CORS dan tujuannya?</li></ul><h4>Pertanyaan HTML:</h4><ul><li>Apa yang <code>doctype</code> lakukan?</li><li>Apa perbedaan antara modus standar dan modus quirks?</li><li>Apa perbedaan antara HTML dan XHTML?</li><li>Apakah ada masalah dengan melayani halaman sebagai <code>aplikasi/xhtml+xml</code>?</li><li>Bagaimana Anda melayani halaman dengan konten dalam berbagai bahasa?</li><li>Apa saja hal yang harus Anda waspadai ketika mendesain atau mengembangkan situs multibahasa?</li><li>Apa kegunaan atribut <code>data-</code>?</li><li>Katakan HTML5 adalah platform web terbuka, apa saja yang membentuk HTML5?</li><li>Jelaskan perbedaan antara <code>cookie</code>, <code>sessionStorage</code> dan <code>localStorage</code>.</li><li>Jelaskan perbedaan antara <code><script></code>, <code><script async></code> dan <code><script defer></code>.</li><li>Mengapa meletakkan <code><link></code> CSS di antara <code><head></head></code> dan meletakkan <code><script></code> JS sebelum <code><body></body></code> dianggap baik pada umumnya? Apakah ada pengecualiannya?</li><li>Apa itu <em>progressive rendering</em>?</li><li>Apakah Anda pernah menggunakan bahasa HTML templating yang berbeda?</li><li>Jelaskan perbedaan antara <code>GET</code> dan<code>POST</code>.</li></ul><h4>Pertanyaan CSS:</h4><ul><li>Apa perbedaan antara <code>class</code> dan <code>id</code> dalam CSS?</li><li>Apa perbedaan antara reset dan normalisasi dalam CSS? Apa yang Anda pilih, dan kenapa?</li><li>Jelaskan <code>float</code> dan cara kerjanya.</li><li>Jelaskan z-index dan bagaimana susunan konteks terbentuk.</li><li>Apa saja teknik-teknik kliring, dan yang mana sesuai untuk konteks apa?</li><li>Jelaskan sprite CSS, dan bagaimana Anda implementasikan pada suatu halaman atau situs.</li><li>Apa teknik pengganti gambar favorit Anda? Dan yang mana akan Anda gunakan, lalu kapan digunakan?</li><li>Bagaimana anda menghadapi masalah styling yang spesifik pada browser?</li><li>Bagaimana Anda melayani halaman untuk browser dengan fitur terbatas?<ul><li>Teknik / contents apa yang Anda gunakan?</li></ul></li><li>Apa saja cara-cara untuk menyembunyikan suatu konten secara visual (dan membuatnya tersedia hanya untuk pembaca layar / <em>screenreader</em>)?</li><li>Apakah Anda pernah menggunakan sistem grid, dan jika pernah, apa yang lebih Anda sukai?</li><li>Apakah Anda pernah menggunakan atau menerapkan <em>media query</em> atau layout / CSS khusus untuk mobile?</li><li>Apakah Anda fasih dengan styling SVG?</li><li>Bagaimana Anda mengoptimalkan halaman web Anda untuk dicetak?</li><li>Apa saja yang perlu diwaspadai dalam menulis CSS yang efisien?</li><li>Apa keuntungan / kerugian dari menggunakan precontentsor CSS? (Sass, Compass, Stylus, LESS)<ul><li>Jelaskan apa yang Anda sukai dan tidak sukai dari precontentsor CSS yang pernah Anda gunakan.</li></ul></li><li>Bagaimana Anda akan menerapkan desain web comp yang menggunakan font non-standar?</li><li>Jelaskan bagaimana browser mencocokan suatu elemen dengan <em>selector</em> CSS.</li><li>Jelaskan apa itu <em>pesudo-element</em> dan bagaimana penggunaannya.</li><li>Jelaskan pemahaman Anda tentang model kotak, dan bagaimana Anda memberitahu suatu browser dalam CSS untuk menggunakan layout model kotak yang mana.</li><li>Apa yang terjadi dengan ini : <code>{ box-sizing: border-box; }</code>? Apa keuntungannya?</li><li>Sebutkan sebanyak mungkin <em>value</em> untuk properti <em>display</em> yang anda ingat.</li><li>Apa perbedaan antara <code>inline</code> dan <code>inline-block</code>?</li><li>Apa perbedaan antara elemen yang diposisikan secara <code>relative</code>, <code>fixed</code>, <code>absolute</code>, dan <code>static</code>?</li><li>Huruf ‘C’ dalam CSS adalah singkatan dari Cascading. Bagaimana cara kerja prioritas dalam menentukan stylenya (berikan beberapa contoh)? Bagaimana Anda bisa menggunakan sistem ini untuk keuntungan Anda?</li><li>Framework CSS apa yang pernah Anda gunakan secara lokal, maupun dalam produksi? (Bootstrap, PureCSS, Foundation dll). Dan kalau bisa, bagaimana Anda ingin mengubah / memperbaikinya?</li><li>Apakah Anda pernah mencoba CSS Flexbox yang baru atau Grid specs?</li><li>Bagaimana desain responsif berbeda dari desain adaptif?</li><li>Apakah Anda pernah bekerja dengan grafis retina? Jika ya, kapan dan teknik apa yang Anda gunakan?</li><li>Apakah Anda mempunyai alasan untuk menggunakan <code>translate()</code> dibandingkan <em>posisi absolute</em>, ataupun sebaliknya? Kenapa?</li></ul><h4>Pertanyaan JS:</h4><ul><li>Jelaskan <em>event delegation</em>.</li><li>Jelaskan bagaimana cara kerja <code>this</code> dalam JavaScript.</li><li>Jelaskan cara kerja <em>inheritance</em> prototype.</li><li>Apa pendapat Anda mengenai AMD dan CommonJS?</li><li>Jelaskan mengapa berikut ini tidak bekerja sebagai IIFE: <code>function foo () {} ();</code>.<ul><li>Apa yang perlu diubah untuk membuatnya sebagai IIFE?</li></ul></li><li>Apa perbedaan antara variabel: <code>null</code>,<code>undefined</code> dan <code>undeclared</code>?<ul><li>Bagaimana Anda menguji status-status variabel ini?</li></ul></li><li>Apa itu <em>closure</em>, dan bagaimana / mengapa Anda akan menggunakannya?</li><li>Bagaimana biasanya fungsi anonim (<em>anonymous function</em>) digunakan?</li><li>Bagaimana Anda mengatur kode Anda? (pola modul, warisan klasik?)</li><li>Apa perbedaan antara <em>host object</em> dan <em>native object</em>?</li><li>Apa perbedaan antara: <code>function Person(){}</code>, <code>var person = Person()</code>, dan <code>var person = new Person()</code>?</li><li>Apa perbedaan antara <code>.call</code> dan<code>.apply</code>?</li><li>Jelaskan <code>Function.prototype.bind</code>.</li><li>Kapan saja <code>document.write ()</code> digunakan?</li><li>Kapan saja Anda mengoptimalkan kode Anda?</li><li>Apa perbedaan antara fitur deteksi, fitur inferensi, dan penggunaan string UA?</li><li>Jelaskan AJAX sedetail mungkin.</li><li>Apa keuntungan dan kerugian menggunakan AJAX?</li><li>Jelaskan bagaimana cara kerja JSONP (dan bagaimana itu bukan AJAX).</li><li>Apakah Anda pernah menggunakan JavaScript template?<ul><li>Kalau ya, <em>library</em> apa yang pernah Anda gunakan? (Mustache.js, Handlebars dll.)</li></ul></li><li>Jelaskan <em>“hoisting”</em>.</li><li>Jelaskan <em>event bubbling</em>.</li><li>Apa perbedaan antara “atribut” dan “properti”?</li><li>Mengapa tidak baik meng-extend object Javascript built-in?</li><li>Apa perbedaan antara <em>document load</em> dan <em>document ready</em>?</li><li>Apa perbedaan antara <code>==</code> dan <code>===</code>?</li><li>Jelaskan kebijakan <em>same-origin</em> dalam konteks JavaScript.</li><li>Kerjakan ini :</li></ul><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><span class="token function">duplicate</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1,2,3,4,5,1,2,3,4,5]</span></div></code></pre><ul><li>Mengapa disebut ekspresi Ternary, dan apa maksud “Ternary”?</li><li>Apa itu <code>"use strict";</code>? Apa keuntungan dan kerugian dalam penggunaannya?</li><li>Buatkan loop yang beriterasi sampai <code>100</code>, dan print <strong>“fizz”</strong> pada kelipatan <code>3</code>, <strong>“buzz”</strong> pada kelipatan <code>5</code> dan <strong>“fizzbuzz”</strong> pada kelipatan <code>3</code> dan <code>5</code>.</li><li>Kenapa pada umumnya, lebih baik membiarkan scope global dalam suatu website sebagai apa adanya dan jangan diutak-atik?</li><li>Kenapa <code>load</code> event digunakan? Apakah event ini mempunyai kerugiannya? Apakah Anda tau cara alternatif lain, dan kenapa Anda menggunakan cara itu?</li><li>Jelaskan apa itu <em>single page app</em>, dan bagaimana membuatnya ramah SEO?</li><li>Sejauh apa pengalaman Anda dengan <em>promise</em> dan / atau <em>polyfills</em>?</li><li>Apakah pro dan kontrak menggunakan <em>promise</em> dibandingkan <em>callback</em>?</li><li>Apa keuntungan / kerugian menulis kode JavaScript dalam bahasa yang kompile ke JavaScript?</li><li>Program dan teknik apa yang Anda gunakan dalam mendebug kode Javascript?</li><li>Konstruksi bahasa apa yang Anda gunakan untuk mengiterasi properti objek dan array?</li><li>Jelaskan perbedaan antara object <em>mutable</em> dan <em>immutable</em><ul><li>Apa contoh objek <em>immutable</em> dalam JavaScript?</li><li>Apa pro dan kontra <em>immutability</em>?</li><li>Bagaimana Anda mencapai <em>immutability</em> dalam kode Anda?</li></ul></li><li>Jelaskan perbedaan antara fungsi <em>synchronous</em> dan <em>asynchronous</em></li><li><em>event loop</em> itu apa?</li><li>Perbedaan antara <em>call stack</em> dan <em>task queue</em> itu apa?</li></ul><h4>Pertanyaan Pengujian</h4><ul><li>Apakah keuntungan / kerugian menguji kode Anda?</li><li>Program apa yang Anda gunakan untuk menguji kinerja kode Anda?</li><li>Apa saja perbedaan antara tes unit dan tes fungsi/integrasi?</li><li>Apakah tujuan program <em>lint</em>?</li></ul><h4>Pertanyaan Kinerja</h4><ul><li>Tool apa yang Anda gunakan untuk mencari masalah kinerja dalam kode Anda?</li><li>Apa saja cara-cara yang dapat meningkatkan kinerja scrolling dalam website Anda?</li><li>Jelaskan perbedaan antara <em>layout</em>, <em>painting</em>, dan <em>compositing</em>.</li></ul><h4>Pertanyaan Jaringan:</h4><ul><li>Secara tradisional, mengapa lebih baik untuk melayani aset situs dari beberapa domain?</li><li>Jelaskan semampu Anda, bagaimana contents kerja dari saat Anda mengetikkan URL situs web sampai saat halamannya selesai tampil di layar Anda.</li><li>Apakah perbedaan antara Long-Polling, Websockets dan Server-Sent Events (SSE)?</li><li>Jelaskan <em>request</em> dan <em>response</em> header berikut ini:<ul><li>Perbedaan antara Expires, Date, Age dan If-Modified-…</li><li>Do Not Track (DNT)</li><li>Cache-Control</li><li>Transfer-Encoding</li><li>ETag</li><li>X-Frame-Options</li></ul></li><li>aksi HTTP itu apa? Sebutkan aksi-aksi HTTP yang Anda tahu, dan jelaskan.</li></ul><h4>Pertanyaan koding:</h4><p><em>Pertanyaan: Apakah hasil <code>foo</code>?</em></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token number">10</span> <span class="token operator">+</span> <span class="token string">'20'</span><span class="token punctuation">;</span></div></code></pre><p><em>Pertanyaan: Bagaimana Anda akan membuat fungsi berikut ini bekerja?</em></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 7</span></div><div class="highlight-line"><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 7</span></div></code></pre><p><em>Pertanyaan: Apakah hasil yang akan dikembalikan dari pernyataan berikut?</em></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><span class="token string">"i'm a lasagna hog"</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></code></pre><p><em>Pertanyaan: Apakah nilai <code>window.foo</code>?</em></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><span class="token punctuation">(</span> window<span class="token punctuation">.</span>foo <span class="token operator">||</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">"bar"</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span></div></code></pre><p><em>Pertanyaan: Apakah hasil dari dua alert di bawah ini?</em></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token string">"Hello"</span><span class="token punctuation">;</span> </div><div class="highlight-line"><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> </div><div class="highlight-line"> <span class="token keyword">var</span> bar <span class="token operator">=</span> <span class="token string">" World"</span><span class="token punctuation">;</span> </div><div class="highlight-line"> <span class="token function">alert</span><span class="token punctuation">(</span>foo <span class="token operator">+</span> bar<span class="token punctuation">)</span><span class="token punctuation">;</span> </div><div class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </div><div class="highlight-line"><span class="token function">alert</span><span class="token punctuation">(</span>foo <span class="token operator">+</span> bar<span class="token punctuation">)</span><span class="token punctuation">;</span></div></code></pre><p><em>Pertanyaan: Apakah hasil <code>foo.length</code>?</em></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></div><div class="highlight-line">foo<span class="token punctuation">.</span><span class="token function">push</span> <span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><div class="highlight-line">foo<span class="token punctuation">.</span><span class="token function">push</span> <span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></code></pre><p><em>Pertanyaan: Apakah hasil <code>foo.x</code>?</em></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span>n<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">;</span></div><div class="highlight-line"><span class="token keyword">var</span> bar <span class="token operator">=</span> foo<span class="token punctuation">;</span></div><div class="highlight-line">foo<span class="token punctuation">.</span>x <span class="token operator">=</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span>n<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">;</span></div></code></pre><p><em>Pertanyaan: Apakah hasil yang akan diprint dalam kode berikut ini?</em></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'one'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><div class="highlight-line"><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></div><div class="highlight-line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'two'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><div class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><div class="highlight-line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'three'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></code></pre><h4>Pertanyaan Seru / Sampingan:</h4><ul><li>Apa saja proyek menarik yang baru-baru ini Anda kerjakan?</li><li>Apa sajakah hal-hal yang Anda sukai tentang alat pengembang yang Anda gunakan?</li><li>Apakah Anda mempunyai proyek yang anda sukai? Apa saja?</li><li>Apa fitur favorit Anda di Internet Explorer?</li><li>Apa tipe kopi favorit Anda?</li></ul><h4>Contributors:</h4><p>Dokumen ini dimulai pada tahun 2009 sebagai kolaborasi dari <a href="http://twitter.com/paul_irish">@paul_irish</a> <a href="http://twitter.com/bentruyman">@bentruyman</a> <a href="http://twitter.com/cowboy">@cowboy</a> <a href="http://twitter.com/ajpiano">@ajpiano</a> <a href="http://twitter.com/slexaxton">@SlexAxton</a> <a href="http://twitter.com/boazsender">@boazsender</a> <a href="http://twitter.com/miketaylr">@miketaylr</a> <a href="http://twitter.com/vladikoff">@vladikoff</a> <a href="http://twitter.com/gf3">@gf3</a> <a href="http://twitter.com/jon_neal">@jon_neal</a> <a href="http://twitter.com/sambreed">@sambreed</a> dan <a href="http://twitter.com/iansym">@iansym</a>.</p><p>Dari sejak itu, dokumen ini sudah menerima kontribusi lebih dari <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors">100 developers</a>.</p></div><div class="content-edit"><a rel="external noreferrer noopener" target="_blank" href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src/translations/indonesian/index">Edit this page</a></div></main><footer class="footer"><p class="footer-text">Copyright (c) 2012 - 2018. Contributors to <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions">Front-end-Developer-Interview-Questions.</a><br>This project is maintained by <a href="https://github.com/cezaraugusto" target="_blank" rel="noreferrer noopener">Cezar Augusto</a>, <a href="https://github.com/roblarsen" target="_blank" rel="noreferrer noopener">Rob Larsen</a> and <a href="https://github.com/vvscode" target="_blank" rel="noreferrer noopener">Vasiliy Vanchuk</a> .<br>Curious about the project? <a href="/about/">Read more about here</a>.</p></footer></div><script>console.log("%cA black belt is a white belt that didn't quit.","color: #fff; font-size: 80px; text-shadow: 1px 1px 1px #000; font-family: serif;");</script></body></html> |