ES6 với các sử dụng let, const, string, array/object

ES6 với các sử dụng let, const, string, array/object

Bài viết này mình lấy từ nguồn github.

Nội dung

• var vs let/ const.
• Thay thế IIFEs(Immediately Invoked Function Expressions) bằng Blocks

1. So sánh var vs let/const

Ngoài var chúng ta thường dùng trong javascript thì bây giờ có thêm 2 cách để khai báo biển nữa là let vs const. Khác với var thì let và const không nên để là biến cục bộ của của function. VD:

var snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        var snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false); // undefined

Như bạn thấy khi để biến var snack trên function getFood(food) thì biến snack bên trong ở return sẽ không được định nghĩa.

Tuy nhiên nếu ta thay var bằng let thì ý nghĩa lại có sự khác nhau ở đây

let snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        let snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false); // 'Meow Mix'

const cũng giống như let tuy nhiên biến const ở đây bạn sẽ không thể gán lại được.

Giữa let và var có nhiều sự giống nhau tuy nhiện với VD trên bạn cần suy nghĩ cẩn thận trước khi refac lại code thay tất cả var bằng let.

2. Strings

Với ES6 chúng ta có một số thư viện có bản để xử lý chuỗi. Có rất nhiều những thay đổi tuy nhiên ở đây chỉ nhắc tới 2 VD cở bản là includes vs repeat. VD: Nếu như trước đây khi kiểm tra một chuỗi có trong một chuỗi hay không chúng ta thường có code sau: .includes()

var string = 'food';
var substring = 'foo';

console.log(string.indexOf(substring) > -1);

Tuy nhiên bây giờ với includes thì bạn có thể dùng cách sau:

const string = 'food';
const substring = 'foo';

console.log(string.includes(substring)); // true

repeat trả về chuỗi ký vơi số lần x

function repeat(string, count) {
    var strings = [];
    while(strings.length < count) {
        strings.push(string);
    }
    return strings.join('');
}

ở ES6 có thể thay bằng:

'meow'.repeat(3); // 'meowmeowmeow'

3. Mẫu chữ

Trước đây khi mình dùng javascript để in 1 dòng thông báo mà có biến mình thước dùng theo cách:

text + variable + text +. ... như sau:

var name = 'Tiger';
var age = 13;

console.log('My cat is named ' + name + ' and is ' + age + ' years old.');

Tuy nhiên bây giờ bạn có thể dùng:

const name = 'Tiger';
const age = 13;

console.log(`My cat is named ${name} and is ${age} years old.`);

Ở đây có 1 chú ý là dấu ` không phải dấu '

4. Array

Với array hoặc object trong ES6 cũng có sự đột phá giúp ích rất nhiều cho việc code. Phục vụ cho code dễ hiểu hiểu hơn, mà không gây nhầm lẫn

VD: Với javascript thông thường

var arr = [1, 2, 3, 4];
var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];

đây là cách lấy biến trong mảng mà ta thường dùng để gán vào biến khác Tuy nhiên ES6 có 1 cách đơn giản ngăn hơn

let [a, b, c, d] = [1, 2, 3, 4];

hoặc với object thông thường có 1 cách lấy giá trị như:

var luke = { occupation: 'jedi', father: 'anakin' };
var occupation = luke.occupation; // 'jedi'
var father = luke.father; // 'anakin'

bây giờ có thể được thay thế bằng:

let luke = { occupation: 'jedi', father: 'anakin' };
let {occupation, father} = luke;

Kết

Trên đây chỉ là một số phần mình biết trên es6 liên quan tới variable, string, array. Bên cạnh đó còn rất nhiều cấu trúc dùng cho các phần trên mà mình chưa tìm hiểu hết cũng như ES6 có rấ nhiều độc đáo như export, import, class, symbol .... những phần này có thể mình sẽ viết trong phần tiếp theo.

Cám ơn bạn đã đọc.