Bagaimana pendekatan memecahkan tantangan selama wawancara coding

Seperti banyak hal dalam hidup, penguasaan membutuhkan latihan dan wawancara coding tidak terkecuali.

Namun sering kali, fokusnya adalah mencoba menemukan solusi terbaik sejak awal daripada pendekatan tentang bagaimana mengulangi dan mungkin mencapainya.

Bagian terpenting, menurut pendapat saya, adalah melakukannya dengan benar terlebih dahulu. Dalam kehidupan pengkodean normal, Anda jarang, jika pernah, dapat menghasilkan kode yang “sempurna” tanpa terlebih dahulu melalui serangkaian iterasi.

Pendekatan selama wawancara coding tidak boleh berbeda dan jika dilakukan dengan baik akan membantu Anda mendapatkan poin berharga dalam menunjukkan keterampilan pemecahan masalah Anda.

Saya akan memandu Anda tentang percakapan sebenarnya antara Anda dan pewawancara jika Anda diminta untuk menyelesaikan tantangan FizzBuzz yang terkenal.

Tantangan

Tulislah sebuah program yang mencetak angka dari 1 hingga 100. Namun untuk kelipatan tiga, cetaklah Fizz sebagai ganti angkanya dan untuk kelipatan lima, cetaklah Buzz. Untuk bilangan yang merupakan kelipatan tiga dan lima, cetak FizzBuzz

Isi

Tantangan FizzBuzz tidak spesifik untuk JavaScript dan telah menjadi bagian dari proses wawancara coding di hampir semua bahasa pemrograman.

Biasanya ini merupakan pemeriksaan cepat untuk menilai naluri dasar pemrograman kandidat, tetapi juga dapat diubah menjadi penilaian untuk pengetahuan mendalam jika pewawancara memutuskan untuk melakukannya.

Ini biasanya merupakan bagian dari wawancara teknis ringan pertama yang dilakukan saat berbagi layar. Ini juga merupakan favorit programmer non-JavaScript untuk bertanya dan dengan cepat mengukur pengetahuan dan pendekatan teknis Anda.

Dalam konteks Javascript, keakraban dengan beberapa atau semua konsep berikut diharapkan dapat ditunjukkan:

Operator logika
Perulangan
Nilai-nilai yang salah
Operator terner
Ketik paksaan

Pendekatan

Seperti halnya masalah apa pun yang mungkin Anda temui, bahkan masalah yang tampak familier, membaca dengan baik dan memecahnya menjadi bagian-bagian kecil adalah suatu keharusan. Jelaskan kepada pewawancara bahwa Anda memerlukan 3 hingga 5 menit untuk membacanya dengan tenang dan mengusulkan penulisan ulang pemahaman Anda.

Jika Anda merasa nyaman melakukan bagian itu dengan suara keras, itu lebih baik lagi. Misalnya, beginilah cara saya menulis ulang:

Jadi masuk ke nomor konsol dari 1 hingga 100 — saya memerlukan satu putaran
Untuk kelipatan 3, bukan angka, keluarannya adalah string 'Fizz'
Lakukan hal yang sama untuk kelipatan 5 dengan output 'Buzz'
Jika bilangan tersebut merupakan kelipatan 3 dan 5, maka keluarkan 'FizzBuzz' — bagaimana cara memeriksa apakah a adalah kelipatan b??
Jika semua kasus di atas gagal maka keluarkan saja angkanya apa adanya

Saya mungkin akan bertanya kepada pewawancara apakah saya harus khawatir tentang kasus-kasus buruk atau masukan yang buruk.

Biasanya tersirat bahwa masukan akan benar dan kasus tepi mungkin tidak diperlukan.

Fakta bahwa Anda bertanya, menambahkan sentuhan kefasihan pada pendekatan pemecahan masalah Anda.

Solusinya

Satu hal yang penting dan layak untuk dipraktikkan adalah memandu orang tersebut melalui langkah-langkah Anda saat Anda membangun solusi selama wawancara.

Mulailah dengan yang sudah jelas, Anda mungkin memerlukan fungsi atau kelas sebagai konstruksi utama Anda.

Mulailah dari sana dan selalu pikirkan prinsip K.I.A.S.S.A.P :) — Buatlah Sesederhana Mungkin

Langkah pertama

// comments are me talking out loud
// let’s build the function structure
function fizzBuzz( start = 1, end = 100) { // default parameters to set the default range
// I need a loop — let’s go with for
for( let i = start; i <= end; i++) {
// probably a variable for what will be outputted
let output = i;
// rest of the logic here
// outputting the result
console.log(output);
}
}
// call the function
fizzBuzz(); // this prints out 1 to 100 — fancy ;)

Hal di atas memenuhi tujuan pertama saya pada pemahaman tantangan yang saya tulis ulang

Tahap kedua

Sekarang jika saya mengikuti irama tantangan, saya akan menyelesaikan dua hal:

1. Memilih operator yang tepat untuk mengetahui apakah suatu bilangan merupakan kelipatan bilangan lain

2. Terapkan untuk kondisi kelipatan 3 dan keluaran 'Fizz'

Operator sisa — %, adalah alat yang sempurna di sini. Jika bilangan a merupakan kelipatan dari bilangan b maka

( b % a) === 0; // will be true;
// 4 is a multiple of 2
( 4 % 2 ) === 0; // is true

Mari kita terapkan ini di badan fungsi kita

// rest of the logic here
if( (i % 3) === 0 ) {
output = ‘Fizz’;
}
// Knowing that 3,6 and 9 are multiple of 3 let’s
// quickly test a small sequence by calling
fizzBuzz(1,10);
// this should output
// 1, 2, ‘Fizz’, 4, 5, ‘Fizz’, 7, 8, ‘Fizz’, 10

Langkah terakhir

Karena kondisi Fizz berjalan dengan sempurna, mari terapkan logika yang sama pada kondisi lainnya.

// multiple of 5
if( (i % 5) === 0 ) {
output = ‘Buzz’;
}
// multiple of 3 and 5
if( (i % 3) === 0 && (i % 5 === 0)) {
output = ‘FizzBuzz’;
}

Wow!! ini memenuhi semua persyaratan dan memberi kita solusi terbaik setelah disusun dan dihilangkan dari semua komentar.

function fizzBuzz( start = 1, end = 100) { 
    for( let i = start; i <= end; i++) {
        let output = i;
        if( (i % 3) === 0 ) {
            output = 'Fizz';
        }
        if( (i % 5) === 0 ) {
            output = 'Buzz';
        }
        if( (i % 3) === 0  && (i % 5) === 0) {
            output = 'FizzBuzz';
        }
        console.log(output);
    }
}
fizzBuzz();

Sekarang pada titik ini, saya memiliki solusi yang berfungsi yang memenuhi permintaan tantangan. Berikut ini adalah hal yang sangat rumit dalam situasi wawancara.

Ada sesuatu yang mengganggu saya tentang kode saya. Blok if terakhir yang memeriksa kelipatan 3dan 5 tampaknya mubazir.

Sekarang haruskah saya menyuarakannya dengan lantang dan mengusulkan untuk melakukan refaktorisasi atau haruskah saya menunggu pewawancara untuk mengatakannya?

Wawancara adalah tentang mengatur waktu dan memaksimalkan kelebihan Anda dibandingkan kekurangan Anda. Jika Anda merasa sangat yakin bahwa Anda mempunyai kesempatan bagus untuk menghasilkan sesuatu yang lebih solid dalam waktu yang bisa diatur, maka lakukanlah. Jika ragu, tunggu untuk ditanya.

Dengan cara ini, pewawancara telah memutuskan bahwa sisa waktu Anda mungkin ada baiknya untuk menggali pertanyaan ini lebih dalam.

Jika diputuskan bahwa akan menarik untuk melihat refactor, ini mungkin merupakan cara untuk mendekati langkah-langkah refactor

Refaktor

Tentu saja kita bisa mendapatkan satu kalimat yang bagus di sini untuk tantangan khusus ini, tapi saya bukan penggemar melakukan hal-hal demi kemewahan atau keindahan.

Jadi mari kita beralih. Apa yang akan saya lakukan kali ini adalah saya akan menunjukkan solusi terakhir saya dan saya akan memandu Anda bagaimana saya mencapainya.

Ini bisa menjadi keterampilan yang berguna jika Anda ingin membaca dan memahami kode orang lain atau jika Anda ingin menjelaskannya kepada orang lain.

Selama bertahun-tahun saya telah memberikan banyak solusi untuk tantangan ini, namun solusi di bawah ini adalah favorit saya.

function fizzBuzz( start = 1, end = 100) {
 for( let i = start; i <= end; i++) {
  let output = ( (i % 3) ? ‘’ : ‘Fizz’ ); // mult of 3 is falsy
  output += ( (i % 5) ? ‘’ : ‘Buzz’) ; // mult of 5 is falsy
  console.log(output || i); // output i if output is falsy
 }
}
fizzBuzz(1,15);

Solusinya menggunakan sintaks operator ternary untuk mengatur kondisi dan memanfaatkan sesuatu yang mungkin tidak terlalu jelas pada awalnya bagi mata yang tidak terlatih - nilai-nilai JavaScript yang salah.

Mari kita mulai dengan nilai-nilai palsu JavaScript, apa yang sedang kita bicarakan. Definisi yang bagus diberikan oleh Jaringan Pengembang Mozilla (MDN ):

Nilai falsy adalah nilai yang dianggap salah ketika ditemui dalam konteks Boolean.

JavaScript menggunakan Konversi Tipe untuk memaksakan nilai apa pun ke Boolean dalam konteks yang memerlukannya, seperti kondisional dan loop.

Untuk konteks khusus kami, kata kunci yang penting adalah “Konteks Boolean”dan “kondisional” karena relevan dengan solusi kami.

Sebelum melihat penerapannya, berikut adalah daftar nilai falsy yang paling umum dalam Javascript:

Boolean false tidak sama dengan string ‘false’
Angka 0 — sekali lagi ini berbeda dengan string '0'
Objek null
Tipe primitif tidak terdefinisi yang ditetapkan ke variabel yang tidak diinisialisasi
Representasi apa pun dari string kosong seperti tanda kutip tunggal, tanda kutip ganda, atau tanda kutip balik.

Penulisan ulang

Mari fokus pada satu segmen dari fungsi fizzBuzz kita

if( (i % 3) === 0 ) {
 output = ‘Fizz’;
}
// this could be refactored as
if( !(i % 3) ) output = ‘Fizz’;

Menguraikan garis yang difaktorkan ulang memberi kita gambaran ini

if (…) ==› konstruk kondisional di luar — konteks boolean di dalam
! ==› salah
(i % 3) ==› ketik paksaan — akan memeriksa apakah nilai salah atau benar

Ganti i dengan beberapa angka untuk lebih memahaminya

if (!( 1 % 3))
/*becomes if (!( 3 )) /*3 is not false or falsy so check fails*/
if (!( 2 % 3))
/*becomes if (!( 6 )) /*6 is not false or falsy so check fails*/
if (!( 3 % 3))
/*becomes if (!( 0 )) /*0 is not false but is falsy so check passes*/

Sekarang saya dapat menulis ulang seluruh fungsi saya menggunakan logika di atas

function fizzBuzz( start = 1, end = 100) {
 for( let i = start; i <= end; i++) {
  let output = i;
  if( !(i % 3) ) output = ‘Fizz’;
  if( !(i % 5) ) output = ‘Buzz’;
  if( !(i % 3) && !(i % 5) ) output = ‘FizzBuzz’;
  console.log(output);
 }
}

Saya cukup gembira saat mendapatkan solusi ini, namun sayangnya tidak memakan waktu lama. Baris terakhir masih mubazir bagi saya dan sejujurnya mengganggu saya. Bagaimana saya bisa menggabungkan cek 3 dan 5 dalam satu pass?

Lalu saya tersadar, bagaimana jika saya bisa memulai dengan string kosong, lampirkan kata 'Fizz' jika melewati kondisi 3 dan lampirkan kata 'Buzz' jika melewati kondisi 5 juga. Saya menggambar ini di selembar kertas

i = 1 ==› tidak ada Fizz '' ==› tidak ada Buzz '' ==› keluarannya adalah 1
i = 3 ==› ya ‘Fizz’ ==› no Buzz ‘’ ==› keluarannya adalah ‘Fizz’
i = 5 ==› tidak mendesis '' ==› ya 'Buzz' ==› keluarannya adalah 'Buzz'
i = 15 =› ya 'Fizz' ==› ya 'Buzz' ==› keluarannya adalah 'FizzBuzz

Operator ternary akan mengizinkan pemberian nilai jika kondisi diperiksa dan nilai alternatif jika gagal dengan cara yang sangat singkat.

Hal lain menjadi jelas, kita mengeluarkan string atau angka saat kita menelusuri nilai i dan seperti yang kita lihat di bagian sebelumnya, string kosong adalah kesalahan nilai. Jadi bagaimana kita menerjemahkan semua kecerdasan itu ke dalam kode kerja?

Bagian penting untuk mencapai hal tersebut adalah bahwa nilai output akan menjadi salah satu dari kemungkinan string 'Fizz', 'Buzz', 'FizzBuzz' atau menjadi falsy. Dalam kasus yang salah i hanya akan diteruskan apa adanya.

Jadi penulisan ulang terakhir dengan lebih banyak komentar

function fizzBuzz( start = 1, end = 100) {
 for( let i = start; i <= end; i++) {
  // output is assigned a value or empty
  let output = ( (i % 3) ? ‘’ : ‘Fizz’ );
  // output concatenates the next value
  output += ( (i % 5) ? ‘’ : ‘Buzz’) ;
  // || or operator if output is falsy will show i value
  console.log(output || i);
 }
}
fizzBuzz(1,15);

Mudah-mudahan, Anda mengikuti semua itu :) Ini adalah solusi yang sangat memuaskan bagi saya karena saya yakin ini mudah dibaca, memecahkan masalah dan memiliki sentuhan JavaScript yang fasih di dalamnya.

Kata-kata terakhir

Latihan coding hanya mencakup satu aspek dari banyak hal yang terjadi selama wawancara coding.

Seperti yang saya sebutkan langkah-langkahnya dan untuk dapat mencapainya, terlepas dari kompleksitas masalahnya, diperlukan banyak latihan.

Jangan ragu untuk menggunakan wawancara tiruan (kami akan segera menawarkan beberapa wawancara dalam Javascript, tetapi akan dibahas lebih lanjut nanti) untuk melatih aspek percakapannya.

Semoga bermanfaat, share dan live comment jika berkenan :)