[JS/TS] Mình đã thực sự hiểu ngôn ngữ lập trình đang sử dụng?

Ngôn ngữ lập trình là gì?

Tại sao tôi lại chọn ngôn ngữ lập trình này?

• Yếu tố đầu tiên khi mình tiếp cận một ngôn ngữ lập trình là mình sẽ xác định xem đây là kiểu phiên dịch nào? “Thông dịch” (interpreter) hay “biên dịch” (compiler). Điều này thực sự ảnh hưởng đến performance cũng như các cơ chế xử lý luồng hoặc suy diễn kiểu dữ liệu mà bạn sẽ phải lường trước các vấn đề có thể xảy ra sau này.

• Yếu tố thứ hai mình cân nhắc là ngôn ngữ này sẽ phù hợp và tối ưu với phương pháp lập trình nào: lập trình hàm, lập trình hướng đối tượng,… hay hướng sự kiện?

• Yếu tố cuối cùng là tính thân thiện về syntax, dễ học dễ sử dụng cũng như cộng đồng support đủ lớn.

JavaScript là gì?

Khái niệm

• là ngôn ngữ lai thông dịch (browser) - biên dịch JIT (just in time: V8 engie, charka)

• xây dựng chạy trên browser nhằm tạo ra các web động

• chạy trên server nhờ runtime V8 engie

• support nhiều mô hình lập trình: hàm, OOP, hướng sự kiện,..

Đặc điểm

• Prototypes: ở JS thuần (es5) bản chất hoàn toàn không tồn tại khái niệm class - function cũng chính là object, việc thực thi cơ chế kế thừa thông qua một thuộc tính gọi là protoype (object.prototype)

• Dynamic types: hiểu một cách đơn giản là kiểu dữ liệu động động, nghĩa là trình phiên dịch sẽ gán type theo run time

let a = 0;
a = "string"; // no error
a = {}; // no error

• Constructor function: Là một hàm đặc biệt nhằm khởi tạo instance object của một “class” đã được đặc tả constructor qua qua các keywords this và new.

//Constructor
function User (name, age) {
this.name = name;
this.age = age;
}
var user1 = new User('Bob', 25);
var user2 = new User('Alice', 27);

JS-ES6, ES7, ECMAScript 6 (ES2015), ECMAScript 7 (ES2016) là gì?

Các phiên bản Javascript

• ES6: classes, modules, for/of loop, Python constructor, arrow func, binary data, array input, promises, number, math, reflection, metadata virtual object,..

• ES7: toán tử luỹ thừa, includes nguyên mảng,..

Các tính năng nổi bật ES6

1. Block - Scoped Constructs Let and Const

2. Arrow Function

• Không thể sử dụng các keyword this, argunments và super

• Không thể sử dụng như một constructor với toán tử new

• Không thể sử dụng yield trong arrow function

const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

console.log(materials.map(material => material.length));
// Expected output: Array [8, 6, 7, 9]

3. Rest Parameter

function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2, 3));
// Expected output: 6

console.log(sum(1, 2, 3, 4));
// Expected output: 10

4. Destructuring Assignment in ES6

let [a,b,c] = [1,2,3]

5. Default Parameters in ES6

function main(params = “default”) {
	return params;
}

6. Template Literals in ES6

const name = “Kevin”
const last_name = “Nguyen”
console.log(`My name is ${name} ${last_name}`)

7. Multi-line String in ES6

var content = `hehemeomeo
meomeohehe
hemehemeo`

8. Enhanced Object Literals in ES6

• Property value shorthand: ES6 mặc định gán value cho property cùng tên

function createSinger (name, age, address, salary) {
  return {
   name,
   age,
   address,
   salary,
   ...
  }
}

• Computed property key: có thể set tên của property một cách linh hoạt hơn

function createSinger (name, age, address, salary) {
  return {
    ['salaryOf' + name] : salary,
  }
}

9. Promises in ES6

10. Classes in ES6

// Declaration
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

// Expression; the class is anonymous but assigned to a variable
const Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// Expression; the class has its own name
const Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

TypeScript là gì?

Khái niệm

Đặc điểm

• Static Typing: khác với Dynamic Typing, TS yêu cầu khai báo và fix kiểu dữ liệu của một biến trong suốt quy trình. Điều này tạo nên tính nhất quán và dễ handle logic hơn cho các lập trình viên.

• Interfaces: TypeScript còn support một tiêu chuẩn Interface nhằm khai báo và xác định thông tin dữ liệu nhất quán và đồng bộ.

• Generics: Đặc điểm cuối cùng mà theo cá nhân mình vừa là ưu điểm vừa là điểm rắc rối vì độ phức tạp của nó là Generics

class GenericNumber<NumType> {
zeroValue: NumType;
add: (x: NumType, y: NumType) => NumType;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
return x + y;
};

let stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = "";
stringNumeric.add = function (x, y) {
return x + y;
};

console.log(stringNumeric.add(stringNumeric.zeroValue, "test"));

Tính năng

• Cross-Platform: Trình biên dịch TypeScript có thể được cài đặt trên mọi Hệ điều hành như Windows, MacOS và Linux.

• Object-Oriented Language: TypeScript cung cấp các tính năng như Classes, Interfaces, and Modules. Hỗ trợ dễ dàng lập trình hướng đối tượng trên cả Client-side và Server-side.

• Static type-checking: TypeScript sử dụng Static type-checking và giúp kiểm tra kiểu dữ liệu khi biên dịch. Do đó, bạn có thể tìm thấy lỗi trong khi viết mã mà không cần chạy mã.

• Optional Static Typing: TypeScript cũng cho phép optional static typing trong trường hợp bạn muốn sử dụng kiểu dữ liệu động như Javascript hoặc cũng có thể tự design một kiểu dữ liệu tuỳ chỉnh phù hợp.

• DOM Manipulation: Bạn có thể sử dụng TypeScript để thao tác DOM để thêm hoặc xóa các phần tử.

• ES 6 Features: TypeScript cũng đã bao gồm hầu hết các tính năng trong ECMAScript 2015 (ES 6, 7) như là class, interface, arrow functions,….



 

Sau tất cả

 
Sau tất cả, thì đây chỉ là những kiến thức vụn vặt mà mình thu nhặt trong suốt quá trình làm việc và tìm tòi. Sai sót là điều tất yếu không tránh khỏi, nếu có thông tin gì cần bổ sung hay đính chính mong mọi người để lại bình luận đóng góp ý kiến bên dưới để hoàn thiện kiến thức cho nhau hơn.
Và mình là Anhkolamgidauanhthe, thời gian qua mình vừa build một trang blog nhằm tổng hợp các bài viết rải rác của mình từ khắp các diễn đàn từ Tech và Life trong suốt hơn 1 năm qua. Mời mọi người ghé sang chơi và đừng quên để lại comment bên dưới các bài viết khiến bạn thấy hứng thú hoặc có thể mạnh dạn contact mình cho một buổi cafe nếu chúng ta có cùng điểm chung nào đó nhé ^^
HAPPY CODING !!!