JAVASCRIPT

arrow function javascript

// Normal Function in JavaScript
function Welcome(){
  console.log("Normal function");
}

// Arrow Function
const Welcome = () => {
  console.log("Normal function");
}

arrow function javascript

///////
//JavaScript Function Declarations
///////

//4th (arrow function)
hello4 = (name) => { return ("Hello " + name); }
    //OR
hello5 = (name) => { return (`Hello new ${name}`) }

//1st (simple function)
function hello1() {
    return "Hello simple function";
}

//2nd (functino expression)
hello2 = function() {
    return "Hello functino expression";
}

// 3rd ( IMMEDIATELY INVOKED FUNCTION EXPRESSIONS (llFE))
hello3 = (function() {
    return "Hello IMMEDIATELY INVOKED FUNCTION EXPRESSIONS (llFE)";
}())

arrow function javascript

// Function in JavaScript
function regular(){
  console.log("regular function");
}
regular(); //regular function

// Arrow Function
const arrow = () => console.log("Arrow function");
arrow(); //Arrow function

javascript arrow function

// Non Arrow (standard way)
let add = function(x,y) {
  return x + y;
}
console.log(add(10,20)); // 30

// Arrow style
let add = (x,y) => x + y;
console.log(add(10,20)); // 30;

// You can still encapsulate
let add = (x, y) => { return x + y; };

arrow function in javascript

// arrow function shorten way to write function
//it make easy to write callback function
const arrowFunction = names.map((name)=> {
return name.length <6 ? "long name" :"short name"
})
//if we have one parameter in callback function we don't need to add parenthesis ()
//if there is only one code logic and return value then we can remove return and {}
const arrowFunction = names.map(name=> name.length<10 ? "long name" :"short name" )

Arrow Functions

// The usual way of writing function
const magic = function() {
  return new Date();
};

// Arrow function syntax is used to rewrite the function
const magic = () => {
  return new Date();
};
//or
const magic = () => new Date();

name arrow function

//Long version  
function add(a, b) {  
    return a + b;   
}

// Shorthand  
const add = (a, b) => a + b;   

how to write an arrow function in javascript?

function double(x) { return x * 2; } // Traditional way
console.log(double(2)) // 4


const double = x => x * 2; // Same function written as an arrow function with implicit return
console.log(double(2)) // 4

arrow functions=>

// Traditional Anonymous Function
function (a, b){
  return a + b + 100;
}

// Arrow Function
(a, b) => a + b + 100;

// Traditional Anonymous Function (no arguments)
let a = 4;
let b = 2;
function (){
  return a + b + 100;
}

// Arrow Function (no arguments)
let a = 4;
let b = 2;
() => a + b + 100;

js arrow function

// const add = function(x,y) {
//     return x + y;
// }

// const add = (x, y) => {
//     return x + y;
// }

const add = (a, b) => a + b;


const square = num => {
    return num * num;
}

// const rollDie = () => {
//     return Math.floor(Math.random() * 6) + 1
// }

const rollDie = () => (
    Math.floor(Math.random() * 6) + 1
)

arrow function javascript

([a, b] = [10, 20]) => a + b;  // result is 30
({ a, b } = { a: 10, b: 20 }) => a + b; // result is 30

arrow function

const doSomething = () => {
  // Function Scope
};

arrow function javascript

const suma = (num1, num2) => num1+num2
console.log(suma(2,3));
//5

An Arrow Function

/*The arrow functions were introduced in ECMA 2015 with the main purpose of giving a shorter syntax to a function expression. 
Besides providing shorter syntax, which increases the readability of the code, 
it does not have its own value of the this object. The value of this object inside an arrow function is inherited from the enclosing scope.

You can write an arrow function to add two numbers as shown in the next code example.*/

var add = (num1, num2)=> num1+num2; 
let res = add(5,2);
console.log(res); // 7 

javascript arrow function

const welcome = () => {
	console.log("THIS IS A ARROW FUNCTION")
}

arrow function javascript

// Traditional Function
function (a, b){
  return a + b + 100;
}

// Arrow Function
(a, b) => a + b + 100;

// Traditional Function (no arguments)
let a = 4;
let b = 2;
function (){
  return a + b + 100;
}

// Arrow Function (no arguments)
let a = 4;
let b = 2;
() => a + b + 100;

arrow function javascript

// Traditional Function
function (a, b){
  let chuck = 42;
  return a + b + chuck;
}

// Arrow Function
(a, b) => {
  let chuck = 42;
  return a + b + chuck;
}

arrow function javascript

hello = () => {
  return "Hello World!";
}

Javascript basic arrow function

const power = (base, exponent) => {
    let result = 1;
    for (let count = 0; count < exponent; count++) {
      result *= base;
    }
    return result;
  };

arrow function javascript

// an arrow function is also called a lambda or an anonymous function

let myFunction = () => {
  // some logic
}

arrow function

const = newfunc =(a,b)=>{
	return a+b
}

arrow function javascript

//arrow function
()=>{}
//normal function
function(){}
//useses of arrow function
var fnct=()=>{}
var fnct=(param1,param2,...rest)=>{console.log(param1),alert(param2),return(rest)}
//or these
var fnct=e=>{}
var fnct=(e)=>e
var fnct=e=>e
//examples
var fnct=param=>{return 'hello '+param}
var fnct=(param1,param2,...rest)=>!param1?param2:rest
var fnct=return_=>return_
var fnct=hi=>alert(hi)

Arrow function in ES6

var array = [1, 2, 3, 4]

const sum = (acc, value) => acc + value
const product = (acc, value) => acc * value

var sumOfArrayElements = array.reduce(sum, 0)
var productOfArrayElements = array.reduce(product, 1)

js arrow function

hello = () => {
	return "Hi All";
}

arrow function javascript

hello4 = (name) => { return ("Hello " + name); }
    //OR
hello5 = (name) => { return (`Hello new ${name}`) }


document.getElementById("arrow").innerHTML = hello4("arrow function");

document.write("<br>" + hello5("arrow function"));

arrow function javascript rules

const add3 = (num1, num2, num3) => return num1 + num2 + num3;

Arrow Function Example

let nums = [3, 5, 7]
let squares = nums.map(function (n) {
  return n * n
})
console.log(squares)

arrow function javascript

const power = (base, exponent) => {
  let result = 1;
  for (let count = 0; count < exponent; count++) {
    result *= base;
  }
  return result;
};

//if the function got only one parameter

const square1 = (x) => { return x * x; };
const square2 = x => x * x;

// empty parameter

const horn = () => {
  console.log("Toot");
};

arrow function javascript

// Traditional Function
function myFunction(param) {
  var a = param * 3;
  return a;
}

//Arrow Function
let myFunction = (a, b) => {
  let c = (a * b) + 3;
  return c;
}

Arrow function in javascript

// Arrow functions let us omit the `function` keyword.
// Here `long_example` points to an anonymous function value.
const long_example = (input1, input2) => {
    console.log("Hello, World!");
    const output = input1 + input2;

    return output;
};

// If there are no braces, the arrow function simply returns the expression
// So here it's (input1 + input2)
const short_example = (input1, input2) => input1 + input2;

long_example(2, 3); // Prints "Hello, World!" and returns 5
short_example(2, 5);  // Returns 7

// If an arrow function only has one parameter, the parentheses can be removed.
const no_parentheses = input => input + 2;

no_parentheses(3); // Returns 5

javascript this Inside Arrow Function

const greet = () => {
    console.log(this);
}
greet(); // Window {...}

arrow function

const hello = () => {  
 return 'Hello'
}

const hello = () => 'Hello'
console.log(hello())

arrow functions

let add = (x, y) => x + y;

console.log(add(10, 20)); // 30;
Code language: JavaScript (javascript)

Arrow Function javascript

// function expression
let x = function(x, y) {
   return x * y;
}

arrow function javascript

params => ({foo: "a"}) // returning the object {foo: "a"}

javascript this inside arrow function

function A() {
  this.val = "Error";
  (function() {
    this.val = "Success";
  })();
}

function B() {
  this.val = "Error";
  (() => {
    this.val = "Success";
  })();
}

var a = new A();
var b = new B();
a.val // "Error"
b.val // "Success"

Arrow function in javascript

let numbers = (x, y, z) => (x + y + z) * 2;
console.log(numbers(3, 5, 9))
//Expected output:34

arrow functions=>

(param1, paramN) => {
   let a = 1;
   return a + param1 + paramN;
}

arrow function

const bk = () =>{
   console.log("Bk function called");
}
bk()

arrow function javascript rules

const square = num => num ** 2;

arrow function javascript rules

const sayHi = ()=>console.log('Hi');

arrow functions=>

// Traditional Anonymous Function
function (a, b){
  let chuck = 42;
  return a + b + chuck;
}

// Arrow Function
(a, b) => {
  let chuck = 42;
  return a + b + chuck;
}

arrow function

textBox.addEventListener('keydown', (event) => {
  console.log(`You pressed "${event.key}".`);
});

javascript Arrow Function Syntax

let myFunction = (arg1, arg2, ...argN) => {
    statement(s)
}

arrow function javascript

const square = num => num * num;

Arrow Function Example

let nums = [3, 5, 7]
let squares = nums.map((n) => {
  return n * n
})
console.log(squares)

arrow function

// Traditional Function
function (a){
  return a + 100;
}

// Arrow Function Break Down

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
}

// 2. Remove the body brackets and word "return" -- the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;

arrow function javascript

// An empty arrow function returns undefined
let empty = () => {};

(() => 'foobar')();
// Returns "foobar"
// (this is an Immediately Invoked Function Expression)

var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);
// 66

var even = arr.filter(v => v % 2 == 0);
// [6, 0, 18]

var double = arr.map(v => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// More concise promise chains
promise.then(a => {
  // ...
}).then(b => {
  // ...
});

// Parameterless arrow functions that are visually easier to parse
setTimeout( () => {
  console.log('I happen sooner');
  setTimeout( () => {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);

arrow function

// Arrow function with two arguments const sum = (firstParam, secondParam) => {   return firstParam + secondParam; }; console.log(sum(2,5)); // Prints: 7  // Arrow function with no arguments const printHello = () => {   console.log('hello'); }; printHello(); // Prints: hello // Arrow functions with a single argument const checkWeight = weight => {   console.log(`Baggage weight : ${weight} kilograms.`); }; checkWeight(25); // Prints: Baggage weight : 25 kilograms.  // Concise arrow functionsconst multiply = (a, b) => a * b; console.log(multiply(2, 30)); // Prints: 60 

arrow function Java Script

param => expression
(param) => expression

// Arrow Function
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

Arrow functions syntax

const introduction = () => {
    console.log("Hello, my name is Jessica.");
};