Javascript ES6 – Khi jS không còn là đồ chơi

Việc sử dụng Javascript trong quá trình phát triển các ứng dụng web là rất phổ biến. Hầu như không có ứng dụng web nào có thể bỏ qua ngôn ngữ này. Trong các sản phẩm được code dựa trên PHP, Java hay .Net hiện nay thì Javascript chủ yêu vẫn là một thứ “đồ chơi” nhằm bổ sung các hiệu ứng xập xòe giao diện hoặc những mảng Ajax nhỏ. Tuy nhiên, sự lên ngôi của Node.JS cùng hàng loạt các framework về javascript như AngularJS, EmberJS,… đã làm thay đổi cách nhìn của các nhà phát triển ứng dụng web về ngôn ngữ này. Cá nhân mình rất thích làm việc trên JS bởi tính đơn giản của nó, việc debug và test ngay trên trình duyệt cũng hết sức thuận tiện.

Phiên bản Javascript chúng ta vẫn hay sử dụng cho đến thời điểm hiện tại là Version 5 (ES5) được chuẩn hóa và đưa vào sử dụng từ năm 2011. Dù cho Javascript ES5 phổ biến là vậy, chúng ta cũng không thể lảng tránh những thiếu sót trong bộ gen của nó. Phiên bản ES6 vừa được công nhận chính thức vài tháng trước thực sự là một liều thuốc mạnh mẽ, một bản “vá” hết sức kịp thời cho những developer yêu thích ngôn ngữ này. Bài viết này chúng ta sẽ cùng dạo qua vài điểm mới của ES6.

Sử dụng Class

Chắc các bạn không quên, Javascript ES5 không hỗ trợ class như các ngôn ngữ lập trình hướng đối tượng khác. Thay vào đó, Javascript mô phỏng các class thông qua các function và prototype. Dưới đây là cú pháp mới để viết class trong javascript. Bạn sẽ cảm thấy quen thuộc với cách viết này nếu bạn đã từng viết code trên Java hay các ngôn ngữ hướng đối tượng khác.

class Project {

  constructor(name) {

    this.name = name;

  }

  start() {

    return "Project " + this.name + " starting";

  }

  end() {

    return "Project " + this.name + " ending";

  }
}

var project = new Project("Framgia");

project.start(); // "Project Framgia starting"

Sự kế thừa – inheritance trong ES6

Như đã đề cập ở trên, Javascript ES5 không hỗ trợ viết class. Vậy liệu nó có hỗ trợ tính kế thừa?

Câu trả lời là có, kế thừa trong javascript vẫn có thể sử dụng thông qua prototype. Nếu bạn không quen với prototype, tin vui đã đến với bạn vì trong ES6, bạn chẳng cần phải biết tới nó để implement tính kế thừa trong những đoạn code của mình. Bên dưới là cách tôi tạo một lớp con từ lớp Project ở trên, chúng ta có thể gọi nó là ScrumProject.

class ScrumProject extends Project {

  constructor(name, deadline) {

    super(name);

    this.deadline = deadline;

  }

  info() {

    return this.name + " has deadline at" + this.deadline;

  }
}

var framgia = new ScrumProject("Framgia", "1-1-2015");

framgia.start(); // "Framgia starting"

framgia.info(); // "Framgia has deadline at 1-1-2015"

let

Để hiểu về let, trước tiên chúng ta nên nhắc lại một chút về từ khóa var

function printName() {

  if(true) {

    var name = "Framgia";

  }

  console.log(name); // Framgia

}

Không như các Java hay một số ngôn ngữ khác, việc khai báo biến trong Javascript là “hết sức cởi mở”, bạn chỉ cần khai báo nó trong function là có thể dùng nó từ bất kỳ đâu trong hàm mà chẳng hề phải quan tâm là khai báo rồi mới dùng, hay dùng rồi mới khai báo. Điều này đôi khi làm cho chúng ta cảm thấy hơi loạn. Thông thường, để các đoạn code tường mình hơn, chúng ta thường khai báo các biến ở đoạn đầu của function.

function printName() {

  var name; // variable declaration is hoisted to the top

  if(true) {

    name = "Framgia";

  }

  console.log(name); // Framgia

}

từ khóa let ra đời chính là nhằm giải quyết vấn đề này, nếu sử dụng let chúng ta có thể viết mã như sau

function printName() {

  if(true) {

    let name = "Framgia";

  }

  console.log(Framgia); // ReferenceError: name is not defined
}

hoặc

function printName() {

  var name = "Fram";

  if(true) {

    let name = "Gia";

    console.log(name); // Gia

  }

  console.log(name); // Fram
}

Như vậy, bên trong function

Biến khai báo thông qua từ khóa var sẽ có phạm vi trong function.

Biến khai báo thông qua từ khóa let sẽ có phạm vi trong block.

Hằng số – const

Một thiếu sót rất khó hiểu nữa trong Javascript là nó không có hằng số, một vấn đề tưởng chừng như quá đỗi bình thường trong bất kỳ ngôn ngữ lập trình nào. Thông thường, để khắc phục nhược điểm này mình hay sử dụng cú pháp của Java để tự nhắc nhở bản thân là đừng bao giờ thay đổi giá trị của các biển này và luôn xem nó như những hằng số.

var MY_CONSTANT = 100;

Sự ra đời của từ khóa const sẽ giải quyết triệt để vấn đề này, đảm bảo cho giá trị bạn cần lưu giữ không bị thay đổi trong suốt thời gian thực thi của chương trình.

const SERVER_URL = "http://framgia.com"

Chỉ vài điểm thay đổi thôi nhưng lại mang rất nhiều ý nghĩa với các lập trình viên font-end. Hãy mở notepad++ lên, code và cảm nhận.

Nguon: http://www.frontendjournal.com/javascript-es6-learn-important-features-in-a-few-minutes/