Video học lập trình mỗi ngày

Cho dù bạn đang ở level nào của một developer thì những khái nhiệm cơ bản cũng đóng vai trò quan trọng. Cho nên dễ hiểu tại sao, những nhà developer js luôn có những hướng dẫn cơ bản về những khái niệm cơ bản. 

Trong những bài trước chúng ta cùng thảo luận những thủ thuật (7 Thủ Thuật JavaScript Hữu Ích) giúp chúng ta cải thiện trong code chúng ta. Và bài viết này chúng ta sẽ xem những khái niệm, giúp developer cải thiện được level của bản thân mình. 

Dưới đây giới thiệu 10 khái niệm cơ bản rất quan trọng đối với sự hiểu biết của bất kỳ nhà phát triển JS nào, tất nhiên từng này là chưa đủ để giúp một developer js có thể hiểu hết tâtr cả ... 

1 - Value vs. Reference Variable

Ví dụ 1.1:

let var1 = 'My string';
let var2 = var1;
var2 = 'My new string';
console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'

Ví dụ 1.2 và viết lại object assignment

let var1 = { name: 'Jim' }
let var2 = var1;
var2.name = 'John';
console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }

Thật ra lý giải vấn đề này thì trong blog Anonystick javascript  cũng đã nói nhiều về vấn đề này rồi. Các bạn có thể thao khảo lại.

 Ở ví dụ 1 thật ra var1 là kiểu nguyên thủy (Chuỗi), var2 được đặt bằng với giá trị Chuỗi của var1. Theo đó, việc gán lại var2 không ảnh hưởng đến var1. 

2 - Closures

 Khái niệm Closures là một khái niệm quan trọng cho phép truy cập các vả private một cách hợp lệ. Thiết nghĩ phải có một bài về khái niệm này. 

Chứ giải thích ngắn gọn nhiều bạn vẫn chưa nắm được? Notes lại thêm bài viết về "Closures là gì? Tại sao nên và không nên dùng Closures trong javascript?" 

Ví dụ 2.1 With closure

function newCounter(){
  var count = 0

  return function(){
    count += 1
    return count
  }
}

var counter = newCounter()

console.log(counter())
// Output: 1

console.log(counter())
// Output: 2

console.log(counter())
// Output: 3

Không ai có thể truy cập được count ngoài function newCounter(). Nhưng funcuton được trả về bởi newCounter vẫn có quyền truy cập count nếu chúng ta tiếp tục khai báo thêm những lần nữa. 

Điều đó có nghĩa là các biến thay đổi giá trị.

Without closure

function getValue(){
  var a = 1
  var b = 2
  return a + b
}

var val = getValue()
console.log(val)
// Output: 3

3. Destructuring 

Đây có lẽ là một cách phổ biến để trích xuất các thuộc tính từ các đối tượng một cách rất ngon lành, và tôi thích tính năng này nhất, nếu bạn không tin hoặc chưa hiểu, vui lòng ngắt một chút thời gian xem bài viết này Destructuring Javascript là gì? Buông gì buông chứ đừng bỏ qua phần này của ES6.

const obj = {
  name: 'Joe',
  food: 'cake'
}
const { name, food } = obj;
console.log(name, food);
// 'Joe' 'cake'

or

const obj = {
  name: 'Joe',
  food: 'cake'
}
const { name: myName, food: myFood } = obj;
console.log(myName, myFood);
// 'Joe' 'cake'

or có thể mở rộng ra Nếu bạn biết React, có lẽ bạn đã từng thấy điều này trước đây!

const person = {
  name: 'Eddie',
  age: 24
}
function introduce({ name, age }) {
  console.log(`I'm ${name} and I'm ${age} years old!`);
}
console.log(introduce(person));
// "I'm Eddie and I'm 24 years old!"

4. Spread Operator 

Đây là một trong những tính năng mới thú vị của ECMA6 của Javascript; (...) là một trong những chức năng Javascript mới này. 

Ồ rất may tôi đã tìm thấy một bài viết đầy đủ và nâng cao hơn nếu bạn thất sự cần hiểu nó: Three Dots ( … ) In JavaScript 

Ví dụ spread operator

const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10

và rest operator

function myFunc(...args) {
  console.log(args[0] + args[1]);
}
myFunc(1, 2, 3, 4);
// 3

Quan trọng tron spread operator này bạn phải phân biệt được spread operator and rest operator. Điều này đã giải thích trong bài Three Dots ( … ) In JavaScript 

Tips: Giải thích về Destructuring, Rest Parameters, và Spread Syntax trong javascript

5. Array Methods 

Các array method của JavaScript thường có thể cung cấp cho bạn những cách thức đáng kinh ngạc để biến đổi dữ liệu bạn cần. Hầu hết các dự án mà tôi trải qua, không thể thiếu việc sử dụng Array Method để xứ lý dữ liệu và thường thấy là map, filter, reduce. 

Nói đến map, filter, reduce(). Tôi nhớ không lầm là chúng ta đã có bài viết giải thích về nó: Trường Hợp Nào Sử Dụng Map, Filter, Reduce Trong Javascript() 

Ví dụ Map()

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]

Ví dụ filter()

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]

Ví dụ reduce()

const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
// 21

Vì Array Methods là một khái niệm với nhiều chức năng thì nếu thật sự bạn muốn tìm hiểu kỹ hơn thì khuyên bạn nên đọc bài viết này: 

10 Method Array Cần Biết Trong Javascript Đối Với Bất Kỳ Developer Javascript Nào? 

7. Generators

Có thể hiểu Generator function là một function, có khả năng tạm ngưng thực thi trước khi hàm kết thúc, và có thể tiếp tục chạy ở 1 thời điểm khác. cú pháp :

function* name([param[, param[, ... param]]]) {
   statements
}

trong đó : 

name: tên hàm. 

param: tham số đầu vào của hàm, tối đa 255 tham số. 

statements: nội dung của hàm. 

Ví dụ:

function* greeter() {
  yield 'Hi';
  yield 'How are you?';
  yield 'Bye';
}
const greet = greeter();
console.log(greet.next().value);
// 'Hi'
console.log(greet.next().value);
// 'How are you?'
console.log(greet.next().value);
// 'Bye'
console.log(greet.next().value);
// undefined

Thật ra theo tôi thì đã đến lúc bỏ qua khái niệm này, vì nó không mang thực tế là bao nhiêu? Bỏ qua generator và dùng async/await. Viết async/await như là đang viết synchronous code. 

8. Identity Operator (===) vs. Equality Operator (==)

Bạn biết sự khác nhau giữa hai cách so sánh điều kiện này không? === và ==. Khi nào sử dụng và vì sao? 

Xin mời bạn đọc kỹ về góc cạnh này? Tại Sao Sử Dụng === Trong Javascript Để So Sánh? 

ví dụ :

console.log(0 == '0');
// true
console.log(0 === '0');
// false

9. Object Comparison 

Một lỗi tôi thấy là những người mới sử dụng JavaScript so sánh trực tiếp các đối tượng. Các biến đề cập đến các objects, không phải chính các objects! Một cách để so sánh chúng thực sự là chuyển đổi các objects thành các chuỗi JSON.

const joe1 = { name: 'Joe' };
const joe2 = joe1;
console.log(joe1 === joe2);
// true

Nhưng

const joe1 = { name: 'Joe' };
const joe2 = { name: 'Joe' };
console.log(joe1 === joe2);
// false

10. Callback Hell 

Không để bỏ sot khái niệm này nhé mấy ông devjs. 

Nói về cái này thì đây quả là một đề tài chưa khai phá hết. Vì nó qua hay cho đến hiện tại, cho dù ES8 đã phát hành nhưng dấu ấn để lại vẫn thua ES7 vì có async/await Thật ra thì tóm lược lại lịch sử thì nó đi từ callback -> promise -> async/await. 

Trong blog blog javascript đã có quá nhiều bài viết về Callback Hell và giải thích quá tốt. Các bạn nên đọc toàn bộ Callback Hell, vì tôi nghĩ nó sẽ đi mãi với các bạn :D
Đây là một collection về khái niệm này các bạn đừng bỏ sót:   Series about callback in javascript   

ví dụ callback

function myFunc(text, callback) {
  setTimeout(function() {
    callback(text);
  }, 2000);
}
myFunc('Hello world!', console.log);
// 'Hello world

ví dụ promise

const myPromise = new Promise(function(res, rej) {
  setTimeout(function(){
    if (Math.random() < 0.9) {
      return res('Hooray!');
    }
    return rej('Oh no!');
  }, 1000);
});
myPromise
  .then(function(data) {
    console.log('Success: ' + data);
   })
   .catch(function(err) {
    console.log('Error: ' + err);
   });
   
// If Math.random() returns less than 0.9 the following is logged:
// "Success: Hooray!"
// If Math.random() returns 0.9 or greater the following is logged:
// "Error: On no!"

ví dụ async/await

const greeter = new Promise((res, rej) => {
  setTimeout(() => res('Hello world!'), 2000);
})
async function myFunc() {
  const greeting = await greeter;
  console.log(greeting);
}
myFunc();
// 'Hello world!'

Kết luận

Khi bạn đọc hết bài viết này, nếu bạn thật sự chưa biết một trong 10 khái niệm này, có lẽ bạn là người qua mới để bắt đầu học javscript. Nếu bạn đã biết tất cả thì xin chúc mừng bạn, bạn đẫ hội tụ đầy đủ điều kiện để tham gia vào một công ty và nhận những job nâng cao hơn nữa. 

Push from: ma-no.org