Diary of a Developer: October 2016

Sunday, October 30, 2016

JavaScript function call, apply, bind methods

"Say, you created a function. If you can stitch this function to an object, the function then can access that object that it's been stitched to. call, apply, and bind help you do that"

Explained in terms of a straw:

"Say, you have a straw. You haven't yet dipped it in any drink, so what is the drink that's flowing in the straw? Nothing.

But if you dip the straw in juice and start drinking, what is the drink that is running through the straw? Whatever juice you dipped your straw in.

Say, you added some essence to the juice, you gonna suck them too.

So...

Straw.call(juice) ...this is how you attach your function to an object.

Straw.call(juice, essence) ...this is how you attach your function to an object and pass parameters too"

Function is an object in JavaScript and it has some in-built methods like call, apply, bind.

A simple example to explain how a call method works:

var sayHi = function(){
console.log("Hi " + this.name);
}

sayHi(); //returns crazy results as it gets confused with "this"

var person = {"name":"Ramesh"};

sayHi.call(person); // returns Hi Ramesh because person object becomes "this" inside sayHi function.

sayHi.apply(person); // returns Hi Ramesh because person object becomes "this" inside sayHi function.

var sayHiNewFunction = sayHi.bind(person); // creates a new function binding passed in object to "this".

Read this article http://hangar.runway7.net/javascript/difference-call-apply where the author explained about call and apply in such a simple way!!!

Also read this article http://hangar.runway7.net/javascript/guide from the same author.

You can pass additional parameters (comma separated) to call. The first param is considered as the object and the other parameters as parameters.

You can pass first parameter and additional parameters (in the form of array) to call. The first param is considered as the object and the array of parameters is taken in as additional parameters.

You can pass first parameters and additional parameters to bind. It creates a new function with the first param as the object and the rest of the params as params.

call - for comma separated params
array - for array form of params
bind - a new function

Read more: https://codeplanet.io/javascript-apply-vs-call-vs-bind/

JavaScript Currying

Came across this site that explains JavaScript Currying in simple words. Good reading:)

https://www.sitepoint.com/currying-in-functional-javascript/

Wednesday, October 19, 2016

What is "export default" in JavaScript?

ES6 is the first time that JavaScript has built-in modules. ES6 modules are stored in files.

The "export" statement is used to export functions, objects or primitives from a given module(or file).

There are two types of export available:

Named export - useful to export several values from a given file.
Default export - there can only be a single default export from a given file.

If a module defines a default export, then you can import the default export by omitting the curly braces.

Read more:

http://exploringjs.com/es6/ch_modules.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

http://stackoverflow.com/questions/21117160/what-is-export-default-in-javascript

Friday, October 7, 2016

ReactJS

What is ReactJS?

Following is the answer that I found when searched the above question on Google:

"React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. We built React to solve one problem: building large applications with data that changes over time."

Links to read more about ReactJS:

https://www.tutorialspoint.com/reactjs/

https://www.codecademy.com

https://egghead.io/courses/getting-started-with-redux

https://css-tricks.com/learning-react-router/

How to access ReactJS libraries?

Accessing ReactJS library from cdn in the html file is one way. (Refer: https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm)

<!DOCTYPE html>
<html> 
<head>
<title>Creating React Component with React.createClass</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>

<body>
 <div id="app"></div>
 <script type="text/babel">
 var destination = document.getElementById("app");

 var App = React.createClass({
   render: function() {
     return (
       <div>
         <h1>Welcome World!!</h1>
       </div>
     )
   }
 });

 ReactDOM.render(
   <div>
     <App/>
   </div>, 
   destination
 ); 
 </script>
</body>

</html>

Accessing ReactJS related modules from npm and bundle them and provide them to the html file is another way. (Refer: https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm)

How to create ReactJS components?

There are two ways to create the ReactJS components.

Using the traditional way: React.createClass
Using the ES6 way: extends React.Component

Setting up Sublime-Text for React JSX development:

http://www.nitinh.com/2015/02/setting-sublime-text-react-jsx-development/