Javascript Codecademy Beginner Course #2 ( Học về Function, Code block và Arrow Function )

Function Declarations

Về cơ bản Function trong Javascript cũng y như trong C:

Ví dụ:

function greetWorld(){

console.log('Hello World');

Lúc này output sẽ chưa hiện ra gì cả vì bạn phải gọi tên hàm đã:

Hãy thêm vào lệnh sau ở dưới hoặc trên function:

greetWorld();

Bạn nhập bao nhiêu lần greetWorld();

-> Thì lệnh bên trong function lặp lại từng đấy lần ví dụ

greetWorld();

greetWorld();

greetWorld();

Output sẽ là:

Hello World

Hello World

Hello World

Bài tập:

B1: Tạo ra một function mang tên getReminder

B2: console log trong hàm getReminder một sentece 'Water the plants'.

B3: Tạo ra một function nữa mang tên greetInSpanish

B4: console log trong hàm greetInSpanish một sentence 'Buenas Tardes'.

Cách làm ( đang lười nên chưa update )

Calling a Function

Đã nêu trên, đây là phần gọi hàm nhưng khác với trong C ta gọi bao nhiêu lần thì lệnh thực hiện từng đấy lần giống như greetWorld mình đã nói ở trên

Parameters and Arguments

Trước khi vào phần bài tập bạn cần biết những thứ sau:

- Thành thục gọi hàm (VD: greetWorld();)

- Thành thục nối các giá trị bên trong console.log

VD:

const myName ='Khoi';

console.log ('My name is '+ myName +'.Nice to meet you');

Hiểu nôm na là My name is 'giá trị của myName'.Nice to meet you. Dấu cộng dùng để nối các sentence lại với nhau, nếu không có dấu cộng thì chương trình lỗi.

Default Parameters

Ta có thể truyền giá trị vào mà không cần gọi hàm bằng cách:

VD:

function greetings(name = 'stranger'){

console.log('Hi , ${name}!');

Thì output sẽ là:

Hi, Khoi!

Nhưng nếu ta vẫn cố tình gọi hàm và truyền vào một giá trị khác 'stranger' thì sao ????

Ví dụ ta truyền vào 'Tuan' đi:

function greetings(name = 'stranger'){

console.log('Hi , ${name}!');

greetings('Tuan');

Thì lúc này giá trị sẽ không còn là stranger nữa

Return

Cũng kha khá giống lệnh return trong môn C nhưng hơi phức tạp hóa hơn chút thoi.

Những điều cần biết trước khi làm bài:

- Khi ta tạo ra một hàm để tính toán giá trị

VD:

function dienTich(chieudai,chieurong){

}

- Khi cần tính toán một thứ gì đó ta sẽ có 2 cách như sau ( hiện tại đang học là 2 cách ):

Cách 1:

function dienTich(chieudai,chieurong){

return chieudai*chieurong;

}

- Đến đây ta sẽ chưa thấy hiển thị ra kết quả bởi vì ta chưa log kết quả ra màn hình. Cần thêm một lệnh console.log nữa.

console.log(dienTich(chieudai,chieurong);

- Lúc này bạn có thể thay thế giá trị của chieu dài và chiều rộng bên trong console.log, và nó sẽ truyền giá trị đó vào bên trong function, từ đó return kết quả chieudai*chieurong. Và sẽ in ra kết quả ở màn hình.

* Ngoài ra cũng có thể

const chieudai = ? , const chieurong = ? để nhập giá trị cho chiều dài và chiều rộng

Cách 2:

function dienTich(chieudai,chieurong){

    return chieudai*chieurong;

}

Đặt một variable mới cho phép tính chieudai*chieurong;

VD: 

const dtChuNhat = dienTich(chieudai,chieurong);

Thay giá trị cho 2 biến chieudai,chieurong và

console.log(dtChuNhat);

Và màn hình lúc này sẽ in ra kết quả

Bài tập: Tưởng tượng rằng giờ ta phải giao cho mỗi người trong văn phòng 1 cái màn hình máy tính, và văn phòng được sắp xếp theo dạng grid, có 5 rows và 4 columns hãy dùng cách 2 như ví dụ trên và tính ra số màn hình cần mua để mỗi người đều có một cái  màn hình máy tính

Cách làm:

function monitorCount(rows,columns){

    return rows * columns;

}

const numOfMonitors = monitorCount(5,4);

console.log(numOfMonitors);

Helper Functions

Trước khi vào bài đây là một ví dụ bạn cần hiểu:

VD:

function multiplyByNineFifths(number) {

  return number * (9/5);

}

function getFahrenheit(celsius) {

  return multiplyByNineFifths(celsius) + 32;

}

console.log(getFahrenheit(15));

1) Hàm function getFahrenheit () được gọi và  giá trị 15 được truyền vào như một đối số.

2) Code block bên trong getFahrenheit () gọi hàm multiplyByNineFifths () và truyền 15 làm đối số.

multiplyNineFifths () nhận đối số là 15 cho tham số number.

3) Code block bên trong của hàm MultiByNineFifths () nhân 15 với (9/5), cho kết quả là 27.

4) 27 được trả về trở lại lệnh gọi hàm trong getFahrenheit ().

5) getFahrenheit () tiếp tục thực thi. Nó thêm 32 thành 27, cuối cùng ra kết quả là 59.

Cuối cùng, 59 được trả về cho lệnh console.log(getFahrrenheit(15)).

Bài tập: Dựa vào bài tập màn hình của công ty ở bài về Return nằm bên trên, tiếp tục tính tổng giá phải trả, số rows và columns vẫn giữ nguyên. Hãy đặt 1 biến const totalCost = ....; và tính tổng giá, biết rằng mỗi màn hình có giá 200 đô.

Gợi ý: Gọi hai hàm function ra một hàm để tính số màn hình đã mua ( rows * columns ). 1 hàm để nhân 200 đô với tỏng số màn hình ở hàm function đầu tiên.

Cách làm:

function monitorCount(rows, columns) { //4. Giờ giá trị 5 và 4 đang ở đây đây

  return rows * columns;  //5. Tính toán và return kết quả 20 cho hàm costOfMonitors bên dưới để tính toán

}

function costOfMonitors(rows,columns){ //2. Hiện tại giá trị 5 và 4 đang nằm ở đây.

  return monitorCount(rows,columns)*200; //3. Truyền giá trị rows và columns vào hàm monitorCount.

}

const totalCost=costOfMonitors(5,4); //1. Truyền giá trị 5 và 4 cho rows và columns bên trong hàm costofMonitors trước

console.log(totalCost); //6. Log kết quả ra màn hình

Function Expressions

Ta có thể gọi ra một hàm anonymous ( một hàm không có tên nhưng lại có tên )

Bằng cách:

VD:

const plantNeedsWater = function (day){

}

Nếu ta viết như này thì sẽ không khác gì mấy so với:

function plantNeedsWater(day){

}

Bây giờ hãy giữ nguyên hàm ở dạng đầu tiên, sau đó ghi vào body của function các dòng lệnh sau:

const plantNeedsWater = function (day){

  if (day === 'Wednesday'){

    return true;

  }

  else{

    return false;

  }

}

Sau đó gọi hàm và truyền giá trị 'Tuesday' vào:

plantNeedsWater('Tuesday');

Console.log thử kết quả ra màn hình và xem trường hợp này là true hay false.

->

Output sẽ là false.

Arrow Functions

Để tìm hiểu về arrow functions một cách nhanh gọn lẹ thì dựa vào bài trên:

const plantNeedsWater = function (day){

}

Có thể được viết thành:

const plantNeedsWater = (day) => {

}

Concise Body Arrow Functions

Đây là dạng nâng cao hơn của arrow:

1. Khi mà chỉ có 1 tham số thì không cần dấu ngoặc đơn ( có cũng được không có cũng không sao )

VD: 

const plantNeedsWater = (day) => {

}

Đoạn code trên bỏ dấu ngoặc đơn ở tham số day đi vẫn không sao cả.

NHƯNG nếu có trên 2 tham số thì cần phải có ngoặc đơn.

2. Single-line và multi-line.

VD:

Có thể được viết thành:

 -> Như các bạn có thể thấy:

- Dấu ngoặc đơn quanh chữ num đã được loại bỏ

- Dấu ngoặc nhọn và return cũng được loại bỏ, vì ta có thể thực hiện chức năng tính toán và return kết quả trong một dòng như kia

Bài tập: Cho đoạn code dưới đây:

const plantNeedsWater = (day) => {

  return day === 'Wednesday' ? true : false;

};

Hãy làm cho đoạn code chỉ trong một dòng, không nhấn nút enter 1 lần nào cả ( dấu ? là trường hợp if else mà mình đã học. Ở trường hợp trên thì nếu day === 'Wednesday' là true thì return true; còn không thì return false;

Cách làm:

const plantNeedsWater = day => day === 'Wednesday'? true : false;