#es2015

I just found and improved a PhaserJS boilerplate that uses ES2016/ES2015 (ES7/ES6) with Webpack to create a nice JavaScript game development codebase! Webpack takes all code and assets for your game (including images under 25kb!) and shoves it all into a single “game.bundle.js” file that gets loaded! It’s pretty awesome.

You can fork/download and use my boilerplate for your own games if you’d like! If you don’t know anything about ES2015 (ES6) or ES2016 (ES7), check out this little guide I like: ES6 for Humans

PS: If you’ve ever worked with Phaser and Webpack before, you know that it’s crazy hard to figure out how to get it working at all. If you want to hook it up yourself, check out how I did it in my boilerplate here. Doing it this way allows you to set it and forget it, not needing to require or import any Phaser files into your code! Much nicer than what I had to do before.

ES6のまとめ。

letとかconstとかはなんとなく知ってたけど、他は知らないっていうか見てもよくわからない。多分俺の知識不足なんだろうけど。

One (or two) of the most important features that came with ES2015 (ES6) was  the addition of let and const which can be used for variable declaration. But, the first question that you may have is: what makes them different from our old var? If you are still not clear about this, this article is for you.

Let's first review the most important points about var.

Var declarations

I'm assuming that we all know that var is used to assign some value to a variable that can be reused later. What is important to understand here is the scope where that value will be acessible.

Var scope

var are always globally,function/locally scopped. This means that any variable that is declared with var outside a function block is available for use in the whole window. var is function scoped when it is declared within a function. This means that it is available and can be accessed only within that function. Let's see one example:

function foo() { var x = 0; } console.log(x); // ReferenceError: x is not defined

Block scope

A block is chunk of code bounded by {}. A block lives in curly braces. Anything within curly braces is a block. var is not block-scoped, so for example:

var x = 0; function foo() { var x = 1; } console.log(x); // 1

x was still in the "global scope" within the if block. i's value was overwritten, which may have not been the intention.

Let declaration

let comes as an improvement for var declarations. It solves the above example, making the variable block-scoped. Just like var, a variable declared with let can be updated within its scope. Unlike var, a let variable cannot be re-declared within its scope.

This will work:

let hello = "Hi, friend!"; hello = "Hi, brother!";

This will return an error:

let hello = "Hi, friend!"; let hello = "Hi, brother!";

However, if the same variable is defined in different scopes, there will be no error:

let x = 0; if (true) { let x = 1; console.log(x); // 1 } console.log(x); // 0, no error

Const declaration

const declarations, as we can imagined, are used to declare constant values. Like let, const declarations are block-scoped.

Rule of thumb: const declarations can never be re-declared or re-assigned. So, both snippets below fail:

const hello = "Hi, friend!"; hello = "Hi, brother!"; // error : Assignment to constant variable.

const hello = "Hi, friend!"; const hello = "Hi, brother!"; // error : Identifier 'hello' has already been declared