1. Hiểu Rõ Các Hàm Trong JavaScript

Hàm trong JavaScript có thể coi là một trong những yếu tố cốt lõi, vì chúng có thể:

Được gán cho một biến.

Truyền như một đối số cho các hàm khác.

Được trả về từ một hàm khác.

Một số phương thức quan trọng khi làm việc với hàm trong JavaScript bao gồm bind(), call(), và apply():

bind(): Tạo một hàm mới với ngữ cảnh this đã được ràng buộc.

call() và apply(): Gọi hàm ngay lập tức, truyền this và các đối số cần thiết.

const obj = { value: 10 };

function showValue() {

console.log(this.value);

}

const boundFunction = showValue.bind(obj);

boundFunction(); // 10

2. Hiểu JavaScript Scope Và Closures

Scope

Global Scope: Biến toàn cục có thể truy cập ở mọi nơi trong chương trình.

Local Scope: Biến cục bộ chỉ có thể truy cập trong phạm vi hàm mà nó được khai báo.

Block Scope: Biến khai báo bằng let hoặc const chỉ tồn tại trong một khối (block) như vòng lặp hoặc điều kiện.

Closures

Closure là khái niệm cho phép một hàm nhớ được phạm vi nơi nó được tạo ra, ngay cả khi phạm vi đó đã kết thúc. Điều này rất hữu ích trong nhiều tình huống, ví dụ như việc tạo ra các hàm trả về các giá trị dần dần:

function generator(input) {

let index = 0;

return {

next: function () {

return index < input.length ? input[index++] : null;

},

};

}

3. Hiểu Rõ Về Các Objects

Object.freeze()

Đóng băng đối tượng, không cho phép thay đổi giá trị của các thuộc tính.

const obj = { a: 1 };

Object.freeze(obj);

obj.a = 2; // Không thay đổi được

console.log(obj.a); // 1

Object.seal()

Cho phép thay đổi giá trị các thuộc tính, nhưng không thể thêm hoặc xóa các thuộc tính.

const obj = { a: 1 };

Object.seal(obj);

obj.b = 2; // Không thêm được thuộc tính mới

console.log(obj.b); // undefined

4. Kế Thừa Prototypical

Kế thừa trong JavaScript sử dụng prototype giúp tạo các đối tượng kế thừa thuộc tính và phương thức của đối tượng khác:

function Animal(name) {

this.name = name;

}

Animal.prototype.speak = function () {

return `${this.name} makes a noise.`;

};

function Dog(name) {

Animal.call(this, name);

}

Dog.prototype = Object.create(Animal.prototype);

Dog.prototype.constructor = Dog;

Dog.prototype.speak = function () {

return `${this.name} barks.`;

};

5. Hiểu Về Promises Và Callbacks

Promises

Promise giúp xử lý các tác vụ bất đồng bộ bằng cách trả về một đối tượng đại diện cho giá trị chưa có, có thể là thành công hoặc thất bại.

Pending: Trạng thái chờ xử lý.

Fulfilled: Đã hoàn thành.

Rejected: Bị từ chối.

const promise = new Promise((resolve, reject) => {

resolve("Success");

});

promise.then((result) => console.log(result)); // "Success"

Callbacks

Callback là một hàm được truyền vào và gọi khi một tác vụ bất đồng bộ hoàn thành:

function fetchData(callback) {

setTimeout(() => {

callback("Data received");

}, 1000);

}

fetchData((message) => console.log(message)); // "Data received"

6. Regular Expressions (RegEx)

Regular Expressions (RegEx) là công cụ mạnh mẽ để tìm kiếm, kiểm tra và xử lý chuỗi. Một số ký tự quan trọng:

\d: Đại diện cho một chữ số.

[a-zA-Z]: Đại diện cho các chữ cái.

^, $: Bắt đầu và kết thúc chuỗi.

Ví dụ sử dụng RegEx:

const regex = /\d+/;

console.log("123abc".match(regex)); // ["123"]

7. Hiểu Hàm Map, Reduce và Filter

Map: Biến đổi mỗi phần tử trong mảng thành một giá trị mới.

[1, 2, 3].map((x) => x * 2); // [2, 4, 6]

Reduce: Dùng để tính toán hoặc giảm các phần tử trong mảng thành một giá trị duy nhất.

[1, 2, 3].reduce((sum, x) => sum + x, 0); // 6

Filter: Lọc các phần tử trong mảng dựa trên điều kiện xác định.

[1, 2, 3].filter((x) => x > 1); // [2, 3]

8. Xử Lý Error

Sử dụng try...catch để xử lý lỗi và ngăn ngừa chương trình bị dừng khi có lỗi xảy ra:

try {

throw new Error("Something went wrong");

} catch (e) {

console.error(e.message); // "Something went wrong"

}

9. Hoisting Và Event Bubbling

Hoisting

Hoisting là một cơ chế mà các khai báo biến và hàm trong JavaScript được "đẩy lên" đầu phạm vi. Tuy nhiên, chỉ khai báo hàm và biến với var mới được hoisted, còn với let và const thì không:

console.log(a); // undefined

var a = 5;

Event Bubbling

Event Bubbling là quá trình mà sự kiện xảy ra trên một phần tử được "bong bóng" lên các phần tử cha của nó trong DOM:

document.getElementById("child").addEventListener("click", function () {

console.log("Child clicked");

});

document.getElementById("parent").addEventListener("click", function () {

console.log("Parent clicked");

});

Kết Luận

Hiểu rõ các khái niệm cơ bản trong JavaScript là nền tảng quan trọng để phát triển ứng dụng web hiệu quả. Việc luyện tập các khái niệm như hàm, scope, closure, và xử lý bất đồng bộ sẽ giúp bạn giải quyết các vấn đề trong phát triển phần mềm và chuẩn bị tốt cho các kỳ phỏng vấn JavaScript.