Things recently touched

Been busy and lazy
Did some fix for a small project, worked on React, Redux, ImmutableJs & Saga.

One thing to note down: JSON doesn’t preserve order.
I had a task to fix the display of a list to make them display in alphabet order.
At the very begining, I just added a ORDER BY in the back-end query, thougt it would be ok, but no, the display is still random. After some digging and googling, found out it is the JSON.
Even though the data fetched from DB is sorted, it then get parsed as JSON and sent to front-end.
Work around is to store the data in Array and then JSON will have it in right order.
Example:

1
2
3
4
5
6
7
8
9
10

// array in JSON
{
    "arrayItem":
    [
        {"1":"a"},
        {"2":"b"},
        {"3":"c"},
        {"4":"d"}
    ]
}

Reference: StackOverFlow Related Question

Started a project involving GraphQL, seems interesting.
The GraphQL->DB layer and query builder is mostly done by other developer. I will work on building the front-end interface that can build and to shot GraphQL query.

Hoist in JavaScript

Was reading Airbnb style guide for React and get confused when it says

relying on function name inference is discouraged

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// bad
class Listing extends React.Component {
  render() {
    return <div>{this.props.hello}</div>;
  }
}
// bad (relying on function name inference is discouraged)
const Listing = ({ hello }) => (
  <div>{hello}</div>
);
// good
function Listing({ hello }) {
  return <div>{hello}</div>;
}

Then Googled and found someone mentioned Hoisting in JS.
Just want to write down somthing of what I have learnt from the reading.

So basicly, JS can look ahead of code and find all variable declarations and hosit them to the top of the function.
For example:

1
2
3
4
5
6
7

// Outputs: undefined
console.log(declaredLater);
var declaredLater = "Now it's defined!";
// Outputs: "Now it's defined!"
console.log(declaredLater);

The first log didn’t throw an error saying declaredLater is not defined, instead, it prints undefined.
This is because of variable hoisting, the above code is actually equivalent to:

1
2
3
4
5
6
7
8
9

var declaredLater;
// Outputs: undefined
console.log(declaredLater);
declaredLater = "Now it's defined!";
// Outputs: "Now it's defined!"
console.log(declaredLater);

For function, hoisting works differently, I’m using some quote cuz i’m lazy :p

However, function definition hoisting only occurs for function declarations, not function expressions. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13

// Outputs: "Definition hoisted!"
definitionHoisted();
// TypeError: undefined is not a function
definitionNotHoisted();
function definitionHoisted() {
    console.log("Definition hoisted!");
}
var definitionNotHoisted = function () {
    console.log("Definition not hoisted!");
};

Finally, one thing to add-on.

Function’s name doesn’t get hoisted if it is part of a function expression.

1
2
3
4
5
6
7
8
9

// ReferenceError: funcName is not defined
funcName();
// TypeError: undefined is not a function
varName();
var varName = function funcName() {
    console.log("Definition not hoisted!");
};

Reference: Variable and Function Hoisting in JavaScript

A little gallary build by React

Just some stuff I did to learn React.
Still learning, nothing special, credit goes to the course on imooc.com
Used Webpack and React
Try Demo Here

JS closure and something related

Closure & emulate Private Scope in JS

A closure can not only access the variables defined in its outer function but also the arguments of the outer function.

The example below creates a private scope by adding parenthesis at the end of the function, it tells the interpreter to execute it as soon as it reads it without invocation. Functions and variables in it are not accessible from outside.

1
2
3

(function () {
  // private scope
})();

But what if we want some of the functions to be public?

The Module Pattern

The Module Pattern looks like this:

1
2
3
4
5
6
7
8
9
10
11

var Module = (function() {
    function privateMethod() {
        // do something
    }
    return {
        publicMethod: function() {
            // can call privateMethod();
        }
    };
})();

and can be used like this:

1
2

Module.publicMethod(); // works
Module.privateMethod(); // Uncaught ReferenceError: privateMethod is not defined

An even better way of doing this is to add underscore to the private functions and return an anonymous object containg public functions:

1
2
3
4
5
6
7
8
9
10
11

var Module = (function () {
    function _privateMethod() {
        // do something
    }
    function publicMethod() {
        // do something
    }
    return {
        publicMethod: publicMethod,
    }
})();

Reference: Understanding Scope in JavaScript

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment