callback functions explained version 1

PHOTO

Sun Jun 23 2024 04:23:58 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #callback #functions

(function () {
  'use strict';

  function fetchData(callback) { // create the first (outer) function
    const data = 'get data from an API';
    setTimeout(() => {
      callback(data); // use the callback param as a function and pass in the data value
    }, 1000);
  }

  function displayData(data) { // create the inner function that takes in the callback as a param
    console.log('processing data');
    console.log(data);
  }

  fetchData(displayData); // finally call the outer function with the inner function as a value
})();

COPY

Save snippets that work from anywhere online with our extensions

Comments

JS

@davidmchale

If statement with switch delete duplicates from an array loop and find class Nullish with an Object - basic tranverse classes in a list substring capitalize substring text with elipses array.at() js media query Dynamic Filter - buttons advanced flow converted if statement Add an array to a HTML dataset getElement Function Intersection Observer template intersection Observer Basic Example fetch data, display and filter for of loop - get index get random index value from an array fetch with post method get id value from url debounce for scrolling get element or elements check functions return values from functions indexOf explantion sorting basic using for-of loop for getting index value of iteration import json data into a JS module Splide slider with modal JS change active class if url path matches Pagination / array of arrays FIlter array or return full array price formatting ignores wrapping element on click Create a dummy array with numbers Random Generated Number Dummy array - list items dummy id Limits the amount of text Random Number generator function format date function Remove duplicates from JSON array data Filter Posts from state remove duplicates and create object simple ternary remove transition with propertyName sorting in reverse counting items using reduce splice explanation Declaring Variables Get primitive properties on a number / string etc using proto check an array of objects exists / check using regex Destructuring nested function scope IFFE function basic switch Switch with function passing an object check length of object while loops (for when the number we are iterating over is unknown) Ternary with 2 conditions for of loop with index array nested ternary operator callbacks Method Borrowing this keyword and arrow functions rest operator - args functions p1 rest operator - args functions p2 for of loop with index and entries callback functions explained version 1 callback functions explained version 2 Form and value IF Element shorthand function as a callback inside a higher order function Using param for symbol remove 'px' from number scrolling behaviour test 1 clearing event listeners new URL applying css vars scroll behaviours testing intersection observer intersection observer with loop JS docs - writing js docs check is key exists call() nested ternary with function forEach with function and ...args using template literals filter duplicates get class by indexOf returning ternary operator remove children from parent bootstrap rows with cols fetching multple data endpoints Promise.all

#javascript #javascript #functions #parameters

Required Parameters for Functions in JavaScript

 const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// These will throw errors
hello();
hello(undefined);

// These will not
hello(null);
hello('David');
The idea here is that it uses default parameters, like how the b parameter here has a default if you don’t send it anything:
function multiply(a, b = 1) {
  return a * b;
}

#python #dates #functions #python3.8

How to parse a String into Datetime in Python

from datetime import datetime

datetime_object = datetime.strptime('Jun 1 2005  1:33PM', '%b %d %Y %I:%M%p')

#callback

callbacks

const getSelectValue = (callback) => {
  const options = getElement("#city-select");

  options.addEventListener("change", function (e) {
    const value = e.target.value;
    // pass the value into the callback function we can use later
    callback(value); // this value needs to be passed into the function where we are using the getSelectValue function ie  getSelectValue(value)
  });
};




// app function
const init = () => {
  // populate the DOM with the cities data on load
  const selectDOM = getElement("#city-select");
  populateDOM(cities, selectDOM);

  let selectedCity = ""; // this gets updated with the function below

  // need to run the callback here
  // get the value and assign it to a variable outside the function
  getSelectValue((value) => {
    selectedCity = value; // Assign the value to selectedCity
    //  // Log the selected city
    if (selectedCity !== "") {
      const container = getElement(".container h3");
      container.textContent = selectedCity;
    }
  });
};

window.addEventListener("DOMContentLoaded", init);

#callback #functions

callback functions explained version 1

(function () {
  'use strict';

  function fetchData(callback) { // create the first (outer) function
    const data = 'get data from an API';
    setTimeout(() => {
      callback(data); // use the callback param as a function and pass in the data value
    }, 1000);
  }

  function displayData(data) { // create the inner function that takes in the callback as a param
    console.log('processing data');
    console.log(data);
  }

  fetchData(displayData); // finally call the outer function with the inner function as a value
})();

#callback #functions #forms

callback functions explained version 2 Form and value

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Example</title>
</head>
<body>
  <form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="button" onclick="handleFormSubmit()">Submit</button>
  </form>

  <script src="script.js"></script>
</body>
</html>



// the JS
// Function to get the value from the input field
function getValue(callback) {
  // Get the input field
  const nameInput = document.getElementById('name');
  // Get the value from the input field
  const nameValue = nameInput.value;
  // Pass the value to the callback function
  callback(nameValue);
}

// Callback function to process the value
function processValue(value) {
  console.log('Processing value...');
  console.log(`Value received: ${value}`);
  // You can add more logic here to process the value further
}

// Function to handle form submission
function handleFormSubmit() {
  getValue(processValue);
}

#callback #higher #order #function

function as a callback inside a higher order function

  const transactions = [200, 450, -400, 3000, -650, -130, 70, 1300];
  function myFunc(item, date = '2nd Feb') {
    // adding in date default here but assume its from somewhere else
    
    return { amount: item, date }; // creating an object with both item and date
  }

  // forEach
  const test1 = transactions.map(item => myFunc(item, date));
  console.log(test1);

#python #python #iterator #functions

Using an iterator function to build a list

#In computer programming, an iterator is an object that enables a programmer to traverse a container, particularly lists.
# define function:
1.def unfold(fn, seed):
  2.def fn_generator(val):
    3.while True: 
      4.val = fn(val[1])
     5.-5 if val == False: break
      6.yield val[0]
  7.return [i for i in fn_generator([None, seed])]
EXAMPLES
f = lambda n: False if n > 50 else [-n, n + 10]
unfold(f, 10) # [-10, -20, -30, -40,

#php #functions

SVG upload

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

#php #wordpress #functions #documentation #prority

add_action in wordpress

https://developer.wordpress.org/reference/functions/add_action/

#javascript #object #functions

7 JavaScript Functions to Master Objects Manipulation and Make Your Code Cleaner | Medium

https://medium.com/@giuliamalaroda/7-javascript-functions-to-master-objects-manipulation-and-make-your-code-cleaner-cc142a269b13

#functions

Obfuscated Code in functions.php: Your theme's core files might contain:

PHP
$global_var = '...long string of random characters...'; 
eval(base64_decode($global_var));

#functions #nesting #scope

nested function scope

function firstFunction() {
  // parent function
  const x = 100; // parent variable / cant be used inside the child function

  function secondFunction() {
    const y = 60; // child variable / cannot be called in the parent function
    return y + x; // return calculation to the child function
  }

  return secondFunction(); // evoke the second function by returning it to the parent function
}

console.log(firstFunction()); // call the parent function

#functions #iffe #self

IFFE function

// iffe function
(function () {
  //Your code goes here
})();




// adding params to the IFFE

(function (name) {
  console.log(`Greetings ${name}`);
})("David");

#this #arrow #functions

this keyword and arrow functions

const shaunObj = {
  name: 'gary',
  year: 1987,
  currentYear: new Date().getFullYear(),

  // solution 1 = declare a normal function as this is bound to these functions
  calcAgeOne: function () {
    const self = this;
    const yearsold = self.currentYear - self.year;
    return yearsold;
  },

  // solution 2
  calcAgeTwo: function () { // declative function again but with arrow function inside
    console.log(this);

    const calcAgeArrow = () => {
      console.log(this);
      const yearsold = this.currentYear - this.year;
      return yearsold;
    };

    return calcAgeArrow(); // return the arrow function to the parent function
  },

	// DO NOT DO THIS
  // calcAge: () => {
  //   const yearsold = this.currentYear - this.year;
  //   return yearsold;
  // },
};

console.log(shaunObj.calcAgeOne());
console.log(shaunObj.calcAgeTwo()); // works with

#functions #...args

rest operator - args functions p1

const testObj = {
  name: 'David',
  movie: 'fight club',
  active: true,
};

const testObj2 = {
  name: 'kevin',
  movie: 'Bladerunner',
  active: false,
};



function getData(...args) {
  args.forEach(({name, movie}) => {
    console.log({name, movie});
  });
}

callback functions explained version 1

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

Browse more snippets >>

callback functions explained version 1

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

Browse more snippets >>

Embed code snippet