Detailed JavaScript Functions (arrow function comprising ES6)

Brief introduction

All content in JavaScript occurred in the function.

Is a function block can be defined once and run at any time.

Function may accept parameters and a return value.

In JavaScript functions are objects, a special kind of objects: function object.

Further, the function is called a first type function, since they can be assigned to a value, which can be passed as a parameter and is used as a return value.

syntax

Let's start with the "old", before ES6 / ES2015 syntax. This is a function declaration:

function dosomething(foo) {
  // do something
}

(Now, ES6 / ES2015 world, is known as a regular function)

Functions can be assigned to a variable (this is called a function expression):

const dosomething = function(foo) {
  // do something
}

Named function expressions similar, but with better call stack trace, which is useful when an error occurs - it saves the name of the function:

const dosomething = function dosomething(foo) {
  // do something
}

ES6 / ES2015 introduced arrow function, when using inline functions, is particularly suitable as a parameter or callback function:

const dosomething = foo => {
  //do something
}

Arrow function and other functions defined above are very different, we will explain later.

parameter

A function can have one or more parameters.

const dosomething = () => {
  //do something
}

const dosomethingElse = foo => {
  //do something
}

const dosomethingElseAgain = (foo, bar) => {
  //do something
}

Starting ES6 / ES2015, function parameters may have default values:

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}

This allows you to call functions without filling in all the parameters:

dosomething(3)
dosomething()

ES2018 introduces a trailing comma parameters, this feature helps reduce errors (for example, moving in the middle of the last) because of missing comma movement parameters resulting from:

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}

dosomething(2, 'ho!')

You can package all the parameters in an array, and use the spread operator when calling the function:

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}
const args = [2, 'ho!']
dosomething(...args)

When using a number of parameters, and these parameters can be difficult to remember. Here you can use the object, deconstruction reserved parameter names:

const dosomething = ({ foo = 1, bar = 'hey' }) => {
  //do something
  console.log(foo) // 2
  console.log(bar) // 'ho!'
}
const args = { foo: 2, bar: 'ho!' }
dosomething(args)

return value

Each function returns a value, default is "undefined".

Any function at the end of its line of code, or terminated when the execution flow to find the return keyword.

When JavaScript encounters this keyword, which perform the function exits and returns control to its caller.

If a value is passed, the value is returned as the result of a function:

const dosomething = () => {
  return 'test'
}
const result = dosomething() // result === 'test'

You can return only one value.

To simulate _ _ return multiple values, you can return an array of objects or text and use destructuring assignment function when calling.

Using arrays:

user target audience:

Nested functions

You can define functions in other functions:

const dosomething = () => {
  const dosomethingelse = () => {}
  dosomethingelse()
  return 'test'
}

Nested function scope is an external function, can not be called from outside.

Object Methods

When used as an object property functions called methods:

const car = {
  brand: 'Ford',
  model: 'Fiesta',
  start: function() {
    console.log(Started)
  }
}

car.start()

Arrow function in this

When the function is an arrow with a conventional method used as an object function, there is an important behavior. Consider this example:

const car = {
  brand: 'Ford',
  model: 'Fiesta',
  start: function() {
    console.log(Started ${this.brand} ${this.model})
  },
  stop: () => {
    console.log(Stopped ${this.brand} ${this.model})
  }
}

stop () method does not work as you expect that.

This is because the processing of this function declaration in two styles are different. Arrow function in this context refers to a closed function, the window object is in this case

this, using the function () host object reference

This means that the arrow function is not suitable for object methods and constructors (arrow Constructor actually raised when calling TypeError).

IIFE, immediately call the function expression

IIFE is a function performed immediately after the statement:

;(function dosomething() {
  console.log('executed')
})()

You can assign the result to a variable:

const something = (function dosomething() {
  return 'something'
})()

They are very convenient because you do not need to call this function after a defined individually.

Function mount

Before executing JavaScript code will be re-sorted according to certain rules.

Function will move to the top of its range. This is why the example below not being given;

dosomething()
function dosomething() {
  console.log('did something')
}

In the interior, JavaScript movement function, as well as all other functions found in the same range before the call:

function dosomething() {
  console.log('did something')
}
dosomething()

Now, if you use a named function expression, because you are using variables, different things will happen. Variable declaration is raised, but not the value, and therefore not a function.

dosomething()
const dosomething = function dosomething() {
  console.log('did something')
}

It will not work:

This is because what is happening inside is:

const dosomething
dosomething()
dosomething = function dosomething() {
  console.log('did something')
}

"Let" statement is true. var statement also does not work, but the report is not the same error:

This is because the vardeclaration was promoted and used undefinedas an initialization value while constand letwas promoted but not initialized.