NỘI DUNG BÀI VIẾT
Bài viết sau bật mí cho bạn 5 khía cạnh bất cứ ai học JavaScript nên biết.Việc tìm hiểu các khái niệm quan trọng sẽ giúp bạn làm việc với JavaScript dễ dàng hơn.
5 khía cạnh bất cứ ai học JavaScript nên biết
1. Hàm mũi tên
Trong Javascript, bạn có thể tạo một hàm bằng cách sử dụng từ khóa hàm theo cách truyền thống. Nhưng sử dụng cấu trúc hàm mũi tên, bạn có thể viết mã nhanh hơn và làm cho nó thú vị hơn.
Tạo một hàm bằng cách sử dụng từ khóa hàm:
function hello () {
console.log('hello world');
}
// Using arrow function:
const hello = () => {
console.log('hello world');
};Code language: JavaScript (javascript)Chỉ đối với các hàm câu lệnh đơn, bạn có thể đặt câu lệnh trực tiếp không có dấu ngoặc đơn:
const hello = () => console.log('hello world');Code language: JavaScript (javascript)Đối với câu lệnh return, bạn có thể trả về các giá trị trực tiếp mà không cần từ khóa return.
const hello = () => {
return "Hello World";
}
// same as the following:
const hello = () => "Hello World";Code language: JavaScript (javascript)2. Chức năng gọi lại
Khi một hàm được gọi, nó có thể trả về một hàm được gọi là ‘hàm gọi lại’ dưới dạng đối số.
Để hiểu rõ hơn về điều này, hãy tạo một hàm gọi lại hello lấy tên (chuỗi) làm tham số và trả lại lệnh gọi lại bằng một thông báo (chuỗi).
const hello = (name, callback) => {
const greetings = "Hello, " + name + "!";
callback(greetings);
};Code language: JavaScript (javascript)hello -> tên chức năng
name -> tham số được hàm chấp nhận
callback -> trả về hàm bằng cách gửi các từ dưới dạng tham số.
Hãy trả về hàm của chúng ta thông qua hàm gọi lại:
hello("Elyor", (greet) => {
alert(greet);
});Code language: PHP (php)‘Elyor’ là giá trị được gán cho hàm này.
3. Đối tượng trong Javascript
Javascript bao gồm các thuộc tính đối tượng và giá trị của chúng.
const student = {
name : "Harry",
year : 5,
house : "Griffindor",
}Code language: JavaScript (javascript)// Sử dụng console.log (student.name), chúng ta có thể có quyền truy cập vào giá trị của nó;
Thuộc tính có thể có một chức năng như một giá trị:
const hello = { fname : "Hermoine", lname : "Granger", fullName : function () { return this.fname + " " + this.lname; }; console.log(hello.fullName()); //output: "Hermoine Granger"Code language: JavaScript (javascript)Thuộc tính có thể có một đối tượng dưới dạng giá trị:
const nestedObject = {
name: {
type: String,
maxLength: 10
},
regno: {
type: number
}
};Code language: JavaScript (javascript)Vì khai báo hàm cũng bắt đầu bằng {}, khi bạn trả về một đối tượng theo cách này, hãy đảm bảo bạn đặt đối tượng trong dấu ngoặc đơn.
const funcToReturnObject = () => {
return {
name : "Draco",
house : "Slytherin"
};
};Code language: JavaScript (javascript)4. Hủy cấu trúc mảng và đối tượng.
Việc hủy một mảng hoặc đối tượng thành các biến. Đó là, gán giá trị mảng hoặc đối tượng cho tên biến.
Các giá trị được đặt dưới dạng các phần tử của mảng:
const arr = ["Hello", "World"];//Destructure
[ hello, world ] = arr;
console.log(hello); // logs "Hello"
console.log(world); // logs "World"Code language: JavaScript (javascript)Bạn có thể chọn nơi lưu trữ các mục còn lại trong một hàng riêng biệt.
const newarr = [0, 1, 1, 2, 3, 5];
[first, second, ...others] = newarr;
console.log(first); // logs 0
console.log(others); // logs [1, 2, 3, 5]Code language: JavaScript (javascript)Hủy cấu trúc một đối tượng
Bạn chỉ có thể đặt các giá trị mong muốn. Đặt tên thuộc tính trong ngoặc đơn
const person = { name : "Luna", age : 16, house: "Ravenclaw"};
{ name, age } = person;console.log(name); // logs "Luna"
console.log(age); // logs 16Code language: JavaScript (javascript)5. Nhập và xuất chức năng
Luôn luôn là một thói quen tốt để có các chức năng trong một tệp riêng biệt.
Bạn có thể tách các chức năng dưới dạng mô-đun. Sau đó, bạn có thể nhập chúng vào một tệp khác.
Sử dụng module.exports để xuất các chức năng từ một tệp.
const hello = () => {
console.log("hello world");
}
module.exports = hello;Code language: JavaScript (javascript)Nếu bạn muốn xuất nhiều hàm, hãy gửi chúng dưới dạng một đối tượng:
- hello.js
const hello = () => { alert("Hello!");};
const helloName = (name) => { alert("Hello!, " + name )};
module.exports = { hello: hello, helloName: helloName,};Code language: JavaScript (javascript)- Nhập vào tệp .js khác.
const hello = require("hello.js");
hello.hello();
hello.helloName("Ron");Code language: JavaScript (javascript)- Nhập các chức năng bạn muốn bằng cách cấu trúc lại đối tượng.
const { helloName } = require("hello.js"); helloName("Ron");Code language: JavaScript (javascript)6.Không đồng bộ và chờ đợi
Khi một yêu cầu được gửi đến máy chủ thông qua API, có thể mất một khoảng thời gian để xử lý yêu cầu và trong khi chờ đợi, hàm javascript thực hiện câu lệnh tiếp theo sau lệnh gọi.
Tuy nhiên, đôi khi câu lệnh sau có thể phụ thuộc vào dữ liệu được trả về bởi lời gọi hàm. Vì vậy, bạn không thể đạt được kết quả như mong muốn.
Để ngăn chặn điều này, chúng ta có thể sử dụng async / await để đợi JavaScript hoàn thành truy vấn.
await Sử dụng từ khóa trước lệnh gọi hàm
const data = await aFunctionCall();
console.log(data);Code language: JavaScript (javascript)Sau đó, thêm các từ vào hàm không đồng bộ:
const func = async () => {
const data = await aFunctionCall();
console.log(data);
}Code language: JavaScript (javascript)Tôi hy vọng bài viết hữu ích cho bạn.
Video chia sẻ: Ông Code Dạo kể chuyện JavaScript truyền kì. Quyển 1 – Cội nguồn võ học
Video dưới đây sẽ kể cho các bạn nghe về cội nguồn của JavaScript, từ từ 1 ngôn ngữ tầm thường không ai dùng trở thành 1 ngôn ngữ lập trình vang danh…
Nguồn: Phạm Huy Hoàng – Tôi đi code dạo
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
