0

Based on a reference:

Arrows are a function shorthand using the => syntax.

Well I cannot understand it as well. How can I write following code by using function in it literally?

AppRegistry.registerComponent('Component2', () => Component2);

Ok, lets focus on this:

() => Component2
  • What's ()? Is it the value I want to pass?
  • What's =>? Is it a alternative for the word of function? So we can write it as () function Component2 ? (I hardly think so)
  • What's Componenet2? Is it the name of a function? Or a class? or what exactly?
stack
  • 10,280
  • 19
  • 65
  • 117
  • Componenet2 is an object name which you defined as a component at the top of the file. It just gets returned – Giorgi Khorguani Apr 12 '17 at 05:52
  • 1
    Possible duplicate of [What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?](http://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas). You can also refer to [SO - Docs](http://stackoverflow.com/documentation/javascript/5007/arrow-functions#t=201704120555467344431) – Rajesh Apr 12 '17 at 05:56

5 Answers5

2

This () => Component2 is equivalent to the following:

function(){
    return Component2;
}

So the empty parentheses () in the left denotes that your function has no parameters, whereas the arrow => denotes what you function returns.

Below there is a snippet, in which we have a function that expects two values and returns their sum.

var add = (x,y) => x+y;
console.log(add(3,4));

A detailed documentation of the arrow functions can be found here.

Christos
  • 53,228
  • 8
  • 76
  • 108
2

You can rewrite it without es6 as : 

AppRegistry.registerComponent('Component2', function(){
 return Component2;
});

The format basically in this case is : 

(arguments) => returnValue

You can pass an argument like so: 

AppRegistry.registerComponent('Component2',(arg1, arg2) => Component2);

A more generic example with arguments would be: 

var print = (message) => console.log(message)
print('Hello World')
Shaunak
  • 17,377
  • 5
  • 53
  • 84
2

() => Component2 explanation in ES06:

() means anonymous function with no argument, => special symbol or ES06 arrow functions. Component2 is the returned value.

In general it represents like: 

function(){
    return Component2;
}
Ruhul Amin
  • 1,751
  • 15
  • 18
2

AppRegistry.registerComponent('Component2', () => Component2);

lets focus on () => Component2;

say if you have a function like this in ES5:

function fun(a,function(){ console.log(a);});

In ES6 it can be written as :

function fun(a,()=>{console.log(a)});

So you can say it is just a shorthand for writing functions in new ES6 way

In your case Component2 is an object in above example the code can be written as :

var obj = {console.log(a)};
function fun(a,()=>obj);

The result will be same.

Ravi S. Singh
  • 617
  • 8
  • 15
1

What's ()? Is it the value I want to pass?

() is the syntax for declaring a function's arguments, in this case there are no arguments.

What's =>? Is it a alternative for the word of function? So we can write it as () function Component2 ? (I hardly think so)

It is not a direct alternative for function, and no, you can't just insert the word function there and expect things to work. The alternative to the arrow syntax is function() {}.

What's Componenet2? Is it the name of a function? Or a class? or what exactly?

It's most likely a class, (and probably a React component, based on the name) because it is in CamelCase, which is how classes are written in Javascript. () => Component2 is an arrow function which takes no arguments and returns Component2.

ChidG
  • 3,053
  • 1
  • 21
  • 26