Pelajari JavaScript: Hal yang Perlu Diketahui Sebelum Anda Memulai

(Penulis tamu: Alexei Butyukaev)

Tidak diragukan lagi bahwa JavaScript adalah bahasa pemrograman yang ekstensif dengan banyak pustaka pembantu, kerangka kerja, basis data, dan add-on lainnya. Akumulasi informasi baru dapat menakutkan bagi programmer pemula. Kyle Simpson Dia mengatakan dalam “Anda tidak tahu JavaScript”: Anda menulis kode dalam JS terlebih dahulu, dan kemudian Anda mengetahui cara kerjanya.“

Saya telah mengerjakan proyek yang dibangun di JS murni dan juga bekerja dengan C# selama beberapa tahun. Di waktu luang saya, saya juga melatih dan mendidik pengembang baru dan memberikan presentasi di konferensi TI. Dan berdasarkan pengalaman saya, saya akan membantu Anda mengetahui cara mempelajarinya.

Dalam artikel ini, saya ingin menyoroti hal-hal yang Pembelajar JS pemula perlu tahu Pada awal proses pembelajaran. Kiat-kiat ini dapat menghaluskan kurva kemiringan dan bahkan mungkin membuat Anda senang untuk memulai di JS

Jadi, mari kita pergi ke depan.

Secara bertahap mendidik diri sendiri

Sekilas, peta jalan pengembang akan menunjukkan kepada Anda seberapa luas ekosistem JS dan seberapa banyak yang perlu Anda pahami. Melihat serangkaian informasi seperti itu, banyak pengembang pemula menyudutkan diri mereka sendiri dan secara keliru berpikir bahwa mereka perlu mengetahui semuanya sekaligus.

Mereka mencoba memahami seluruh ekosistem JS tanpa mempelajari JS itu sendiri. Mereka akhirnya memahami banyak hal di permukaan saat mereka berpindah antar topik. Pengembang ini tidak akan menjadi spesialis di bidang apa pun jika mereka mengambil strategi ini.

Terlepas dari kenyataan bahwa JavaScript adalah bahasa pemrograman yang berkembang pesat dan berkembang, ini didasarkan pada sejumlah ide dasar dan topik dasar. Setiap proyek dengan kompleksitas apa pun dapat difasilitasi dengan menggunakan metode ini.

Dalam pandangan saya, peta jalan untuk pengembang JS baru akan terlihat seperti ini:

Inilah cara kami menggunakannya untuk memahami dasar-dasarnya:

• Bagaimana cara kerja internet? – Saya tidak berpikir saya perlu menjelaskan mengapa Anda perlu tahu itu
• Perencanaan – Ya, pengembang JS harus sering menangani ini juga
• JS Dasar – Anda harus memahami tidak hanya cara mendefinisikan variabel, tetapi juga semua nuansa bahasa
• orang bodoh Mengerjakan proyek tanpa pemahaman yang baik tentang Git bisa sangat membuang waktu
• S. bingkai – Saya akan mulai dengan React, tetapi saya sarankan untuk menelusuri semua opsi dan memilih yang paling menarik. Tentu saja, masih ada lagi di jalan.

Setiap tahap dalam proses ini didukung oleh sejumlah besar data. Identifikasi perbedaan antara klien dan server, pelajari HTML dan CSS, pilih kerangka kerja JS (Angular, React, atau Vue) yang paling sesuai dengan tujuan karir Anda, dan mulailah belajar dengan bijak.

Pengalaman ini akan meningkatkan peluang Anda untuk mendapatkan pekerjaan. Menguasai dasar-dasar JavaScript akan tetap bersama Anda selama sisa hidup Anda. Akibatnya, aturan pertama adalah Untuk mendekati JavaScript dengan cara yang sistematis, daripada terganggu dengan tujuan mempelajari semuanya sekaligus.

Selami topik utama

Anda dapat menemukan kemacetan bahkan dalam topik dasar yang tidak langsung terlihat, tetapi muncul dalam kode proyek Anda yang sebenarnya. Dan pada titik ini, Anda perlu memahami apa yang terjadi dan bagaimana menghadapinya. Berikut adalah contoh pertanyaan wawancara yang bagus untuk pemula:

const resultA = 40 && 2 || 33;
const resultB = (4 * 2) && (3 * 6);
const resultC = 0 && 2

Setengah dari pengembang pemula sering membuat kesalahan saat menjawab pertanyaan tentang apa yang akan terjadi dengan variabel aDan bDan c. Banyak yang berpikir bahwa boolean harus dikembalikan ke sini – true atau false.

Tetapi dalam kode ini, jika semua nilai true, akan mengembalikan nilai riil terakhir, atau yang pertama false Nilai, jika setidaknya salah satunya salah. Dalam kasus kami, 2Dan 18Dan 0, Lurus. Berikut adalah contoh lain dari tugas paling umum dari dunia JS:

for (var i = 0; i < 10; i++) {
	setTimeout ( function ()  {
	console.log(i);
} ,  1000) ; 

Jika Anda sepenuhnya memahami konsep dalam contoh ini, Anda juga akan memahami:

• bidang penglihatan
• penutupan
• Perbedaannya terletak pada cara kerja variabel
• Variabel muncul
• Cara kerja setTimeout dan asynchronous JS.

Ini mengarah ke aturan kedua: Saat menjelaskan kasus seperti itu, periksa lebih dalam jawaban yang diberikan.

Waspadalah terhadap “standar”

Dalam berbagai sumber, perbedaan sering dibuat antara “standar JS lama” dan “standar JS baru”. Fitur ES6, ES7 dan versi JavaScript yang lebih baru diklaim sebagai alat baru yang dapat dipelajari dengan bergabung dalam tim.

Pemrogram pemula memiliki kesalahpahaman bahwa mereka dapat dipelajari secara terpisah, namun tidak demikian halnya. Penghancuran, fungsi panah, operator propagasi, janji, dan kelas adalah semua fitur yang telah lama digunakan sebagai standar bahasa modern. Sangat penting untuk memahami bagaimana bekerja dengan mereka.

Tanpa latihan, JS seperti daun tertiup angin

Misalkan Anda lulus wawancara pertama Anda untuk posisi pengembang JavaScript junior dan menunjukkan pemahaman teoretis yang luar biasa.

Kemudian Anda menemukan bahwa Anda tidak dapat menulis satu baris kode pun sendiri! Inilah saat yang tepat untuk menyebutkan aturan penting ketiga: Praktikkan pengetahuan teoretis Anda setiap saat. Anda tidak hanya akan belajar bagaimana melakukan tugas aplikasi dengan cepat, tetapi Anda juga akan belajar bagaimana menavigasi prinsip-prinsip dasar JavaScript, melalui latihan yang ketat Ini adalah keterampilan yang berguna untuk klien potensial.

Cobalah untuk menerima tantangan yang mungkin Anda temui dalam misi uji apa pun. Ada daftar item, dan masing-masing memiliki harga uniknya sendiri. Lihat pengguna akhir untuk barang dagangan di keranjang yang dipilih.

const  goodsAddedToCart - [ {
	name:  'JavaScript' ,
	price:  20
} ,  {

name:  'React' ,
	price:  30
} ,  {

name: 'HTML/CSS' ,
	price:  202
} ] ;

Saya yakin banyak pemula akan dengan mudah menjelaskan solusinya dengan membuat file for cincin dan result Variabel dengan nilai kosong yang ditetapkan padanya. Itu tidak terlihat sangat elegan, tetapi berhasil, bukan?

var result = 0;
for  (i = 0;  i  <  goodsAddedToCart.length;  i++)  {
	result = result +  goodsAddedToCart[i].price;
} ;

Tetapi bagaimana kita dapat menggunakan kembali metode ini untuk urutan barang yang berbeda – jelas semuanya harus dienkapsulasi dalam suatu fungsi, tetapi mengapa melakukannya ketika JS telah menyediakan alat untuk tugas-tugas seperti itu untuk waktu yang lama, berikut adalah contoh dengan shrink:

goodsAddedToCart.reduce ( (accumulator, ( price } ) => accumulator + price,  0);

Contoh lain:

const getAllPeople = async  () => {
  const response = await fetch('https://swapi.dev/api/people/'};
  const result = await  response.json( );
  return result.results;
} ;

const displayPersonData = ( person, elementToDisplay) => {
const personWrapper = document.createElement ( 'div') ; 
elementToDisplay. appendChild (personWrapper) ;
personWrapper. style. margin = '10 px' ;

for (let [key, value] of Object. entries (person)) {
  const personInfoField = personWrapper. appendChild (document createElement( 'div')) ;
  personInfoField.innerHTML = 'S { key} : $ {value} : ' ; 
}

const displayPeople  =  async  ( ) => {
  const  people  =  await  getAllPeople( ) ;
  const  documentBody  =  document.querySelector( 'body' ) ;

document.Body.innerHTML  =  ' ' ;

people. forEach ( (person)  =>  {
   displayPersonData(person,  documentBody) ;
} ) ;
} ;

Tentu saja, kode ini dapat lebih ditingkatkan. Namun, cukup berlatih bekerja dengan pencarian, array, dan objek. Ada banyak API gratis yang tersedia di internet yang memungkinkan Anda berlatih menangani jenis pekerjaan ini. Misalnya, pertimbangkan sumber daya berikut:

• Star Wars API: SWAPI
• fakta alexwohlbruck / kucing
• jikan.docs.apiary.io
• peramban google.

Pentingnya kode yang singkat dan jelas

Kesalahan fatal lain yang dilakukan Juniors adalah gagal memberi nama variabel dalam kode mereka. Persyaratan utama untuk memahami programmer lain di tim Anda atau setelah beberapa bulan libur, termasuk Anda sendiri, adalah keterbacaan. Misalnya, pertimbangkan sekelompok pengguna, masing-masing dengan nama dan usia:

const  users  = [ {
	name: 'John' , 
	age: 20
	} , { 
	name: 'Alex' , 
	age: 30
	} , { 
	name: 'Thanos' , 
	age: 32432
} ] ;

Bayangkan Anda menggunakan metode pemrosesan peta saat bekerja dengan array ini, yang masuk akal, tetapi untuk beberapa alasan, Anda menamai parameter fungsi yang tidak dikenal sebagai itm:

users.map ( (itm)  =>  {
// There are 100 lines of code 
} ) ;

Mengapa ini harus dianggap sebagai bug dalam konteks ini, ketika semuanya bekerja dengan nama variabel ini atau lainnya? Tentu saja, kesalahan di sini logis, bukan terprogram. Mengapa tidak memanggil setiap elemen larik “pengguna” jika Anda bekerja dengan sekelompok pengguna data?

Dengan cara ini, Anda tidak akan mendapatkan umpan balik kesal dari insinyur lain yang tidak mengerti apa yang dilakukan variabel ini atau itu dalam kode Anda.

Berikut contoh lain dari kode mengasapi:

const getPersonAppearance  =  (object) => { 
	const personShortDescription  =  object. name + " " +  object. surname +             
	" in his " + object. age + "looks awesome";

	// There are 100 lines of code 
	return { 
		personShortDescription, 
		...
	} 
};

Cukup dengan menghancurkan objek array (nama, nama keluarga, usia) Anda bisa mendapatkan ringkasan dan pemahaman dari setiap skrip:

const getPersonAppearance  = ( person ) => { 
	const { name, surname, age} = person;
	const personShortDescription  =  ' S {name} S {surname} in his {age} looks awesome ' ;

	// There are 100 lines of code  
	return {   
		personShortDescription, 
		...
	} 
}; 

Jadi inilah aturan keempat: Dengan mengembangkan kebiasaan baik saat berlatih, Anda tidak perlu mengubahnya di tempat kerja.

terdidik

Sangat penting dalam pemrograman untuk tidak pernah berakhir di sana, karena industri TI berkembang pesat, dengan kerangka kerja dan langkah-langkah baru yang muncul untuk bekerja dengan data.

Jika Anda tidak menguasainya secara bertahap, Anda berisiko terjebak dalam rutinitas yang berulang dan membosankan untuk jangka waktu yang lama, dan bukan karena itu Anda masuk ke profesi ini, bukan?

Setelah Anda memiliki keterampilan dasar pemrograman JS, tepuk punggung Anda, tarik napas dalam-dalam, dan kembali mempelajari peta jalan JavaScript lengkap.

(Pos tamu ini ditulis oleh Alexey Potyukayev untuk hongkiat.com. Alexey adalah pengembang perangkat lunak di Knicks United (nixsolutions.com).)