Cara menggunakan javascript untuk coding wawancara

JavaScript sudah berjalan di browser Anda di komputer, di tablet, dan di ponsel cerdas Anda

JavaScript bebas digunakan untuk semua orang

Pembelajaran saya

Lacak kemajuan Anda dengan program "Pembelajaran Saya" gratis di W3Schools

Masuk ke akun Anda, dan mulai dapatkan poin

Ini adalah fitur opsional. Anda dapat mempelajari W3Schools tanpa menggunakan My Learning

Referensi JavaScript

W3Schools mengelola referensi JavaScript lengkap, termasuk semua objek HTML dan browser

Referensi berisi contoh untuk semua properti, metode, dan peristiwa, dan terus diperbarui sesuai dengan standar web terbaru

Saya telah dengan hati-hati memeriksa lebih dari 50 sumber daya, saya telah melalui 10 wawancara JavaScript, dan saya telah mendapatkan pekerjaan di startup unicorn

Dan selama seluruh proses ini, saya mulai melihat pola dalam pertanyaan wawancara JS yang paling sering diajukan

Pada artikel ini, saya telah mencoba membuat daftar konsep yang akan mencakup 80% dari setiap wawancara JS yang bagus

Jadi, jika Anda sedang mempersiapkan wawancara JS berikutnya, ini adalah lembar contekan yang sempurna bagi Anda untuk meninjau dan memperkuat keterampilan Anda. Lakukan ini dan Anda akan siap untuk bergoyang. 💃

📝Prasyarat

• Pengetahuan dasar tentang web dan pemrograman
• Familiar dengan HTML/CSS dan JavaScript (terutama sintaks ES6+)

Daftar Isi 📜

• – Variabel JS dan Metode Array
• – Cakupan, Penutupan, dan Pengangkatan
• – Prototipe dan "ini"
• – Event Loops, Timer, dan Janji
• - Async/defer, Polyfill, Debouncing, dan Throttling

Peringatan. Fokus di sini sebagian besar adalah mencakup konsep-konsep yang relevan dengan wawancara dan bukan membuat buklet komprehensif untuk mempelajari bahasa. Perlakukan ini lebih seperti lembar contekan

Jika Anda ingin mempelajari lebih dalam dan mempelajari lebih lanjut konsep JS, lihat kurikulum freeCodeCamp

Dengan itu menyingkir - ayo pergi

Dasar-Dasar JavaScript 👶

Mari kita mulai dengan beberapa konsep dasar yang perlu diketahui oleh setiap pengembang JS

Variabel dalam JavaScript 📥

Variabel adalah blok bangunan dari setiap bahasa pemrograman. Anda menggunakannya untuk menyimpan nilai. Variabel dapat berupa angka, string, dan banyak jenis lainnya

Sekarang, JS adalah bahasa yang diketik secara longgar. Anda tidak perlu menyatakan jenis variabel. Anda bisa mendeklarasikannya, dan JS akan mengetahuinya sendiri

Sekarang, dalam JavaScript kita memiliki 3 cara untuk mendeklarasikan variabel.

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

Inilah perbedaan utamanya

Mari kita coba memahaminya melalui contoh

Kami akan membahas ruang lingkup nanti. Untuk saat ini, mari kita fokus pada perbedaan lainnya

var a = 3
var a = 4

console.log(a) // 4 as var variables can be redeclared + updated

let b = 3
let b = 4

console.log(b) // Syntax Error as let variables cannot be redeclared

// If we just do, it will work because it can be updated
b = 4 

const c = 3
const c = 4

console.log(c) // Syntax Error as const variables cannot be redeclared or updated

const d

// Will this throw an error? Go through the table and try to find the answer.

Catatan. Dalam JavaScript, menempatkan titik koma setelah akhir pernyataan adalah opsional. Saya akan melewatkannya di sini demi keterbacaan

== vs === dalam JavaScript

Mari kita bandingkan beberapa variabel. Ada dua cara untuk melakukannya

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Array dalam JavaScript

Sekarang setelah kita mengetahui sedikit tentang variabel, mari beralih ke array dan metode array

Jika kita telah mendeklarasikan banyak variabel, masuk akal untuk menyimpannya di suatu tempat. Kalau tidak, akan sulit untuk melacak semuanya. Array adalah salah satu cara menyimpan variabel

let a = 4
const b = 5
var c = 'hello'

const array = [a, b, c]

// or you can just directly do

const arr = [4,5,'hello']

Tapi hanya menyimpan variabel dalam array agak membosankan. Kita dapat melakukan lebih banyak hal dengan array ini (seperti mengakses variabel-variabel ini atau mengubah urutan penyimpanannya atau cara penyimpanannya)

Untuk itu, JS memiliki banyak metode. Mari kita lihat beberapa di antaranya sekarang

Metode Larik JavaScript 🧰

Metode array yang paling sering digunakan di JS adalah.

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

Mari kita bahas

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

Metode larik // Return the words with more than 6 letters const words = ['react', 'script', 'interview', 'style', 'javascript'] const ans = words.filter((word) => word.length > 6) console.log(ans) // ['interview', 'javascript'] 4

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

Metode larik // Return the words with more than 6 letters const words = ['react', 'script', 'interview', 'style', 'javascript'] const ans = words.filter((word) => word.length > 6) console.log(ans) // ['interview', 'javascript'] 5

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

Mari kita lihat sebuah contoh. Saya telah menggunakan fungsi panah di sini. Jika Anda sedikit tidak nyaman dengan fungsi, Anda dapat membahas bagian berikutnya terlebih dahulu dan kembali lagi

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

Cobalah untuk melakukan latihan sendiri terlebih dahulu untuk menguji pengetahuan Anda. Jika Anda menemukan solusi yang berbeda atau lebih baik, beri tahu saya

Secara umum, tindak lanjut untuk ini. dapatkah Anda melakukannya tanpa metode array?

let newArr = []

for (let i = 0; i < words.length; i++) {
  if (words[i].length > 6) {
    newArr.push(words[i])
  }
}
console.log(newArr)

Metode larik // Return the words with more than 6 letters const words = ['react', 'script', 'interview', 'style', 'javascript'] const ans = words.filter((word) => word.length > 6) console.log(ans) // ['interview', 'javascript'] 8

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

Pertama-tama,

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return a new array where even numbers are multiplied by 2 
let arr = [1, 2, 3, 4, 5, 6, 7]

function consoleEven(arr) {
  let data = arr.map((num) => (num % 2 === 0 ? num * 2 : num * 1))
  
  console.log(data)  // [1,  4, 3, 8, 5, 12, 7]
}


// ? is the ternary operator. If the condition is true - first statement is returned otherwise the second one.


consoleEven(arr) 

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Dan kedua, Anda dapat melakukan metode chaining di

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Convert  the new array back to original

function consoleEven(arr) {
  let data = arr
    .map((num) => (num % 2 === 0 ? num * 2 : num * 1))
    .map((item) => (item % 2 === 0 ? item / 2 : item / 1))
    
  console.log(data)
}

consoleEven(arr)

Catatan.

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

Pemrograman Fungsional dalam JavaScript 🛠

Kami telah menggunakan fungsi di atas. Mari kita bahas lebih detail sekarang

Sama seperti bagaimana kita menggunakan variabel untuk menyimpan nilai, kita dapat menggunakan fungsi untuk menyimpan potongan kode yang dapat kita gunakan kembali

Anda dapat membuat fungsi dengan dua cara

function a(){
 console.log('I am a normal function');
 }
 
const b = () => {
console.log('I am an arrow function')
}

// They are essentially the same but with a few differences which we will cover as we go along this tutorial. 

// We can pass variables as arguments

const c = (name) => {
console.log(`My name is ${name}`)
}

// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.


// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.

const greet = () =>  {
    const prefix = 'Mr'
    return (name) => {
        console.log(`${prefix} ${name}, welcome!`)
    }
}

console.log(greet()('Jack'))

Sekarang, mari kita membahas beberapa konsep penting yang berkaitan dengan fungsi

Cakupan Fungsi dalam JavaScript 🕵️

Lingkup menentukan dari mana variabel dapat diakses

Ada tiga jenis ruang lingkup

• Global (deklarasi di luar fungsi apa pun)
• Fungsi (deklarasi di dalam fungsi)
• Blok (deklarasi di dalam blok)

Ingat dari sebelumnya bahwa

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Penutupan dalam JavaScript (❗penting) 🔒

Kami telah menggunakan penutupan tanpa menyadarinya. Pada contoh di bawah ini,

// Return a new array where even numbers are multiplied by 2 
let arr = [1, 2, 3, 4, 5, 6, 7]

function consoleEven(arr) {
  let data = arr.map((num) => (num % 2 === 0 ? num * 2 : num * 1))
  
  console.log(data)  // [1,  4, 3, 8, 5, 12, 7]
}


// ? is the ternary operator. If the condition is true - first statement is returned otherwise the second one.


consoleEven(arr) 

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Bagian ini akan memiliki banyak kata-kata mewah, jadi bersabarlah. Kami akan membahasnya satu per satu

kata MDN

Sebuah fungsi yang dibundel bersama dengan lingkungan leksikalnya membentuk sebuah penutup

Oke, apa itu lingkungan leksikal?

Ini pada dasarnya adalah keadaan sekitar – memori lokal bersama dengan lingkungan leksikal induknya

Apa? . Mari kita pahami dengan contoh sederhana

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Ketika x dipanggil, y dikembalikan. Sekarang, y sedang menunggu untuk dieksekusi. Seperti senjata yang dimuat menunggu untuk ditembakkan. 🔫

Jadi, ketika kita akhirnya memanggil z, y dipanggil. Sekarang, Anda harus mencatat

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Voila. Itu dia - ini adalah penutupan

Bahkan ketika fungsi dikembalikan (dalam kasus di atas y) mereka masih mengingat ruang lingkup leksikalnya (dari mana asalnya)

Kutipan yang sama sekali tidak terkait untuk iseng 👻

Mereka mungkin lupa apa yang Anda katakan - tetapi mereka tidak akan pernah lupa bagaimana Anda membuat mereka merasa - Carl W. Buehner

Saya bersumpah artikel lainnya sah 🤞 Teruslah membaca

Keuntungan Penutupan di JavaScript 😎

• Kari

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

• Penyembunyian/Enkapsulasi Data

Misalkan Anda ingin membuat aplikasi counter. Setiap kali Anda memanggilnya, hitungannya bertambah 1. Tetapi Anda tidak ingin mengekspos variabel di luar fungsi. Bagaimana cara melakukannya?

Anda dapat menebaknya - penutupan

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Jangan khawatir tentang

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Kerugian Penutupan di JavaScript 😅

• Konsumsi memori yang berlebihan atau kebocoran memori dapat terjadi

Misalnya, variabel tertutup tidak akan dikumpulkan dari sampah. Ini karena, meskipun fungsi luar telah berjalan, fungsi dalam yang dikembalikan masih memiliki referensi ke variabel tertutup

Catatan. Pengumpulan sampah pada dasarnya menghapus variabel yang tidak terpakai dari memori secara otomatis

Mengangkat dalam JavaScript 🚩

Ini adalah perilaku default JavaScript untuk memindahkan deklarasi ke bagian atas program

• const a = [1,2,3,4,5]
  
  // Create a new array which multiplies every element by 2
  
  const d = a.map(function(item){ return item*2 })
  
  console.log(d) // [2,4,6,8,10]
  

  _9 deklarasi diangkat dan diinisialisasi dengan

  
  function consoleEven(arr) {
    let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
    console.log(data) // undefined
  }
  
  consoleEven(arr)
  

  5
• Deklarasi

  // Return the words with more than 6 letters
  const words = ['react', 'script', 'interview', 'style', 'javascript']
  
  const ans = words.filter((word) => word.length > 6)
  
  console.log(ans) // ['interview', 'javascript']
  

  0 dan

  // Return the words with more than 6 letters
  const words = ['react', 'script', 'interview', 'style', 'javascript']
  
  const ans = words.filter((word) => word.length > 6)
  
  console.log(ans) // ['interview', 'javascript']
  

  1 diangkat tetapi tidak diinisialisasi

• 
  function consoleEven(arr) {
    let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
    console.log(data) // undefined
  }
  
  consoleEven(arr)
  

  8 definisi juga diangkat dan disimpan apa adanya

Mari kita lihat sebuah contoh

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Fiuh. Saya sudah selesai dengan fungsi di sini, tetapi jika Anda ingin lebih banyak, lihat pembicaraan luar biasa ini oleh Anjana Vakil tentang pemrograman fungsional

Objek dalam JavaScript 🔮

Sama seperti array, objek adalah cara menyimpan data. Kami melakukannya dengan bantuan key-value pair

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

// Convert  the new array back to original

function consoleEven(arr) {
  let data = arr
    .map((num) => (num % 2 === 0 ? num * 2 : num * 1))
    .map((item) => (item % 2 === 0 ? item / 2 : item / 1))
    
  console.log(data)
}

consoleEven(arr)

// Convert  the new array back to original

function consoleEven(arr) {
  let data = arr
    .map((num) => (num % 2 === 0 ? num * 2 : num * 1))
    .map((item) => (item % 2 === 0 ? item / 2 : item / 1))
    
  console.log(data)
}

consoleEven(arr)

// Convert  the new array back to original

function consoleEven(arr) {
  let data = arr
    .map((num) => (num % 2 === 0 ? num * 2 : num * 1))
    .map((item) => (item % 2 === 0 ? item / 2 : item / 1))
    
  console.log(data)
}

consoleEven(arr)

Kita dapat menyimpan semua jenis data seperti fungsi di dalam objek. Anda dapat menjelajahi lebih lanjut di sini di MDN

Apa itu function consoleEven(arr) { let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1)) console.log(data) // undefined } consoleEven(arr) _2 dalam JavaScript?

Sekarang, bekerja dengan objek berbeda di JS daripada di bahasa pemrograman populer lainnya seperti C++. Dan untuk memahaminya dengan benar, kita perlu memahami kata kunci

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Mari kita coba memahaminya langkah demi langkah

Dalam sebuah program, terkadang kita membutuhkan cara untuk menunjukkan sesuatu. Seperti mengatakan fungsi ini di sini milik objek ini.

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Anda akan mengerti apa yang saya katakan dengan lebih baik ketika kita melihat beberapa contoh

Untuk saat ini, pikirkan

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Saya tahu saya tahu. Banyak

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Mulai program baru dan cukup masuk

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Ini akan menunjuk ke objek jendela

Sekarang, mari kita ambil contoh dengan sebuah objek

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Sekarang,

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Pada contoh pertama, kita tidak memiliki apa-apa lagi dari

function a(){
 console.log('I am a normal function');
 }
 
const b = () => {
console.log('I am an arrow function')
}

// They are essentially the same but with a few differences which we will cover as we go along this tutorial. 

// We can pass variables as arguments

const c = (name) => {
console.log(`My name is ${name}`)
}

// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.


// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.

const greet = () =>  {
    const prefix = 'Mr'
    return (name) => {
        console.log(`${prefix} ${name}, welcome!`)
    }
}

console.log(greet()('Jack'))

function a(){
 console.log('I am a normal function');
 }
 
const b = () => {
console.log('I am an arrow function')
}

// They are essentially the same but with a few differences which we will cover as we go along this tutorial. 

// We can pass variables as arguments

const c = (name) => {
console.log(`My name is ${name}`)
}

// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.


// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.

const greet = () =>  {
    const prefix = 'Mr'
    return (name) => {
        console.log(`${prefix} ${name}, welcome!`)
    }
}

console.log(greet()('Jack'))

function a(){
 console.log('I am a normal function');
 }
 
const b = () => {
console.log('I am an arrow function')
}

// They are essentially the same but with a few differences which we will cover as we go along this tutorial. 

// We can pass variables as arguments

const c = (name) => {
console.log(`My name is ${name}`)
}

// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.


// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.

const greet = () =>  {
    const prefix = 'Mr'
    return (name) => {
        console.log(`${prefix} ${name}, welcome!`)
    }
}

console.log(greet()('Jack'))

Jika kamu melakukan

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Kami kembali mendapatkan objek

function a(){
 console.log('I am a normal function');
 }
 
const b = () => {
console.log('I am an arrow function')
}

// They are essentially the same but with a few differences which we will cover as we go along this tutorial. 

// We can pass variables as arguments

const c = (name) => {
console.log(`My name is ${name}`)
}

// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.


// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.

const greet = () =>  {
    const prefix = 'Mr'
    return (name) => {
        console.log(`${prefix} ${name}, welcome!`)
    }
}

console.log(greet()('Jack'))

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Apa yang baru saja kita lakukan di atas disebut Implicit Binding. Nilai

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Ada cara lain untuk menggunakan

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Mari kita pahami mengapa kita membutuhkan pengikatan eksplisit melalui sebuah contoh

let a = 4
const b = 5
var c = 'hello'

const array = [a, b, c]

// or you can just directly do

const arr = [4,5,'hello']

Kami menggunakan

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Kami mengulangi kode. Dan salah satu prinsip pemrograman yang baik adalah menjaga agar kode Anda tetap KERING. (Jangan Ulangi Sendiri)

Jadi, mari kita singkirkan

function a(){
 console.log('I am a normal function');
 }
 
const b = () => {
console.log('I am an arrow function')
}

// They are essentially the same but with a few differences which we will cover as we go along this tutorial. 

// We can pass variables as arguments

const c = (name) => {
console.log(`My name is ${name}`)
}

// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.


// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.

const greet = () =>  {
    const prefix = 'Mr'
    return (name) => {
        console.log(`${prefix} ${name}, welcome!`)
    }
}

console.log(greet()('Jack'))

let a = 4
const b = 5
var c = 'hello'

const array = [a, b, c]

// or you can just directly do

const arr = [4,5,'hello']

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Ada banyak cara lain yang bisa kita lakukan

Cobalah untuk menyelesaikan sendiri masalah yang diberikan

let a = 4
const b = 5
var c = 'hello'

const array = [a, b, c]

// or you can just directly do

const arr = [4,5,'hello']

Terakhir, ingat bahwa saya mengatakan bahwa ada perbedaan antara panah dan fungsi biasa

Kasus

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Untuk fungsi panah, nilainya bergantung pada lingkup leksikal – artinya, fungsi luar tempat fungsi panah dideklarasikan

Jadi, jika kita menjadikan

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Fungsi panah pada dasarnya mewarisi konteks induk yang dalam kasus di atas adalah

function a(){
 console.log('I am a normal function');
 }
 
const b = () => {
console.log('I am an arrow function')
}

// They are essentially the same but with a few differences which we will cover as we go along this tutorial. 

// We can pass variables as arguments

const c = (name) => {
console.log(`My name is ${name}`)
}

// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.


// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.

const greet = () =>  {
    const prefix = 'Mr'
    return (name) => {
        console.log(`${prefix} ${name}, welcome!`)
    }
}

console.log(greet()('Jack'))

Prototipe dan Warisan Prototipe dalam JavaScript 👪

Setiap kali kita membuat sesuatu (seperti objek atau fungsi) dalam JavaScript, Mesin JS secara otomatis melampirkan benda itu dengan beberapa properti dan metode

Semua ini datang melalui

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Mari kita lihat beberapa contoh. Jalankan konsol Anda

let a = 4
const b = 5
var c = 'hello'

const array = [a, b, c]

// or you can just directly do

const arr = [4,5,'hello']

Semua ini disebut

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Kita bisa melakukan hal yang sama dengan objek dan fungsi juga

Kami akan selalu menemukan

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Apa itu Warisan Prototypal dalam JavaScript?

let a = 4
const b = 5
var c = 'hello'

const array = [a, b, c]

// or you can just directly do

const arr = [4,5,'hello']

Catatan. Jangan memodifikasi prototipe dengan cara ini. Itu hanya untuk pengertian. Inilah cara yang tepat untuk melakukannya

let a = 4
const b = 5
var c = 'hello'

const array = [a, b, c]

// or you can just directly do

const arr = [4,5,'hello']

Dengan melakukan ini,

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 4
const b = 5
var c = 'hello'

const array = [a, b, c]

// or you can just directly do

const arr = [4,5,'hello']

Ini adalah warisan prototipe

JavaScript asinkron ⚡

Jadi, JS adalah bahasa single-threaded. Hal-hal terjadi satu per satu. Hanya setelah satu hal selesai, kita dapat pindah ke hal berikutnya

Tapi ini menimbulkan masalah di dunia nyata, terutama saat kita bekerja dengan browser

Misalnya, saat kita perlu mengambil data dari web - seringkali kita tidak tahu berapa lama waktu yang dibutuhkan untuk mendapatkannya. Dan apakah kita akan bisa mendapatkan data dengan sukses

Untuk membantu hal ini, JS asinkron berperan

Dan konsep yang paling penting untuk dipahami adalah event loop

Loop Acara di JavaScript ➰

Alih-alih memberikan penjelasan setengah matang di sini, saya sangat menyarankan untuk menonton video Philip Roberts ini jika Anda belum melakukannya

Pelajari semua tentang loop acara di JS di sini

Timer dalam JavaScript – setTimeout, setInterval, clearInterval ⏱️

Saya harap Anda menonton videonya. Itu menyebutkan pengatur waktu. Mari kita bicarakan lebih banyak tentang mereka sekarang. Ini sangat sering ditanyakan dalam wawancara

Metode

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 4
const b = 5
var c = 'hello'

const array = [a, b, c]

// or you can just directly do

const arr = [4,5,'hello']

Anda menggunakan

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 4
const b = 5
var c = 'hello'

const array = [a, b, c]

// or you can just directly do

const arr = [4,5,'hello']

Mari kita membahas beberapa pertanyaan yang menggunakan konsep-konsep ini

let a = 4
const b = 5
var c = 'hello'

const array = [a, b, c]

// or you can just directly do

const arr = [4,5,'hello']

Ini yang sedikit lebih rumit

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

Dan inilah penjelasan singkat tentang apa yang terjadi di sana. ketika

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Sekarang, katakanlah kita ingin hasilnya menjadi 1 2 3 4 5 – apa yang kita lakukan?

Alih-alih

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

Mengapa ini akan berhasil?

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Janji dalam JavaScript (❗penting) 🤝

Janji adalah inti dari Asynchronous JS

Objek Janji mewakili penyelesaian akhir (atau kegagalan) dari operasi asinkron dan nilai yang dihasilkannya

Janji bisa berada di salah satu dari tiga kondisi ini

• Tertunda. keadaan awal, tidak terpenuhi atau ditolak
• Terpenuhi. operasi berhasil diselesaikan
• Ditolak. operasi gagal

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

Catatan.

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Alih-alih

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

Salah satu keuntungan dari promise adalah sintaksnya jauh lebih bersih. Sebelum kami memiliki janji, kami dapat dengan mudah terjebak di callback hell 🌋

Konsep JavaScript Tingkat Lanjut untuk Diketahui

📚 Polyfill dalam JavaScript

Polyfill adalah sepotong kode (biasanya JavaScript di Web) yang digunakan untuk menyediakan fungsionalitas modern pada browser lama yang tidak mendukungnya secara bawaan. MDN

• Mari terapkan untuk

  // Return the words with more than 6 letters
  const words = ['react', 'script', 'interview', 'style', 'javascript']
  
  const ans = words.filter((word) => word.length > 6)
  
  console.log(ans) // ['interview', 'javascript']
  

  _4

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

Perhatikan bagaimana kami menggunakan

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}

consoleEven(arr)

Async dan tunda dalam JavaScript ✔️

Konsep ini sering ditanyakan dalam wawancara oleh perusahaan besar seperti Amazon, Walmart, dan Flipkart. 🏢

Untuk memahami

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Untuk tampilan lebih detail, lihat video ini

Async dan defer adalah atribut

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Mari kita pahami dengan bantuan gambar

Jika ada beberapa skrip yang saling bergantung satu sama lain, gunakan

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Jika Anda ingin memuat skrip eksternal yang tidak bergantung pada eksekusi skrip lain, gunakan

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Catatan. Atribut async tidak menjamin urutan eksekusi skrip

Debouncing dalam JavaScript ⛹️‍♂️

Debouncing adalah topik favorit pewawancara lainnya

Mari kita pahami dengan membuat bilah pencarian

Demo. https. //codesandbox. io/s/debounce-input-field-o5gml

Buat kolom input sederhana di

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

Sekarang, di

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

Pertama, kami telah memilih input dan menambahkan ________6______36 ke dalamnya. Kemudian kami membuat fungsi debounce yang menggunakan fungsi panggilan balik dan penundaan

Sekarang, di dalam fungsi debounce kita membuat timer menggunakan

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Selain itu, kami menggunakan

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Fiuh. Banyak teori. Mari kita lakukan tantangan yang menyenangkan. Anda pasti sudah melihat hitungan mundur sebelum permainan dimulai (seperti 10, 9, 8,. dengan beberapa penundaan di antaranya). Cobalah untuk menulis sebuah program untuk itu

Inilah cara Anda melakukannya

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

Apakah Anda mampu menyelesaikannya?

Pembatasan dalam JavaScript 🛑

Mari kita lihat contoh lagi. Misalkan pada setiap acara pengubahan ukuran jendela kita memanggil fungsi yang mahal. Sekarang, kami ingin fungsi mahal hanya akan dijalankan sekali dalam interval waktu yang diberikan. Demikianlah apa yang dimaksud dengan throttling

Buat

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

Hampir sama dengan debouncing. Perbedaan utama adalah

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Jadi, apa perbedaan antara debounce dan throttling❓

Mari kita ambil contoh bilah pencarian 🔍 dari atas. Saat kami mendebouncing kolom input, kami mengatakan untuk hanya mengambil data saat perbedaan antara dua peristiwa

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Dalam kasus pelambatan, kami membuat pemanggilan fungsi hanya setelah jangka waktu tertentu

Misalkan Anda sedang mencari ensiklopedia di bilah pencarian. Panggilan pertama dilakukan pada

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Jadi, untuk meringkas, debouncing adalah ketika perbedaan antara dua peristiwa

let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

Penyimpanan dalam JavaScript 💾

Akhirnya, topik kecil tapi penting untuk menyelesaikan semuanya

penyimpanan lokal. Data tetap ada bahkan setelah menutup sesi Anda

sessionStorage. Anda kehilangan data saat sesi Anda selesai, seperti saat Anda menutup browser di tab

const a = [1,2,3,4,5]

// Create a new array which multiplies every element by 2

const d = a.map(function(item){ return item*2 })

console.log(d) // [2,4,6,8,10]

Dan kita selesai. 🏁 Saya harap Anda merasa lebih percaya diri tentang wawancara JS Anda berikutnya sekarang. saya berharap yang terbaik untukmu

Jika Anda memiliki pertanyaan / saran / umpan balik, Anda dapat menghubungi saya di Twitter. https. //Indonesia. com/rajatetc

🗃️ Referensi Utama

• Dokumen MDN
• Akshay Saini
• Pecandu Coding
• Wawancara_Javascript

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

raja gupta

insinyur perangkat lunak, unacademy • rajatgupta. xyz • twitter. com/rajatetc • pengembangan, desain, psikologi, dan startup

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai