ES6

JavaScript ES6 Classes and Arrow Functions

Posted on by admin

I try to understand difference between function expression, shorthand method definition, arrow function and bind().

Notice that I defined sayGoodBye() function in constructor, it means that whenever i create a new instance from this Person class, sayGoodBye() function will be defined for every instance.

sayHello() function is defined as a class property. But, as you can see in the following screenshot, class properties are also defined in constructor so class properties are just a sugar syntax.

getFullName() function is defined as shorthand method definition. But, Babel didn't move function definition in class constructor. So, if we use shorthand method definition in class, it will be a prototype function .

It mean they are only defined once, instead of once per instance.

Notice that in below screenshot, getFullName() function is in prototype of Person class, but sayHello() and sayGoodBye() are not.

Continue reading →

JavaScript Object.entries(), Object.values(), Map, Set Usage

Posted on by admin

Demo1

Continue reading →

ES6 (ECMAScript 2015) Class Usage

Posted on by admin

There are some new features in ES6(ECMAScript 2015) like the following. But, we will focus on classes.

  • JavaScript let
  • JavaScript const
  • JavaScript Arrow Functions
  • JavaScript Classes
  • Default parameter values
  • Array.find()
  • Array.findIndex()

Class Declaration Syntax

Instance properties must be defined inside of class methods.

Continue reading →

Node.js Babel 7.x different usage transpiling to ES5 and Debugging

Posted on by admin

I already mentioned many details in the following link. So I don't want to duplicate everything in this post one more time.

You can reach github project from the following link.

https://github.com/kenanhancer/babel7-usage.git

You can reach Babel 6.x post from the following link.

Node.js Babel 6.x different usage transpiling to ES5 and Debugging

Creating Babel configuration file

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ],
  "env": {
    "development": {
      "presets": [
        [
          "@babel/preset-react",
          {
            "development": true
          }
        ]
      ],
      "sourceMaps": true,
      "retainLines": true
    }
  }
}

JavaScript Promise and Async/Await

Posted on by admin

Asynchronous functions always return a Promise. So, I added following promise example firstly.

Promise Examples

The following three examples are doing same job. I used function statement and arrow function in Promise.

Promise with Function Declaration(Function Statement)

Promise with Arrow Function

Async Examples

Async Function Declaration(Function Statement)

Async Function Expression

Async Arrow Function

Await Examples

JavaScript – ECMAScript

Posted on by admin

I finally decided to write this post as well. I have collected many information from different links. When I need to remember fundamentals of JavaScript, I spend too much time in google. Because many developers just focused on specific features of JavaScript. In addition to this, different naming conventions are used, even they are mentioning about same topic 🙂
So, this is very very useful post for me. I hope that it will help any developers who need this kinds of collective documentation.

Continue reading →

JavaScript Hoisting

Posted on by admin

This topic is very very important in javaScript. It is an unknown behavior of javaScript. Shortly, javaScript compiler moves variables and function declarations

Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope.

Variables and constants declared with let or const are not hoisted!

JavaScript Declarations are Hoisted

In JavaScript, a variable can be declared after it has been used.

In other words, a variable can be used before it has been declared.

Hoisting applies to variable declarations and to function declarations.

function declarations are hoisted before variable declarations.

Hoisting is only possible with declaration but not the initialization. JavaScript will not move variables that are declared and initialized in a single line.

Continue reading →

JavaScript Functions

Posted on by admin

I sometimes try to remember basis of JavaScript Functions. So, I often exercise about it. I followed this link https://www.w3schools.com/js/js_function_definition.asp. I copied some important descriptions from that link. My aim is to follow this post when I need to remember again 🙂

JavaScript Functions

A JavaScript function is a block of code designed to perform a particular task.

A Function is much the same as a Procedure or a Subroutine, in other programming languages.

Why Functions?

You can reuse code: Define the code once, and use it many times.

You can use the same code many times with different arguments, to produce different results.

JavaScript Function Types

  1. Function Declaration (function statement)
  2. Function Expression
  3. Function Constructor
  4. Self-Invoking Function (Immediately Invokable Function Expression IIFE)
  5. Arrow Function
  6. Object Method Shorthand Definition
  7. Generator Function
Continue reading →

Node.js Babel 6.x different usage transpiling to ES5 and Debugging

Posted on by admin

There are different usages of babel tool. I put a sample package.json file. Notice that there are scripts block which has different usages.

You can reach github project from the following link.

https://github.com/kenanhancer/babel6-usage.git

You can reach Babel 7.x post from the following link.

Node.js Babel 7.x different usage transpiling to ES5 and Debugging

Creating Babel configuration file

.babelrc

{
  "presets": [
    "env"
  ],
  "plugins": [
    "transform-runtime"
  ],
  "sourceMaps": true,
  "retainLines": true
}

Running with Babel-node

//If you have installed babel-cli package globally, run below code.
babel-node --presets=env --plugins=transform-runtime src

or

//If you have .babelrc config file, run below code without specifying inline arguments.
babel-node src

or

//If you have installed babel-cli package locally, run below code.
./node_modules/.bin/babel-node --presets=env --plugins=transform-runtime src
Continue reading →