Bagaimana Menaklukkan Tantangan Coding Wawancara Kerja

Seperti yang Anda ketahui, saya telah melamar pekerjaan dalam pengembangan web selama beberapa minggu dan saya pikir akan menjadi ide yang baik untuk membagikan beberapa tantangan pengkodean yang saya temui.

Tidak hanya itu, tetapi saya akan membagikan cara saya mengatasi tantangan ini. Memang, ada banyak cara untuk mengatasi tantangan ini, tetapi ini adalah cara saya mengatasinya. Jika Anda memiliki cara berbeda, itu luar biasa dan saya ingin Anda membagikannya dengan saya!

Saya tidak akan membagikan informasi yang dapat diidentifikasi tentang perusahaan atau hal spesifik pada proses wawancara perusahaan tersebut untuk menjaga integritas proses.

Baiklah, mari kita mulai.

Tantangan

Ini adalah tantangan yang baru-baru ini saya berikan yang membuat saya merasa nyaman untuk menyelesaikannya:

Tugas: Menampilkan daftar postingan bergaya dasar dari titik akhir dalam urutan kronologis terbalik

Untuk melindungi perusahaan dan informasinya, saya tidak akan membagikan URL yang saya kembalikan informasinya tetapi sebaliknya akan memiliki tautan umum dari JSONPlaceholder (API sumber terbuka yang hebat, gratis, untuk pengembang ketika Anda perlu mendapatkan beberapa data luar generik) pada kode di bawah ini.

Inilah HTML yang saya mulai sehingga kami memiliki sesuatu untuk ditampilkan pada hasil kami:

Itu

Original text


    tag memiliki id sehingga kita bisa menatanya nanti dalam proses.

    Mengambil Data Dari Endpoint

    Baiklah, mari kita gali bagian JavaScript dari tantangan ini. Pertama, saya ingin mengatur variabel keluaran dan tampilan saya:

    Saya menggunakan let untuk variabel keluaran dan mengaturnya ke nol karena kita akan mengubah nilainya nanti dalam kode. The daftar variabel dideklarasikan dengan const karena nilai itu tidak akan berubah.

    Dalam contoh di atas, kita mendeklarasikan fungsi panah bernama getData dibungkus dalam blok try ... catch (Ini adalah bersih / lebih mudah untuk digunakan / dibaca sintaks yang menggunakan mencoba beberapa kode dan tangkapan kesalahan jika mereka terjadi - Anda juga akan melihat bagian tangkapan di bawah). Karena kita mendapatkan data secara asinkron, kita juga perlu menggunakan async / await untuk mengambil data. Ini adalah metode yang paling saya sukai, tetapi saya tahu ada banyak cara lain untuk mendapatkan data dari titik akhir, jadi silakan bagikan milik Anda: D

    Setelah kita mendeklarasikan variabel data kita , hal berikutnya adalah mengatur variabel untuk mengubah data yang dikembalikan ke objek JSON sehingga kita bisa mendapatkannya dalam bentuk yang bisa digunakan. Kami melakukannya dengan metode .json () . Kami juga menunggu datanya karena jika kami menghilangkan kata kunci await , JavaScript akan mencoba mengubah variabel data menjadi JSON tetapi datanya belum ada di sana karena berasal dari API asinkron.

    Sebagai baris terakhir di bagian ini, kami membuat log data yang kami dapatkan kembali dari titik akhir API hanya untuk memastikan kami mendapatkan semua yang kami inginkan. Kami memiliki array yang penuh dengan objek. Anda juga akan melihat bahwa kunci publish_at menyimpan tanggal kami dan tidak ada dalam jenis urutan apa pun. Formatnya juga bukan angka empat digit sederhana yang mewakili tahun yang akan memudahkan untuk menyaringnya ke dalam urutan kronologis terbalik . Kami harus mengurusnya.

    Memanipulasi Data Kami

    Di sini kami mendeklarasikan variabel dataCopy yang menunjuk ke variabel dataJSON yang dimutasi menjadi array melalui operator penyebaran (...) . Pada dasarnya, kami menyalin data JSON kami yang dikembalikan sehingga kami tidak memanipulasi yang asli (praktik buruk) saat membuatnya menjadi larik sehingga kami dapat mengulanginya.

    Setelah itu, kita urutkan array. Sortir adalah metode array yang sangat berguna yang akan menempatkan indeks array kita ke dalam urutan yang kita pilih berdasarkan fungsi yang kita berikan ke sort.

    Biasanya, kita mungkin ingin mengurutkan data berdasarkan nilai (terbesar ke terkecil) jadi kita mengurangi parameter a dari parameter b . Tetapi karena kita perlu menampilkan hasil kita dalam urutan kronologis terbalik, saya memutuskan untuk membuat tanggal baru (diselesaikan dengan operator baru dan metode bawaan JavaScript Tanggal yang membuat platform baru berformat contoh tanggal independen. Sekarang, karena a dan b mewakili objek kami yang berada di dalam indeks array kami, kami dapat mengakses pasangan kunci / nilai yang ada di dalam objek tersebut. Jadi, kami mengurangi b.published_at dari a.published_at dan ini akan memberi kami tanggal dimembalik urutan kronologis .

    Menampilkan Hasil Kerja Kita

    Ingat variabel keluaran yang kita setel ke nol di bagian paling atas program kita? Nah sekarang saatnya untuk bersinar!

    Jadi, ada beberapa hal yang terjadi di sini. Pertama, kami menetapkan variabel output kami ke nilai baru dengan memetakan variabel dataCopy kami menggunakan metode peta . Metode ini mengembalikan larik baru dengan hasil memanggil fungsi yang disediakan sekali untuk setiap indeks. The Item parameter mewakili benda kami dalam array kita yang kembali dari titik akhir dan dengan demikian memiliki akses ke semua sifat mereka seperti judul dan published_at .

    Kami mengembalikan dua elemen daftar dengan a di dalam masing-masing (untuk tujuan gaya), serta string untuk judul dan Tanggal Diterbitkan . Di dalamnya, kami memiliki variabel kami yang menggunakan literal template untuk mengatur judul dan tanggal untuk setiap posting.

    Kemudian, kami menetapkan innerHTML variabel daftar kami sama dengan variabel keluaran kami .

    Akhirnya, kami memiliki braket penutup dan penanganan kesalahan dari blok try ... catch kami serta pemanggilan fungsi kami:

    Kode Akhir

    Inilah tampilan badan kode lengkap kami sekarang:

    Dan inilah gaya CSS dasar kami:

    Dan inilah hasil dari pekerjaan kami dengan gaya yang sangat mendasar:

    Seperti yang Anda lihat, kami menyelesaikan apa yang ingin kami lakukan dan pada kenyataannya daftar tersebut berada dalam urutan kronologis terbalik . Yay!

    Saya harap Anda menikmati langkah-langkah proses berpikir saya ini dan bagaimana saya memecahkan tantangan ini. Memang, ada banyak cara untuk menyelesaikan ini, jadi silakan bagikan milik Anda dengan saya! Saya tidak sabar untuk menjaga serial ini terus berjalan dan akan memposting yang lain setelah saya melalui tantangan lain!

    Juga, saya memposting silang sebagian besar artikel saya di platform hebat seperti Dev.to dan Medium sehingga Anda dapat menemukan pekerjaan saya di sana juga. Artikel ini pertama kali diposting di blog saya pada 27 Mei 2019.

    Sementara Anda di sini mengapa tidak mendaftar untuk Newsletter saya . Saya berjanji tidak akan pernah mengirim spam ke kotak masuk Anda dan informasi Anda tidak akan dibagikan dengan siapa pun / situs. Saya suka sesekali mengirimkan sumber daya menarik yang saya temukan, artikel tentang pengembangan web, dan daftar posting terbaru saya.

    Semoga hari Anda menyenangkan penuh dengan cinta, kegembiraan, dan coding!