{"id":9209,"date":"2022-10-18T15:09:11","date_gmt":"2022-10-18T14:09:11","guid":{"rendered":"https:\/\/stevepedwards.today\/DebianAdmin\/?p=9209"},"modified":"2023-11-26T03:22:56","modified_gmt":"2023-11-26T03:22:56","slug":"converting-js-functions-to-arrow-functions","status":"publish","type":"post","link":"https:\/\/stevepedwards.today\/DebianAdmin\/converting-js-functions-to-arrow-functions\/","title":{"rendered":"Functions: Writing and Converting JS Functions to Arrow Functions"},"content":{"rendered":"
<\/div>\n

<\/path><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n
\n
\n
<\/div>\n
https:\/\/www.udemy.com\/course\/the-complete-javascript-course\/<\/a><\/div>\n
<\/div>\n
Functions: jonas schmedtmann (Udemy):<\/div>\n
<\/div>\n
\"like a variable but for chunks of code\"<\/em><\/div>\n
\"..can receive data or return data back..I like to think of them as machines..like a food processor\"<\/em><\/div>\n
\n
\n
\"functions produce values\"<\/em><\/div>\n
\"...receive input data, transform data and output data..\"<\/em><\/div>\n
<\/div>\n
<\/div>\n
(This means they can have a variable assigned to that value so used in some way, like being logged out.<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
\n
NB: A parameter is the\u00a0 memory \"placeholder\" - like a variable name.<\/em><\/div>\n
An Argument is the value that goes into that memory space as a parameter.<\/em><\/div>\n
x = 1 (parameter = argument)<\/div>\n
<\/div>\n
<\/div>\n
This expression function below has the result value of the function stoerd in \"calcAge2\". The function and it's year argument can then be assigned as a variable age2 so the result of the return value calc is accessible to be logged to console.<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n
\n
Function expression<\/strong> - \"functions produce values\"<\/div>\n
The function is written but does not have a variable assigned to it until after when the constant age1 = calcAge1(birthyear parameter) is defined in terms of the function being called with it's \"1990\" parameter so there is a final result value existing in a named memory space to be logged out by console.log(age1)<\/div>\n
<\/div>\n
<\/div>\n
\n
\n
\n
function calcAge1(birthYear) { \u00a0 return 2020 - birthYear; } const age1 = calcAge1(1990); console.log(age1);<\/pre>\n<\/div>\n<\/div>\n
\/\/ 30<\/span><\/p>\n
 <\/p>\n<\/div>\n<\/div>\n
\n
Function declaration:<\/strong><\/div>\n
The function is \"expressed\" and it's logic is written as before above (hence expression) but then it is named by the const\u00a0 variable \"calcAge2\" being assigned to it at the beginning so it has a name - a memory space - for it and it's internal code to be invoked from later by calcAge2().<\/div>\n
The return keyword captures the result of the calculation in that calcAge2 memory space, but we can't access it until a variable, age1 is defined as the mem space for that return result when the function is run by calling it AND so it's result. Then the result of age1 can be displayed as the result value of the internal calculation. If you try to console just the function name, the console will display details of the function type itself, not it's result values.<\/div>\n
<\/div>\n
\n
\n
\n
const calcAge2 = function (birthYear) { \u00a0 return 2020 - birthYear; }; const age2 = calcAge2(1990); console.log(age2);<\/pre>\n<\/div>\n
\/\/ 30<\/span><\/p>\n
 <\/p>\n<\/div>\n
Confused yet?? Probably.<\/p>\n
 <\/p>\n
It's because there are complex encapsulation levels going on here.<\/p>\n
 <\/p>\n
The calculation result is stored in the return keyword, which is stored in the function name calcAge2, which can take an external parameter stored in (birthYear), which came in the form of a number value (1990), set by a human as input data, so becomes an alias for (birthYear) inside the function calculation that works out that calculation = 2020 - 1990 = 30, which can then finally be logged out as useable data by the console.log(age2) function, where age2 has become the alias for the final result!\u00a0 (See why JS is regarded as difficult to learn by many?) Following this process takes time and practise to understand what exactly is going on in JS code (or most languages for that matter).<\/p>\n
 <\/p>\n<\/div>\n<\/div>\n
\n
\/\/ A MAIN difference to realise is that a declaration is HOISTED but an expression is NOT ! IF the TTBottom order of the expression is reversed it errors!<\/div>\n
<\/div>\n
Declaration:<\/div>\n
<\/div>\n
\n
\n
\n
function calcAge1(birthYear) { \u00a0 return 2020 - birthYear; } const age1 = calcAge1(1990); console.log(age1);<\/pre>\n
\/\/ 30<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n
Expression:<\/p>\n
\n
\n
const age2 = calcAge2(1990); const calcAge2 = function (birthYear) { \u00a0 return 2020 - birthYear; }; console.log(age2);<\/pre>\n
\/\/ script.js:73 Uncaught ReferenceError: Cannot access 'calcAge2' before initialization at script.js:73:14<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n
\n
\n
This function DOES receive and return data from outside itself when \"called\" or \"run\" or \"invoked\" or \"executed\":<\/div>\n<\/div>\n
<\/div>\n<\/div>\n<\/div>\n
Fruit Processor:<\/div>\n
<\/div>\n
\n
\n
function fruitProcessor(apples, oranges) { const juice = `Juice with ${apples} apples and ${oranges} oranges.`; return juice; } const appleJuice = fruitProcessor(5, 0); console.log(appleJuice); const appleOrangeJuice = fruitProcessor(2, 4); console.log(appleOrangeJuice);<\/pre>\n
\/\/ Juice with 5 apples and 0 oranges.<\/span><\/p>\n<\/div>\n
\/\/ Juice with 2 apples and 4 oranges.<\/span><\/p>\n<\/div>\n
\n
Function Declarations vs. Expressions<\/strong><\/div>\n
\n
\n
function calcAge1(birthYear) { return 2020 - birthYear; } const age1 = calcAge1(1990); console.log(age1);<\/pre>\n
 <\/p>\n
Jonas' simple Arrow func expression conversion example:<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
function calcAge1(birthYear) { return 2020 - birthYear; } const age1 = calcAge1(1990); console.log(age1);<\/pre>\n<\/div>\n
\n
\/\/ 30<\/span><\/p>\n
 <\/p>\n
A bit of JS shorthand goes on here for same result!:<\/p>\n
\n
const calcAge = birthYear => 2022 - birthYear console.log(calcAge(1964))<\/pre>\n
\/\/ 58<\/span><\/p>\n
 <\/p>\n<\/div>\n
So, how to do it in steps from original function logic?<\/p>\n
1: Wite your require logic result (e.g. calculting an age from a given year of birth (1964) up to the current year\u00a0 2022 )<\/p>\n<\/div>\n
birthYear => 2022 - birthYear<\/span><\/div>\n
<\/div>\n
2: As the return keyword is implicit in an Arrow func, it's not required, but a variable name placeholder for the calculation IS:<\/div>\n
const calcAge =<\/span> birthYear => 2022 - birthYear<\/div>\n
<\/div>\n
That's IT! The simplest of Arrow functions - just need to invoke it with a parameter year and log out the result now:<\/div>\n
\n
\n
console.log(calcAge(1964))<\/span><\/div>\n
\/\/ 58<\/span><\/div>\n
<\/div>\n<\/div>\n<\/div>\n
Note that Arrow functions are not hoisted (moved above their variable defs on script load), similar to function expressions, though declarations ARE hoisted.<\/div>\n
<\/div>\n
Kyle's Cook's Arrow conversion example - the initial function declaration:<\/div>\n
<\/div>\n
\n
\n
function sum(a, b) { return a + b; } console.log(sum(1, 2));<\/pre>\n
\/\/ 3<\/span><\/p>\n<\/div>\n<\/div>\n
<\/div>\n
Process: you dont use func keyword but use a variable name:<\/div>\n
1: \"function sum\" becomes \"let sumArrow\":\u00a0<\/em><\/div>\n
\n
<\/div>\n<\/div>\n
2: let sumArrow = (a,b)<\/span><\/div>\n
<\/div>\n
3: put => between () and {}:<\/div>\n
let sumArrow = (a,b) => {}<\/span><\/div>\n
e.g Do logic for func with required args (maths etc) - a simple calculation eg. x = a + b, but then sub the = for an arrow => to get x => (a+b)<\/em><\/div>\n
<\/div>\n
4: put same original function code in {}<\/div>\n
let sumArrow = (a,b) => {return a + b;}<\/span><\/div>\n
<\/div>\n
5: change func names when calling new func: sum(1,2) becomes sumArrow(1,2)<\/div>\n
<\/div>\n
\n
\n
let sumArrow = (a, b) => { \u00a0 return a + b; }; console.log(sumArrow(1, 2));<\/pre>\n
\/\/\u00a0 3<\/span><\/p>\n
 <\/p>\n<\/div>\n<\/div>\n
Here's some practise writing standard functions:<\/p>\n
https:\/\/www.teaching-materials.org\/javascript\/exercises\/functions<\/a><\/p>\n
e.g:<\/p>\n
\n
function celsiusToFahrenheit(celsius) {\r\n\u00a0 fahrenheit = celsius * 1.8 + 32;\r\n\u00a0 console.log(`${fahrenheit} F is ${celsius} C`);\r\n}\r\ncelsiusToFahrenheit(0);\r\nfunction fahrenheitToCelsius(fahrenheit) {\r\n\u00a0 \u00a0 celsius = (fahrenheit - 32) \/ 1.8\r\n\u00a0 \u00a0 console.log(`${celsius} C is ${fahrenheit} F`);\r\n}\r\nfahrenheitToCelsius(0)<\/pre>\n
 <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
<\/path><\/svg><\/i> \"Loading\"<\/p>\n
<\/div>\n
https:\/\/www.udemy.com\/course\/the-complete-javascript-course\/ Functions: jonas schmedtmann (Udemy): \"like a variable but for chunks of code\" \"..can receive data or return data back..I like to think of them as machines..like a food processor\" \"functions produce values\" \"...receive input data, transform data and output data..\" (This means they can have a variable assigned to that value so used in ...\u00a0 Functions: Writing and Converting JS Functions to Arrow Functions<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-9209","post","type-post","status-publish","format-standard","hentry","category-post"],"a3_pvc":{"activated":true,"total_views":2,"today_views":0},"_links":{"self":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/comments?post=9209"}],"version-history":[{"count":36,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9209\/revisions"}],"predecessor-version":[{"id":10168,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9209\/revisions\/10168"}],"wp:attachment":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/media?parent=9209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/categories?post=9209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/tags?post=9209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}