This question already has an answer here:
Where can I get info on the object parameter syntax for JavaScript functions?
(1 answer)
Closed 5 years ago.
const f = ({x,y})=>{...do something...};
const f = (x,y)=>{...do something...};
What is the difference between these two lines ?
My understanding is both pass "x" and "y" are arguments.
Are both the same then ?
The first one uses destructuring you can use it as
f({x: 0, y: 1})
you pass one object with fields x and y
and then in body you can access fields of object as variables x and y.
In the second one you have to pass 2 variables
f(0, 1)
Bodies can be the same of those functions and they would work analogically
for instance
=> { return x + y; }
but params should be passed in different ways
The first one you're passing an object as a parameter. But I don't think it's a working example. Here is one
class O {
x;
y;
}
const example =(o:O)=>{
//do something
return o.x+o.y;
};
The equivalent is
var example = function example(o) {
//do something
return o.x+o.y;
};
The second one you're passing two parameters the equivalent is
var example2 = function example2(x, y) {
//do something
return 0;
};
Related
This question already has answers here:
Where can I get info on the object parameter syntax for JavaScript functions?
(1 answer)
What does this symbol mean in JavaScript?
(1 answer)
Closed 2 years ago.
I am new to React. Recently I came across an application wherein some function had the definition as:
async function (a, b) => {//body} which is quite understandable. But also in the same apllication some functions had the structure as async function ({a,b}) => {//body}. What is the difference between defining function between the above two methods?
The second example is destructuring the function arguments. It basically provides a shorter syntax for extracting an object key's value without the dot notation mess
Let's say you have an object
const myObject = { x: 1, y: 2 };
So, when you pass myObject to the function, you can call the variables without the dot notation. This makes the code easier to read.
function myFunction({ x, y }) {
//Here you can use directly x instead of myObject.x
}
You can read more about destructuring here
in the first function your parameter are 2 different variables
, in the second function they are parameters of the object you are passing
like
let Cat = {
name:"catty",
color:"gray"
}
secound example you pass the whole object like this
function ( Cat ) {}
function ( { name , color } ) {
/// here you can use name and color as "catty" and "gray"
}
if you use the first expample you would have to specify the parameters like this
function (Cat.name , Cat.color) {
}
the word async refers to waiting this function to call
In the first case, there are 2 arguments passed into the function, in the second the first argument passed into the function is an object which is being destructured.
const obj = { a: 1, b: 2 }
async function foo({ a, b }) => {
a; // 1
b; // 2
}
foo(obj);
This question already has answers here:
Javascript: operator overloading
(9 answers)
Closed 4 years ago.
Let's say i want an object that when multiplied with, it multiplies by two and subtracts 1.
The syntax would look like this:
var a = {
on_multiply: function(context){
return context*2-1
}
};
alert(2*a);
This would output 3.
I don't want to write
"a.on_multiply(2)"
Is there a way to do this?
If yes, is it possible to do this with arrays or matrixes also?
The simplest way I can think of to make the above example work is to assign a function named a, and have the context as a parameter of that function:
function a(context) {
return (context * 2) - 1;
}
And if you really wanted a to be a function assigned to a name:
const a = context => 2 * context - 1;
And the above in ES5 syntax:
const a = functipn(context) {
return (context * 2) - 1;
}
Hopefully this helps!
This question already has answers here:
Add method to string class
(6 answers)
Closed 4 years ago.
In javascript, I want to write a function which is called as follows:
var x = 'testString'
var y = 'anotherstring'
var z = 0
var result = x.aFunction(y, z)
function aFunction(y, z) {
...
}
This is the first time I am attempting this, my question is how can I get and use the value of x in the function aFunction, without actually referring to the declared variable.
I tried looking for this but I cannot find anything. If there is a post specifically for this that anyone knows about, please let me know.
Thanks
You need to use String.prototype.aFunction so that you can add a custom function aFunction() to the prototype of String such that it can be invoked by a string variable. Also this.toString() inside the prototype function will give you the value of the x variable (calling string)
var x = 'testString'
var y = 'anotherstring'
var z = 0
String.prototype.aFunction = function(y, z){
console.log(this.toString());
return y+z;
}
var result = x.aFunction(y, z);
console.log(result);
This question already has an answer here:
Scope of Default function parameters in javascript
(1 answer)
Closed 4 years ago.
ES6 introduced default parameters. I'm trying to understand how inline function default parameters work with this new feature. Specifically how its scoping work.
Take for example the following two functions:
function one(x, f = function (){return x})
{
var x = 5;
console.log([x,f()]);
}
function two(x, f = function (){return x})
{
x = 5;
console.log([x,f()]);
}
one(1);//[5,1]
two(1);//[5,5]
Is it correct to say that, in function one, f keeps it's own closure scope for x in the parameter list, so that when the function redefines x as a new var: var x = 5;, the reference that f has, is not the same as the one inside the function?
If that's the case, is function one equal to function three below:
function three(x,f)
{
var x2 = x;
f = f !== undefined ? f : () => x2;
var x = 5;
console.log([x,f()]); //[5,1]
}
I tried, without luck, to find how this behavior is documented, if someone could point me to the right part of the documentation that would also be great.
You are correct. In both of the top functions x in f refers to the parameter x.
There's some considerations with case 3.
In the third example if f isn't defined and you are returning x2 when calling the function it will be equal to whatever x originally was. When you do x = 5; you aren't changing x2. This is because when you assign x2 = x JavaScript makes a copy not a reference.
Unless the x parameter is passed an array or object x2 will be a copy and not a reference of x.
So if you do three(3) then x2 will always be 3 because you're never changing it.
This question already has answers here:
javascript es6 double arrow functions
(2 answers)
Closed 5 years ago.
What does double arrow parameters mean in the following code?
const update = x => y => {
// Do something with x and y
}
How is it different compared to the following?
const update = (x, y) => {
// Do something with x and y
}
Thanks!
Let's rewrite them "old style", the first one is:
const update = function (x) {
return function(y) {
// Do something with x and y
};
};
While the second one is:
const update = function (x, y) {
// Do something with x and y
};
So as you can see they are quite different, the first returns an "intermediate" function, while the second is a single function with two parameters.
There's nothing special about "double arrow parameters", this is just one arrow function returning another, and can be extended for as many arguments as you'd like. It's a technique called "currying".
From Wikipedia:
In mathematics and computer science, currying is the technique of translating the evaluation of a function that takes multiple arguments (or a tuple of arguments) into evaluating a sequence of functions, each with a single argument.
The benefit of this is that it makes it easier to partially apply and compose functions, which is useful for some styles of functional programming.
Example
Let's say you have a function add which takes two numbers and adds them together, which you might traditionally write like this:
const add = (a, b) => a + b;
Now let's say you have an array of numbers and want to add 2 to all of them. Using map and the function above, you can do it like this:
[1, 2, 3].map(x => add(2, x));
However, if the function had been in curried form, you wouldn't need to wrap the call to add in another arrow function just to adapt the function to what map expects. Instead you could just do this:
const add = a => b => a + b;
[1, 2, 3].map(add(2));
This is of course a trivial and rather contrived example, but it shows the essence of it. Making it easier to partially apply functions also makes it more practical to write small and flexible functions that can be composed together, which then enables a much more "functional" style of programming.
That are called arrow functions, it the new format for functions presented by ES6, in the first example
const update = x => y => {
// Do something with x and y
}
can be traduced to
var update = function (x){
return function (y){
// Do something with x and y..
}
}
in ES5, and is a function that returns a function
is totally different than
const update = function (x, y) {
// Do something with x and y
};
The syntax PARAM => EXPR represents a function that takes a parameter PARAM and whose body is { return EXPR; }. It is itself an expression, so it can be used as the EXPR of other functions:
x => y => { ... }
parses as
x => (y => { ... })
which is the same as
x => { return y => { ... }; }