Function

19 Oct 2023 . javascript .

Stringify

Transfer a JS object into a string. JSON is a common structure to receive and send data between the web server and client, and the object ought to be a string when sent to the server.

var data = { ID: 1, First_name: "sam", Second_name: "will" };
var send_data = JSON.stringify(data);

Anonymous function

As a callback that is used once and does not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body.

setTimeout(function () {
  console.log('Hello world!');
}, 1000);

function foo(){ }();

IIFE stands for Immediately Invoked Function Expressions. There is no name specified, hence it throws Uncaught SyntaxError: Unexpected token ). (function foo(){ })(). By wrapping this function within (), it becomes a function expression which can then be executed with the subsequent ().

closure

A closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

function init() {
  var name = 'Mozilla'; // name is a local variable created by init
  function displayName() {
    // displayName() is the inner function, a closure
    console.log(name); // use variable declared in the parent function
  }
  displayName();
}
init();

Function.prototype.bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value.

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// Expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// Expected output: 42

document.write()

document.write() writes a string of text to a document stream opened by document.open(). When document.write() is executed after the page has loaded, it will call document.open which clears the whole document (<head> and <body> removed!) and replaces the contents with the given parameter value. Hence it is usually considered dangerous and prone to misuse.

arrow syntax

The main advantage of using an arrow function as a method inside a constructor is that the value of this gets set at the time of the function creation and can’t change after that.

const Person = function (firstName) {
  this.firstName = firstName;
  this.sayName1 = function () {
    console.log(this.firstName);
  };
  this.sayName2 = () => {
    console.log(this.firstName);
  };
};

const john = new Person('John');
const dave = new Person('Dave');

john.sayName1(); // John
john.sayName2(); // John

// The regular function can have its 'this' value changed, but the arrow function cannot
john.sayName1.call(dave); // Dave (because "this" is now the dave object)
john.sayName2.call(dave); // John

john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
john.sayName2.apply(dave); // John

john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
john.sayName2.bind(dave)(); // John

var sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined (because 'this' is now the window object)

var sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John

higer-order function

Takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result.

Map

const names = ['irish', 'daisy', 'anna'];
const transformNamesToUppercase = function (names) {
  return names.map((name) => name.toUpperCase());
};
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']