Use of '=>' in javascript [duplicate] - javascript

This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 7 years ago.
I recently came across a bit of javascript in my quest to self learn the language which is a clever way of turning the string 'code wars' to C.Wars and 'Barack Hussain obama' to B.H.Obama. My question is on the use of the =>. I could not find details on it. Here is the snippet:
n.split(' ').map((v, i, a) => v.charAt(0).toUpperCase() + (i == a.length - 1 ? v.slice(1) : '.')).join('')
the syntax of map in javascript is:
arr.map(callback[, thisArg])
So would it be right to assume that the => is injecting an anonymous callback function with the parameters v, i and a. From the documentation I see that the callback function for map must contain three arguments:
currentValue
The current element being processed in the array.
index
The index of the current element being processed in the array.
array
The array map was called upon.
Is there any where I can find about the => syntax and its other uses or can someone explain it further to me?
A

That is an arrow function. It represent an anonymous function. It came with the EcmaScript 6 standard.
It does mostly the same as a regular function() {<something>} except it carries on with the "this" from the outer scope. It does not have its own "this". This means you do not need to bind "this" into the callback function anymore.
Here you can find further information.

Related

_ as a variable in JavaScript function [duplicate]

This question already has an answer here:
Understanding arrow function parameters
(1 answer)
Closed 1 year ago.
I came across this function:
const rotatedTetro = matrix.map((_, index)=> matrix.map(col => col[index]))
What does the _ passed in mean?
There’s nothing special about underscore as a variable name. It’s just a convention often used to indicate that the argument won’t be used, but it needs to be present because you need the args that follow it.
It’s a way of indicating the code is “skipping over” that argument.

Arrow function confusion [duplicate]

This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 4 years ago.
I was doing a question on codesignal and when I couldn't get the answer myself for all tests, revealed the answers and saw this one; while I understand what it's trying to do (make sure positions are not divisible by n, and if it is increment n by one) I'm having trouble understanding the arrow function syntax and, rewriting it myself from their code.
function obst(inputArray) {
for (var n=1;;n+=1) if(inputArray.every(x=>x%n)) return n;}
In Javascript, every function written like this:
function(args) {
// DO SOME STUFF
}
can be written like this:
(args) => {// DO SOME STUFF}
In your case, the method .every() expects a function, and
function(x) {
return x%n;
}
is written as
x => x%n
inputArray.every(x=>x%n)
is the same as
inputArray.every(function (x){
return x%n
}))
( except for the way the 'this' keyword works )
For any doubt about Javascript language, i recommend the You Dont Know Js series
written by Kyle Simpson.
It's a very enlightening book.
Tip: When you write a code, ask question to youself like:
what i'm doing?
assigment means equality?
what are the methods that can i use in string variables?
And something like that.
Stimulate yourself to know what in the actual fudge, you are doing.
Cheers!.

What does ‘...’ in JavaScript do? [duplicate]

This question already has answers here:
What "..." means in Javascript (ES6)? [duplicate]
(1 answer)
Spread Syntax vs Rest Parameter in ES2015 / ES6
(11 answers)
Closed 4 years ago.
I’m new to coding and slef teaching JavaScript.
My task I was set was to identify the largest value in an array.
My soloition works, but I needed the ‘...’ for it to work properly.
My question is, what does the ‘...’ in the last line actually mean/do?
function createAnArr(){
let myArr = prompt("Enter your numbers separated by commas:").split(",");
return myArr;
}
console.log(Math.max(...createAnArr()));
'...' it means it will be able to take any number of arguments of the respective scope
'...': The spread operator is used for array construction and destructuring, and to fill function arguments from an array on invocation. A case when the operator spreads the array (or iterable object) elements.
more details you can see here

How does the new Javascript syntax work regarding functions [duplicate]

This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 5 years ago.
I'm not sure what this is called in Javascript:
exports.withLocalCallback = () => {
return [1, 2, 3].map(x => x + 1)
}
I haven't seen this before and I can't even think of a way to google it. Can someone explain what's happening here?
It's arrow functions, and they work almost the same as normal js functions, with the difference that 'this' is bound to the scope in which the function is defined. So you don't need to bind functions to access the correct object.
The difference is none if you don't need 'this', except is another syntax, which looks more like functional language functions.

Arrow function inside map operator/method in javascript explanation e => e.target.value [duplicate]

This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 6 years ago.
I am following a tutorial in javascript/angular2 and I know it is a novice question, but if someone could please explain what exactly is this piece of code doing. I have read at various places and in the Mozilla docs, but I am still confused about it. I am aware that: map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results,but what exactly is the code doing in this context:
map(e => e.target.value)
It's nearly the same as this:
map(function(e) {
return e.target.value;
});
...it's just using the concise arrow function form instead of a function function. There are other differences between function functions and arrow functions (arrow functions close over this and a couple of other things, function functions don't), but that code isn't using any of them.
This is using ES2015/ES6 shorthand syntax. To write it out in ES5:
map(function(e) { return e.target.value; })
The function is the callback function, the e is the current element of the array, and the return value of e.target.value will be the value put in the new array.

Categories