23 pertanyaan sulit untuk wawancara JavaScript

1. Jelaskan Fitur Validasi Kesetaraan JavaScript

Kesulitan: *

• Operator kesetaraan yang ketat ( ===) memeriksa nilai-nilai untuk kesetaraan tanpa melakukan konversi jenis.
• Operator kesetaraan yang tidak ketat ( ==) memeriksa nilai-nilai untuk kesetaraan, mengubahnya menjadi tipe yang umum.

var a = "42";
var b = 42;

a == b;         // true
a === b;        // false

• Jika salah satu nilai yang dibandingkan dapat berupa nilai trueatau false- cobalah untuk menghindari operator ==. Gunakan operator ===.
• Gunakan operator ===dalam hal bahwa jika Anda bekerja dengan nilai-nilai berikut: 0, «»atau [](array kosong).
• Dalam semua kasus lain, Anda dapat menggunakan operator dengan aman ==. Selain itu, ini tidak hanya aman, tetapi juga membantu menyederhanakan kode dan meningkatkan keterbacaannya.

2. Berikan contoh casting ke tipe nilai logis yang tidak terkait dengan tipe ini

Kesulitan: ***

• «» (baris kosong).
• 0, -0, NaN(Bukan nomor).
• null, undefined.

• «hello».
• 42.
• [ ], [ 1, «2», 3 ](array).
• { }, { a: 42 }(objek).
• function foo() { .. } (fungsi).

3. Apa itu IIFE?

Kesulitan: ***

(function IIFE(){
    console.log( "Hello!" );
})();
// "Hello!"

4. Kapan saya harus menggunakan fungsi panah yang muncul di ES6?

Kesulitan: ***

• Gunakan kata kunci functiondalam lingkup global dan untuk properti Object.prototype.
• Gunakan kata kunci functionuntuk konstruktor objek.
• Dalam kasus lain, gunakan fungsi panah.

• Pekerjaan yang nyaman dengan konteks. Fungsi panah menggunakan nilai thiskonteks sekitarnya tanpa memiliki sendiri this. Jika fungsi tersebut digunakan secara berurutan, tanpa menggunakan fungsi biasa dalam konstruksi yang kompleks, ini memastikan pekerjaan yang aman dengan konteksnya.
• Kekompakan. Kode fungsi panah lebih mudah dimasukkan dan lebih mudah dibaca. Mungkin keunggulan fungsi panah ini daripada yang biasa bagi Anda akan tampak kontroversial dan tergantung pada sudut pandang masing-masing pengembang tertentu.
• Kejelasan kode. Jika hampir semua kode diwakili oleh fungsi panah, setiap fungsi biasa dibedakan dalam kode tersebut dengan membuat konteksnya sendiri. Dengan menggunakan fungsi panah, programmer membuat kode yang lebih mudah dipahami di mana lebih mudah untuk dikerjakan daripada di kode tanpa fungsi panah this.

5. Apa perbedaan antara kelas ES6 dan konstruktor fungsi?

Kesulitan: ***

function Person(name) {
  this.name = name;
}

class Person {
  constructor(name) {
    this.name = name;
  }
}

function Student(name, studentId) {
  //      ,   .
  Person.call(this, name);

  //    .
  this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

class Student extends Person {
  constructor(name, studentId) {
    super(name);
    this.studentId = studentId;
  }
}

6. Ceritakan tentang metode Function.prototype.bind ().

Kesulitan: ***

7. Apa fungsi anonim yang biasa digunakan untuk?

Kesulitan: ***

(function() {
  // - .
})();

setTimeout(function() {
  console.log('Hello world!');
}, 1000);

const arr = [1, 2, 3];
const double = arr.map(function(el) {
  return el * 2;
});
console.log(double); // [2, 4, 6]

8. Apa perbedaan antara metode Object.freeze () dan kata kunci const?

Kesulitan: ***

const person = {
    name: "Leonardo"
};
let animal = {
    species: "snake"
};
person = animal; // Uncaught TypeError: Assignment to constant variable.

let person = {
    name: "Leonardo"
};
Object.freeze(person);
person.name = "Lima"; // Uncaught TypeError: Cannot assign to read only property 'name' of object
console.log(person);

9. Apa itu "generator"?

Kesulitan: ***

function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
    let iterationCount = 0;
    for (let i = start; i < end; i += step) {
        iterationCount++;
        yield i;
    }
    return iterationCount;
}

10. Kapan generator harus digunakan?

Kesulitan: ***

• Kode di mana generator digunakan menentukan saat nilai selanjutnya diterima. Generator hanya bertanggung jawab untuk mengembalikan nilai, itu dikendalikan dari luar.
• Ada generator asinkron. Mereka memungkinkan Anda untuk bekerja dengan aliran data yang tidak sinkron.

11. Apa itu "meningkatkan variabel"?

Kesulitan: ****

12. Apa yang akan dihasilkan oleh kode berikut?

Kesulitan: ****

var output = (function(x) {
  delete x;
  return x;
})(0);

console.log(output);

13. Apa yang akan dihasilkan oleh kode berikut?

Kesulitan: ****

var Employee = {
  company: 'xyz'
}
var emp1 = Object.create(Employee);
delete emp1.company
console.log(emp1.company);

console.log(emp1.hasOwnProperty('company')); // false

14. Ceritakan tentang pola desain prototipe.

Kesulitan: ****

15. Apa yang dimaksud dengan "zona mati sementara" di ES6?

Kesulitan: ****

//console.log(aLet)  //  ReferenceError

let aLet;
console.log(aLet); // undefined
aLet = 10;
console.log(aLet); // 10

16. Bisakah Anda menjelaskan perbedaan utama antara metode array forEach () dan map ()? Dalam situasi apa Anda memilih salah satu dari metode ini?

Kesulitan: ****

• Itu beralih ke elemen array.
• Ia melakukan fungsi callback yang diteruskan untuk setiap elemen array.
• Itu tidak mengembalikan apa pun.

const a = [1, 2, 3];
const doubled = a.forEach((num, index) => {
  //  -  num /  index.
});

// doubled = undefined

• Itu beralih ke elemen array.
• Itu mengkonversi setiap elemen dari array asli menjadi elemen dari array baru, memanggil fungsi yang diteruskan untuk setiap elemen dari array asli.

const a = [1, 2, 3];
const doubled = a.map(num => {
  return num * 2;
});

// doubled = [2, 4, 6]

17. Apa perbedaan antara variabel yang tidak dideklarasikan, variabel yang berisi nilai nol, dan variabel yang tidak ditentukan? Bagaimana cara memeriksa variabel untuk fakta bahwa ia tidak dideklarasikan, juga null dan tidak terdefinisi?

Kesulitan: ****

function foo() {
  x = 1; //     ReferenceError
}

foo();
console.log(x); // 1

var foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true

console.log(foo == null); // true.        undefined!

function bar() {}
var baz = bar();
console.log(baz); // undefined

var foo = null;
console.log(foo === null); // true
console.log(typeof foo === 'object'); // true

console.log(foo == undefined); // true        null!

18. Ceritakan tentang modul desain "Modul terbuka"

Kesulitan: *****

var Exposer = (function() {
  var privateVariable = 10;

  var privateMethod = function() {
    console.log('Inside a private method!');
    privateVariable++;
  }

  var methodToExpose = function() {
    console.log('This is a method I want to expose!');
  }

  var otherMethodIWantToExpose = function() {
    privateMethod();
  }

  return {
      first: methodToExpose,
      second: otherMethodIWantToExpose
  };
})();

Exposer.first();        // : This is a method I want to expose!
Exposer.second();       // : Inside a private method!
Exposer.methodToExpose; // undefined

19. Apa perbedaan antara objek Map dan WeakMap?

Kesulitan: *****

var map = new Map();
var weakmap = new WeakMap();

(function() {
    var a = {
        x: 12
    };
    var b = {
        y: 12
    };

    map.set(a, 1);
    weakmap.set(b, 2);
})()

20. Bagaimana parameter dilewatkan ke fungsi JavaScript: dengan referensi atau berdasarkan nilai?

Kesulitan: *****

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

10
changed
unchanged

21. Bagaimana cara mengatur "pembekuan mendalam" suatu objek?

Kesulitan: *****

let person = {
    name: "Leonardo",
    profession: {
        name: "developer"
    }
};
Object.freeze(person); //   
person.profession.name = "doctor";
console.log(person); // { name: 'Leonardo', profession: { name: 'doctor' } }

function deepFreeze(object) {
    let propNames = Object.getOwnPropertyNames(object);
    for (let name of propNames) {
        let value = object[name];
        object[name] = value && typeof value === "object" ?
            deepFreeze(value) : value;
    }
    return Object.freeze(object);
}
let person = {
    name: "Leonardo",
    profession: {
        name: "developer"
    }
};
deepFreeze(person);
person.profession.name = "doctor"; // TypeError: Cannot assign to read only property 'name' of object

22. Mengapa programmer JavaScript kesulitan menggunakan kata kunci ini?

Kesulitan: *****

• Jika fungsi ini dipanggil dalam bentuk biasa (yaitu, menggunakan view view someFunc()), itu thisakan merujuk ke objek global (di browser ini window). Jika kode dieksekusi dalam mode ketat, thisnilai akan ditulis ke undefined.
• Jika fungsi ini disebut sebagai metode objek, maka kata kunci thisakan diwakili oleh objek yang dimiliki metode tersebut.
• call apply, this , call apply.
• , this .
• , new, this , prototype -.
• Jika fungsi itu dibuat menggunakan metode bind , maka kata kunci thisfungsi akan secara kaku terikat pada nilai yang diteruskan bindsebagai argumen pertama. Ini adalah satu-satunya pengecualian pada aturan yang fungsi tidak memiliki nilai hard-coded this. Fungsi yang dibuat menggunakan bindtidak dapat diubah this.

23. Bandingkan penggunaan konstruk async / wait dan generator untuk mengimplementasikan fungsi yang sama

Kesulitan: *****

• Saat iterasi generator menggunakan metode, .next()setiap panggilan ke metode ini mengembalikan nilai tunggal menggunakan kata kunci yield. Saat menggunakan async / menunggu konstruksi, menunggu ekspresi dieksekusi berurutan.
• Desain async / await menyederhanakan penerapan case use generator tertentu.
• Nilai yang dikembalikan oleh generator selalu memiliki formulir {value: X, done: Boolean}, dan fungsi asinkron mengembalikan janji yang diselesaikan dengan nilai X, atau gagal.
• Fungsi asinkron dapat dikonversi ke generator menggunakan janji. Berikut ini adalah contoh konversi semacam itu.

//  
async function init() {
    const res1 = await doTask1();
    console.log(res1);

    const res2 = await doTask2(res1);
    console.log(res2);

    const res3 = await doTask3(res2);
    console.log(res3);

    return res3;
}

init();

//    
function runner(genFn) {
    const itr = genFn();

    function run(arg) {
        let result = itr.next(arg);

        if (result.done) {
            return result.value;
        } else {
            return Promise.resolve(result.value).then(run);
        }
    }

    return run;
}

//   runner    
runner(function* () {
    const res1 = await doTask1();
    console.log(res1);

    const res2 = await doTask2(res1);
    console.log(res2);

    const res3 = await doTask3(res2);
    console.log(res3);

    return res3;
});