How Is () => {...} Different from () =>

How is () = {...} different from () =

When you open a block {} in an arrow function, the return isn't implied anymore.

You have to write it down :

this.state.articles.filter((article) => {
  return article.category === filter 
})

What's the difference between () and {} in javascript functions?

These are fundamentally different. The former arrow function syntax, () => {}, allows you to have multiple statements inside the arrow function's body, i.e.:

() => {
  console.log('Hello!');
  return 'World!';
}
// When called, this logs Hello! and returns World!

But the latter, () => (), is an arrow function that implicitly returns an expression that is wrapped in parentheses (called the grouping operator). It does not explicitly allow for multiple statements:

() => (
  'World' // only one expression that is implicitly returned
  // Would work fine without parentheses (unless you want to return an object!)
)
// When called, this function returns 'World'

Of course, you could also create an unreadable arrow function that performs multiple operations using the comma operator:

() => (console.log('Hello!'), 'World!')

React

I assume you see this with React stateless components:

const Comp = () => (
  <div>Hello World!</div>
);

This function (components are just functions) returns the <div> element implicitly. But, using {}, you can do some intermediary calculations instead of just returning right away:

const Comp = () => {
  const msg = 'Hello World!';
  return ( // Need to explicitly return here
    <div>{msg}</div>
  );
}

Flutter/Dart - Difference between () {} and () = {}

The fat arrow syntax is simply a short hand for returning an expression and is similar to (){ return expression; }.

According to the docs.

Note: Only an expression—not a statement—can appear between the arrow (=>) and the semicolon (;). For example, you can’t put an if statement there, but you can use a conditional expression

void main(){
    final cls = TestClass();
    cls.displayAnInt((){
       //you can create statements here and then return a value
       int num1 = 55;
       int num2 = 1;
       int sum = num1 + num2;
       return sum;
    });
   cls.displayAnInt(() => 55 + 1); // simply return an int expression
}
class TestClass{

    displayAnInt(makeIntFunc){

       int intValue = makeIntFunc();
       print('The int value is $intValue');
    }
}

From the code above, You can see that multiline statement can be made when the callback function is used and then a value is returned, while the fat arrow simply has an expression with no return keyword.

Considering your answer about fat arrows not supporting multiline statements in dart. This is quite understandable since doing () => {somtheing} would imply you are returning a map and it would expect to see something like () => {'name':'John', 'age':25} and not () => { _myTxt = "Text Changed";_myTxt = "Never Mind"; } .

What’s the difference between “{}” and “[]” while declaring a JavaScript array?

Nobody seems to be explaining the difference between an array and an object.

[] is declaring an array.

{} is declaring an object.

An array has all the features of an object with additional features (you can think of an array like a sub-class of an object) where additional methods and capabilities are added in the Array sub-class. In fact, typeof [] === "object" to further show you that an array is an object.

The additional features consist of a magic .length property that keeps track of the number of items in the array and a whole slew of methods for operating on the array such as .push(), .pop(), .slice(), .splice(), etc... You can see a list of array methods here.

An object gives you the ability to associate a property name with a value as in:

var x = {};
x.foo = 3;
x["whatever"] = 10;
console.log(x.foo);      // shows 3
console.log(x.whatever); // shows 10

Object properties can be accessed either via the x.foo syntax or via the array-like syntax x["foo"]. The advantage of the latter syntax is that you can use a variable as the property name like x[myvar] and using the latter syntax, you can use property names that contain characters that Javascript won't allow in the x.foo syntax.

A property name can be any string value.

An array is an object so it has all the same capabilities of an object plus a bunch of additional features for managing an ordered, sequential list of numbered indexes starting from 0 and going up to some length. Arrays are typically used for an ordered list of items that are accessed by numerical index. And, because the array is ordered, there are lots of useful features to manage the order of the list .sort() or to add or remove things from the list.

Difference between {} and () with .map with Reactjs

The difference is not related to react directly its ES6 Arrow functions syntax.

If you use regular parenthesis, it is equevalent to returning some value so

() => {return 'someValue';}

is equal to

() => ('someValue')

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// A function with no parameters should be written with a pair of parentheses.
() => { statements }

// Parenthesize the body of function to return an object literal expression:
params => ({foo: bar})

What is the difference between () = {} and function() {} in react-native javascript?

The () => {} is called an arrow function. They are, as you said, part of ES6. From the linked page:

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous.

Difference between = and - in Scala

-> it used to associate key with a value by using implicit conversion for example tuple, map etc.

scala> 1 -> 2
res0: (Int, Int) = (1,2)

scala> val map = Map("x" -> 12, "y" -> 212)

Its basically just take the item on the left and map it to the item on the right

It converts any type into an instance of "ArrowAssoc" using implicit conversion

implicit def any2ArrowAssoc[A](x: A): ArrowAssoc[A] = new ArrowAssoc(x)

class ArrowAssoc[A](x: A) {
    def -> [B](y: B): Tuple2[A, B] = Tuple2(x, y)
}

=> is a syntax provided by the language itself to create instance of function using call-by-name.
It passes value name inside the method for example:

`def f(x:Int => String) {}` function take argument of type Int and return String

You can also pass no argument like below

() => T means it doesn't take any argument but return type T.

What's the meaning of = (an arrow formed from equals & greater than) in JavaScript?

What It Is

This is an arrow function. Arrow functions are a short syntax, introduced by ECMAscript 6, that can be used similarly to the way you would use function expressions. In other words, you can often use them in place of expressions like function (foo) {...}. But they have some important differences. For example, they do not bind their own values of this (see below for discussion).

Arrow functions are part of the ECMAscript 6 specification. They are not yet supported in all browsers, but they are partially or fully supported in Node v. 4.0+ and in most modern browsers in use as of 2018. (I’ve included a partial list of supporting browsers below).

You can read more in the Mozilla documentation on arrow functions.

From the Mozilla documentation:

An arrow function expression (also known as fat arrow function) has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous. These function expressions are best suited for non-method functions and they can not be used as constructors.

A Note on How `this` Works in Arrow Functions

One of the most handy features of an arrow function is buried in the text above:

An arrow function... lexically binds the this value (does not bind its own this...)

What this means in simpler terms is that the arrow function retains the this value from its context and does not have its own this. A traditional function may bind its own this value, depending on how it is defined and called. This can require lots of gymnastics like self = this;, etc., to access or manipulate this from one function inside another function. For more info on this topic, see the explanation and examples in the Mozilla documentation.

Example Code

Example (also from the docs):

var a = [
  "We're up all night 'til the sun",
  "We're up all night to get some",
  "We're up all night for good fun",
  "We're up all night to get lucky"
];

// These two assignments are equivalent:

// Old-school:
var a2 = a.map(function(s){ return s.length });

// ECMAscript 6 using arrow functions
var a3 = a.map( s => s.length );

// both a2 and a3 will be equal to [31, 30, 31, 31]

Notes on Compatibility

You can use arrow functions in Node, but browser support is spotty.

Browser support for this functionality has improved quite a bit, but it still is not widespread enough for most browser-based usages. As of December 12, 2017, it is supported in current versions of:

Chrome (v. 45+)
Firefox (v. 22+)
Edge (v. 12+)
Opera (v. 32+)
Android Browser (v. 47+)
Opera Mobile (v. 33+)
Chrome for Android (v. 47+)
Firefox for Android (v. 44+)
Safari (v. 10+)
iOS Safari (v. 10.2+)
Samsung Internet (v. 5+)
Baidu Browser (v. 7.12+)

Not supported in:

IE (through v. 11)
Opera Mini (through v. 8.0)
Blackberry Browser (through v. 10)
IE Mobile (through v. 11)
UC Browser for Android (through v. 11.4)
QQ (through v. 1.2)

You can find more (and more current) information at CanIUse.com (no affiliation).

Javascript ES6 Difference between ()=() and ()={}

with the ()=> () syntax imagine if there was an implicit return statment e.g. () => {return ()}

How Is () => {...} Different from () =>