Head first: JS chap 10: First Class Function
#TIL
8
personal notes
2
White

HungHayHo viết ngày 11/05/2018

Log 1

1.
At the beginning of the chapter, the role of function is emphasized and two ways of creating a function are introduced: function declaration and function expression. They seem to have no differences but actually there are and I'm going to be told.

Basically, function declaration *is called before your entire code is executed while *function expression will wait until its turn to be invoked. Another thing is naming, function declaration has its name created before it refers to the function while function expression doesn't really have name. It can only get one when you assign a name to it.

That's why function in javascript is first class value. It does a few things in order to be entitled with that name:

  • It assigns value to a variable
  • Pass the value to a function
  • return the value from a function.

2.
Everything's been okay until something go like this:

function createDrinkOrder(passenger) {
  if (passenger.ticket === "firstclass") {
    alert ("Would you like a cocktail or wine?");
  } else {
    alert ("Your choice is cola or water.");
  }
}

and then it is passed into this function

function serveCustomer(passenger) {
    createDrinkOrder(passenger);
    //get dinner order
    createDrinkOrder(passenger);
    createDrinkOrder(passenger);
    //show movie
    createDrinkOrder(passenger);
    // pick up trash
}

It is said that "we’re unnecessarily recomputing what kind of passenger we’re serving in createDrinkOrder every time we take an order." which I don't understand how did we recompute the passenger. May be they are talking about the if (passenger.ticket === "firstclass").
Let move on to see if I get it right. Another approach to avoid that redundant computing goes like this:

function createDrinkOrder(passenger) {
    var orderFunction;
    if (passenger.ticket === "firstclass") {
        orderFunction = function() {
            alert ("Would you like a cocktail or wine?");
        };
    } else {
        orderFunction = function() {
            alert ("Your choice is cola or water.");
        };
    }
    return orderFunction;
}

And here is how it is passed:

function serveCustomer(passenger) {
    var getDrinkOrderFunction = createDrinkOrder(passenger);
    getDrinkOrderFunction();
    //get dinner order
    getDrinkOrderFunction();
    getDrinkOrderFunction();
    //show movie
    getDrinkOrderFunction();
    // pick up trash
}

I can see that it has the same structure with the previous approach but now createDrinkOrder(passenger) is hooked into getDrinkOrderFunction which would be later invoked in function style getDrinkOrderFunction().
One question come to my mind after reading this part is that whether this new way would avoid the pitfall of the old approach. I guess it can only do that if from var getDrinkOrderFunction = createDrinkOrder(passenger);, passenger type is calculated and orderFunction is returned. Therefore, getDrinkOrderFunction() only triggers the alert box.

Hope I get it right because it would be a real pain in the neck if this question still hang over my head when I'm at chapter 11

3.
Btw before finishing all of my babbling nonsense, I just want to say how amazing it is to know that JS function is first class value and it can be passed around like number, string or object. Just yesterday I took any method that use callback function (such as map, filter, reduce or sort - this one I learn from this chapter) for granted, now it makes so much sense. Each day I connect every single dot to see the big picture.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

HungHayHo

8 bài viết.
2 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
3 0
Log 2 1. Phần đầu chap này hứa rằng mình sẽ biết một vài 'common coding idioms' và hai khái niệm anonymous function và closure được nhấn mạnh. Ano...
HungHayHo viết hơn 1 năm trước
3 0
White
2 0
Log 3 This is not the first time I read about Object Construction but last time was so brief that now I can barely recall anything except a metaph...
HungHayHo viết hơn 1 năm trước
2 0
White
2 1
Mở đầu Gần đây React nâng cấp lên sử dụng Hooks thay vì sử dụng class component (hay stateful). Giờ đây thế giới của React sẽ chỉ còn khái niệm fu...
HungHayHo viết 6 tháng trước
2 1
Bài viết liên quan
White
4 3
Hôm nay tự viết lại cái note này về quá trình học Rust, xem như là tự giúp mình nhớ sâu và rõ hơn về Rust. Note này sẽ ngắn gọn hơn bản (Link). Sơ...
Giang Nguyen viết 3 năm trước
4 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
8 bài viết.
2 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!