Home

12 Things You Need To Know About ECMAScript 6

ECMAScript 6 is the next version of the JavaScript standard.\

Welcome to another episode of Continuous Improvement. I'm your host, Victor, and today we're going to dive into the exciting world of ECMAScript 6, the next version of the JavaScript standard. I'm going to share with you 12 cool things you need to know about ES6. So, let's get started!

First up, we have arrow functions. Similar to CoffeeScript, ES6 allows you to define a function using the fat arrow syntax. For example, you can write var square = (n) => n * n; to define a function that squares a number.

Moving on, we have arrow scope. In JavaScript, the keyword 'this' can sometimes be confusing as it refers to whatever invokes it. However, ES6 introduces arrow function expressions, which binds 'this' to the function itself. This resolves the issue and provides a clearer understanding of the context in which 'this' is used.

Now, let's talk about string templates. ES6 includes a string interpolation feature using the ${} syntax for variables. This means you can construct strings in a more concise and readable way. For example, with ES6, you can write var hello =My name is ${person.name} and I am ${person.age} years old; to build a string with dynamic values.

Next, we have let scope. The let statement in ES6 declares a block-scope local variable. This means that it doesn't override the value of the variable in the outer scope, giving you more control over variable scope and avoiding potential bugs.

Moving on, we come to destructuring arrays. Instead of declaring multiple variables one by one, ES6 allows you to assign them in one line using array destructuring. This is especially useful when working with arrays that contain multiple values.

Similarly, you can also use destructuring for objects. With ES6, you can easily extract values from an object and assign them to variables using object destructuring syntax.

Object literals are another cool feature of ES6. Instead of writing out key-value pairs explicitly, you can use shorthand notation to construct an object. This makes the code shorter and more readable.

ES6 also introduces default arguments. When defining a function, you can assign default values to arguments. This way, if an argument is not provided when the function is called, it will use the default value instead.

Next up, we have the spread operator. This operator, denoted by the three-dots (...), allows you to pass each element of an array as an argument to a function. It simplifies the process of passing array elements individually.

Classes are a fantastic addition to ES6. Similar to other object-oriented programming languages, ES6 allows you to define a blueprint for constructing objects using the new class syntax. This provides a more structured and organized way to create objects with consistent behavior.

With class inheritance in ES6, you can now extend a class by using the 'extends' keyword. This allows you to create specialized classes that inherit properties and methods from a parent class, giving you the power to build complex object hierarchies.

Last but not least, we have generators. Generators are functions that can be exited and later re-entered. Calling a generator function does not immediately execute its body. Instead, when the iterator's next() method is called, the generator function's body is executed up to the first yield expression. This provides a powerful mechanism for controlling the flow of execution and creating efficient asynchronous code.

And there you have it, folks! These were the 12 cool things you need to know about ECMAScript 6. This new version of the JavaScript standard brings a lot of exciting features and enhancements that will make your code more robust, readable, and maintainable.

Thank you for tuning in to this episode of Continuous Improvement. I hope you found this exploration of ES6 enlightening and inspiring. If you want to learn more about ES6, head over to the MDN website at [MDN link]. Stay tuned for more episodes where we'll continue to explore ways to improve our skills as developers. Until then, keep coding and keep improving!

你需要知道的關於ECMAScript 6的12件事

ECMAScript 6 是 JavaScript 標準的下一個版本。

以下是您需要知道的有關 ES6 的12個酷事：

1. 箭頭函數

類似於 CoffeeScript，ES6 允許你使用肥箭頭語法定義一個函數。

var square = n => n * n

2. 箭頭範疇

‘this’關鍵字可能會令人困惑，因為它指的是調用它的東西。例如，當使用 setTimeout 時，‘this’ 指的是窗口物件。箭頭函數表達式解決了這個問題，將‘this’綁定到函數本身。

function yo() {
  this.name = "Victor"
  setTimeout(() => {
    console.log("yo " + this.name)
  }, 5000)
}
// Output: yo Victor

3. 字串模板

就像 CoffeeScript 一樣，ES6 包含了一個使用 ${} 語法用於變數的字串內插特性。注意下面的例子在第 2 行使用了反勾號而非單引號。

var person = { name: "Victor", age: 24 }
var hello = `My name is ${person.name} and I am ${person.age} years old`

4. Let 範疇

let 聲明了一個區塊範疇的本地變數。換句話說，它不會覆寫外部範疇中的變數值。

var x = 10
for (let i = 0; i < 10; i++) {
  let x = i * 2
}
console.log(x) // x is still 10, not 18

5. 陣列解構賦值

您不必逐一聲明多個變數，可以像這樣在一行中賦值給它們：

var [one, two, three] = [1, 2, 3]

6. 物件解構賦值

同樣地，您也可以為物件使用解構賦值：

var { firstName: name } = { firstName: "Victor" }

7. 物件字面量

您可以使用簡寫符號來構造一個物件，而不是寫 {firstName: firstName, lastName: lastName}。

var firstName = "Victor",
  lastName = "Leung"
var person = { firstName, lastName }

8. 默認參數

您可以像這樣為參數分配默認值：

function sayHello(name, greeting = "yo man") {
  return `${greeting} ${name}`
}

9. 展開運算符

展開運算符（...）允許您將一個陣列的每個元素作為參數傳遞。

function threeNumbers(x, y, z) {
  console.log(x, y, z) // 0, 1, 2
}
var args = [0, 1, 2]
threeNumbers(...args)

10. 類別

就像其他物件導向的程式設計語言一樣，ES6 允許您使用新的類別語法來定義一個用於構建物件的藍圖。

class Person {
  sayHey(name) {
    return "hey " + name
  }
}

11. 類別繼承

您可以使用 extends 關鍵字來擴展一個類別。

class Victor extends Person {
  sayHey() {
    return super.sayHey("Victor")
  }
}

12. 產生器

產生器是可以被退出並稍後重新進入的函數。調用一個產生器函數並不會立即執行其內容。當迭代器的 next() 方法被調用時，產生器函數的內容會被執行，直到遇到第一個 yield 表達式。

function* idMaker() {
  var index = 0
  while (true) yield index++
}

var gen = idMaker()

console.log(gen.next().value) // 0
console.log(gen.next().value) // 1
console.log(gen.next().value) // 2

ECMAScript 6中有許多新特性。更多細節，請參考 MDN。官方發表過程於2015年3月在Mozilla開始，並預計於2015年6月完成。敬請期待！

My Review of Hack Reactor Remote Beta

I enrolled in the Hack Reactor Remote Beta as part of the second cohort in Hong Kong to improve my technical skills in JavaScript.

The program was well-structured and offered a wealth of excellent lectures and hands-on experience in cutting-edge technologies.

I began by learning about recursion, closures, and data structures. Once I had a solid grasp of the basics, I moved on to learning various JavaScript frameworks, including BackboneJS, AngularJS, and NodeJS, all taught by instructors who are experts in their respective fields. To complete the course, I undertook multiple projects that provided comprehensive exposure to new tools like ThreeJS and ReactJS. For my thesis project, I built a machine-learning server to recommend beers, which was both challenging and enjoyable.

Collaborating with other remote students was a highly rewarding experience. We worked closely together, using Floobits for pair programming and Google Hangouts for daily stand-up meetings. The staff were exceptionally active on HipChat and were always eager to assist. The instructors were highly adept at teaching, making complex topics easily understandable even if you're not a computer science major. I appreciate their efforts in delivering this high-quality remote course.

I would highly recommend this course to anyone interested in coding. It offers a five-star learning experience.

My Review of Hack Reactor Remote Beta

I enrolled in the Hack Reactor Remote Beta as part of the second cohort in Hong Kong to improve my technical skills in JavaScript.

Welcome to "Continuous Improvement," the podcast dedicated to personal and professional growth through continuous learning. I'm your host, Victor, and in today's episode, we're going to be discussing a blog post titled "My Experience with Hack Reactor Remote Beta."

Today, we'll be diving into the first-hand experience of the author as they share their journey into improving their technical skills in JavaScript. They enrolled in the Hack Reactor Remote Beta program, which provided a well-structured curriculum and a variety of learning opportunities.

The author begins by mentioning how they learned about recursion, closures, and data structures, which laid a strong foundation for their programming knowledge. It's essential to have a solid grasp of the fundamentals before diving into more advanced topics.

Moving on, the author highlights the value they derived from learning various JavaScript frameworks such as BackboneJS, AngularJS, and NodeJS. They emphasize that these frameworks were taught by expert instructors, lending credibility to the program's quality of education.

To reinforce their learning, the author explains that they worked on multiple projects throughout the program. These projects allowed them to gain hands-on experience with new tools like ThreeJS and ReactJS. They specifically mention their thesis project, where they built a machine-learning server to recommend beers. It's inspiring to see how the program encouraged practical application of their new skills.

The author also highlights the collaborative nature of the program. They mention how they worked closely with other remote students, utilizing tools like Floobits for pair programming and Google Hangouts for daily stand-up meetings. The constant support and interaction with peers made the learning experience highly rewarding.

The instructors and staff members also receive praise from the author. They mention how the instructors were highly adept at teaching, making complex topics easily understandable, even for those who were not computer science majors. The instructors' commitment to providing a high-quality remote course is commendable.

In conclusion, the author highly recommends the Hack Reactor Remote Beta program to anyone interested in coding. They describe it as a five-star learning experience, showcasing the immense value gained from the program.

And that brings us to the end of this episode of "Continuous Improvement." I hope you enjoyed learning about the author's experience with the Hack Reactor Remote Beta program. If you're interested in improving your technical skills, be sure to check it out.

Remember, continuous learning is the key to personal and professional growth. Join me in the next episode as we explore more inspiring stories and strategies for continuous improvement.

Thank you for tuning in to "Continuous Improvement." I'm Victor, your host, signing off. Stay curious and keep growing!

我對Hack Reactor遠程Beta的評價

我參加了在香港的第二屆Hack Reactor Remote Beta，以提高我的JavaScript技術技能。

該課程結構嚴謹，提供了許多優秀的講座和先進技術的實戰經驗。

我從學習遞歸，閉包，和數據結構開始。一旦我對基礎有了堅實的掌握，我就轉向學習各種JavaScript框架，包括BackboneJS, AngularJS, 和 NodeJS，所有這些都是由各自領域的專家教導。為了完成課程，我進行了多個項目，這些項目讓我全面接觸到像ThreeJS和ReactJS這樣的新工具。對於我的論文項目，我建立了一個機器學習服務器來推薦啤酒，這既有挑戰性又很有趣。

與其他遠程學生的協作是一種非常有價值的經驗。我們密切合作，使用Floobits進行配對編程，並使用Google Hangouts進行每日站立會議。員工在HipChat上非常活躍，並且總是熱衷於提供幫助。講師們非常擅長教學，即使你不是電腦科學專業的人，他們也能使複雜的主題變得容易理解。我感謝他們為提供這種高質量的遠程課程而付出的努力。

我強烈推薦這個課程給任何對編程感興趣的人。它提供了五星級的學習體驗。

Beer Recommendation Engine Using PredictionIO

The Problem:

We all love beer. Yet, today we are faced with an unprecedented variety of options, leaving us overwhelmed and indecisive: What should we drink next?

My Solution:

In our Hack Reactor thesis project, I built a machine-learning server using PredictionIO as a beer recommendation engine. Broadly speaking, the app is based on two main strategies:

1. Content Filtering Approach: This uses various characteristics of each beer to identify its nature. For example, we utilize breweryDB to determine the style of a specific beer, its alcohol by volume (ABV), and its International Bittering Units (IBU). We then query the database to find beers with similar styles.

2. Collaborative Filtering Approach: This relies solely on past user behavior, specifically your beer ratings. It employs matrix factorization techniques using the Alternating Least Squares (ALS) algorithm. We characterize both beers and users by vectors of factors inferred from beer rating patterns. A high correspondence between beer and user factors leads to a recommendation.

One advantage of using matrix factorization is its capability to incorporate additional information. When explicit feedback (i.e., your ratings) is not available, we can infer user preferences using implicit feedback, such as your browsing history and search patterns.

As a result, OnTapp matches you with beers that suit your taste. To get a beer recommendation and try out our demo, please visit: http://ontappapp.com/.

Beer Recommendation Engine Using PredictionIO

The Problem:

Welcome to "Continuous Improvement," the podcast where we explore innovative solutions to everyday problems. I'm your host, Victor, and today we're diving into the world of beer and how technology is helping us make better choices.

Imagine this: you walk into a bar or a liquor store, excited to try something new and delicious. But suddenly, you find yourself overwhelmed by the countless options staring back at you. What should you drink next? Well, fear not, because today we have a solution to that beer dilemma.

In a recent blog post titled "The Problem and My Solution," we discovered that a Hack Reactor graduate took matters into their own hands and built a machine-learning server called OnTapp. This revolutionary app uses cutting-edge technology to recommend beers that match your taste preferences.

The app's creator implemented two main strategies: the content filtering approach and the collaborative filtering approach. Let's take a closer look at how each of these strategies works.

The content filtering approach uses various characteristics of each beer to identify its nature. It takes into account factors like the beer's style, alcohol by volume (ABV), and International Bittering Units (IBU). By analyzing these attributes, the app queries a database to find beers with similar qualities. Pretty cool, right?

Now, let's move on to the collaborative filtering approach. This method relies solely on past user behavior, specifically their beer ratings. By using matrix factorization techniques and the Alternating Least Squares (ALS) algorithm, OnTapp can create profiles of both beers and users. These profiles are then compared for similarities, resulting in personalized beer recommendations.

What's interesting about this approach is its ability to incorporate additional information. When explicit feedback, such as ratings, is not available, implicit feedback can be used. That means your browsing history and search patterns can also help determine your preferences. It's like having a virtual beer sommelier!

The OnTapp app is making waves in the beer community, providing beer lovers like us with a convenient way to navigate the ever-expanding beer landscape. No more aimless wandering through shelves or scrolling endlessly through beer menus. With OnTapp, you can get tailored recommendations and explore new flavors with confidence.

If you're curious to try out OnTapp and get personalized beer recommendations, head over to http://ontappapp.com/.

That's all for today's episode of "Continuous Improvement." I hope you've enjoyed diving into the world of beer and technology. Remember, there's always a solution to our everyday problems, and in this case, it's OnTapp. Join me next time as we explore another exciting innovation. Until then, cheers!

使用PredictionIO的啤酒推薦引擎

問題:

我們都愛啤酒。然而，今天我們面臨的是前所未有的選擇多樣性，讓我們感到不知所措和猶豫不決：我們下一個該喝什麼？

我的解決方案:

在我們的Hack Reactor論文計畫中，我構建了一個使用PredictionIO作為啤酒推薦引擎的機器學習服務器。廣義地說，該應用基於兩個主要策略：

1. 內容過濾方法：這使用每種啤酒的各種特性來識別其性質。例如，我們利用breweryDB來確定特定啤酒的風格，其酒精度（ABV）和其國際苦味單位（IBU）。然後我們查詢數據庫以找到風格相似的啤酒。

2. 協同過濾方法：這完全依賴於過去的用戶行為，特別是你的啤酒評級。它使用交替最小二乘法（ALS）算法的矩陣因子分解技術。我們通過從啤酒評級模式中推斷出來的因子向量來描述啤酒和用戶。啤酒和用戶因子之間的高度相關性將導致推薦。

使用矩陣因子分解的一個優點是其能夠加入附加資訊。當沒有顯性反饋（即，你的評級）時，我們可以使用隱性反饋，如你的瀏覽歷史和搜尋模式，來推斷出用戶偏好。

結果，OnTapp將你和適合你口味的啤酒配對起來。要獲得啤酒推薦並嘗試我們的示例，請訪問：http://ontappapp.com/.

AngularUI: Handling Mouseover Events for Google Maps Markers

The Problem:

It took me a while to figure this out, so I thought the issue deserved its own blog post. I found myself confused when trying to hook up mouseover events with Google Map markers using AngularUI. The documentation was vague on this matter, stating that it is only supported for a single marker and not for multiple markers.

For a single marker, it's straightforward to specify a directive with an events property in the HTML:

<ui-gmap-marker events="marker.events"></ui-gmap-marker>

Then in the controller:

$scope.marker = {
  events: {
    mouseover: function (marker, eventName, args) {
      // Callback code here
    },
  },
}

However, the same approach doesn't work for multiple markers. I initially thought I could simply add mouseover events to each marker like so:

markers.push({
  events: {
    mouseover: function (mapModel, eventName, originalEventArgs) {
      console.log("I'd really like to show the info window on mouseover.")
    },
  },
})

My Solution:

To resolve this, add the following to the HTML markers directive:

events="clickEventsObject"

And in the controller:

$scope.clickEventsObject = {
  mouseover: markerMouseOver,
  mouseout: markerMouseOut,
}

function markerMouseOver(marker, e) {
  // Callback code here
}

function markerMouseOut(marker, e) {
  // Callback code here
}

It works! This handler returns a directly-mapped array of the models that belong to the gMarker cluster sent along with the event. If you have any questions, feel free to ask. 😊

AngularUI: Handling Mouseover Events for Google Maps Markers

The Problem:

Welcome back to another episode of Continuous Improvement, the podcast where we explore strategies and techniques to continuously improve our skills and overcome challenges. I'm your host, Victor, and in today's episode, we'll be discussing a common problem that many developers face when working with Google Maps in AngularUI.

So, imagine you're working on a project that involves displaying multiple markers on a Google Map. You want to add mouseover events to these markers, but you realize that the AngularUI documentation is a bit vague on how to achieve this. This confusion led me to dive deeper into the problem and find a solution, which I'll be sharing with you today.

The initial approach specified in the documentation is straightforward for a single marker. You simply need to add the events property to the ui-gmap-marker directive in your HTML, like this:

<ui-gmap-marker events="marker.events"></ui-gmap-marker>

Then, in your controller, you can define the marker object with the desired event callbacks, such as mouseover. It looks something like this:

$scope.marker = {
  events: {
    mouseover: function (marker, eventName, args) {
      // Callback code here
    }
  }
};

This works perfectly fine if you only have a single marker. But what if you have multiple markers and you want to attach mouseover events to all of them? That's where the confusion kicks in.

After some trial and error, I discovered a workaround that allows you to add mouseover events to multiple markers on the Google Map using AngularUI. Here's what you need to do:

First, in your HTML, within the markers directive, add the following attribute:

events="clickEventsObject"

This attribute serves as a reference to an object that contains the event callbacks for your markers. Let's call it clickEventsObject for now.

Moving on to the controller, you need to define the clickEventsObject and specify your event callbacks. For example:

$scope.clickEventsObject = {
  mouseover: markerMouseOver,
  mouseout: markerMouseOut
};

function markerMouseOver(marker, e) {
  // Callback code here
}

function markerMouseOut(marker, e) {
  // Callback code here
}

By binding the events attribute in the HTML to the clickEventsObject, you can now attach the desired event callbacks to each marker.

And voila! You can now enjoy the benefits of mouseover events on multiple markers in Google Maps using AngularUI. It's a simple yet effective solution that gives you the flexibility you need.

And that concludes today's episode of Continuous Improvement. I hope this solution helps you in your own projects and saves you some confusion and frustration. As always, if you have any questions or suggestions for future episodes, feel free to reach out to me at victorleungtw@gmail.com.

Thank you for tuning in, and don't forget to keep improving every day. Until next time!