Javascript : Function

function declaration

// function declaration

function hello() {
  console.log('hello');
}

hello(); // hello
console.log(hello); // [Function: hello]

console.log(typeof hello()); // undefined

function getNumber() {
  return 123;
}

console.log(typeof getNumber); // function
console.log(typeof getNumber()); // number


// function expression

const a = function () {
  console.log('A');
};

const b = function (c) {
  console.log(c);
  c();
};

// b(123); // 123
b(a); // [Function: a] A

hoisting

// Declaration
hello(); // hello => hoisting

function hello() {
  console.log('hello');
}

// Expression
hello1(); // error

const hello1 = function () {
  console.log('hello');
};

memory

// memory
function add(a, b = 1) {
  return a + b;
}
const sum = add;

console.log(sum(1, 2)); // 3
console.log(add(1, 2)); // 3
console.log(sum(7)); // 8

add(2, 2); // When inputting a value from outside, argument is displayed as an array.

// Rest Parameters
function sum(a, b, ...numbers) {
  console.log(a);
  console.log(b);
  console.log(numbers);
}
sum(1, 2, 3, 4, 5, 6, 7, 8);

// return => end function
function print(num) {
  if (num < 0) {
    return;
  }
  console.log(num);
}
print(12); // print
print(-12); // undefined

IIFE (Immediately-Invoked Function Expressions)

// IIFE (Immediately-Invoked Function Expressions)
(function run() {
  console.log('😍');
})();

const a = 7;

const double = () => {
  console.log(a * 2);
};

double();

(() => {
  console.log(a * 2); // 14
})();

(() => {})();
(function () {})();
(function () {})();
!(function () {})() + (function () {})();

((a, b) => {
  console.log(a);
  console.log(b);
})(window, document);

arrow function

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

const a = (x) => {};

const b = (x, y) => {};

const c = (x) => x * x;

const d = (x) => {
  console.log(x * x);
  return x * x;
};

const g = () => {
  return { a: 1 };
};
const h = () => {
  {
    a: 1;
  }
};

const i = () => {
  return [1, 2, 3];
};
const j = () => [1, 2, 3];

callback

// callback function

// The passed action is a callback function.
// Instead of calling the function right away and passing the returned value at the time of delivery,
// A reference (reference value) of the function pointing to the function is passed.
// So, the function is called later in the higher-order function at the moment it is needed.

const a = (callback) => {
  console.log('a');
  callback();
};

const b = () => {
  console.log('b');
};

a(b);
// a
// b

const sum = (a, b, c) => {
  setTimeout(() => {
    c(a + b);
  }, 1000);
};
sum(1, 2, (value) => {
  console.log(value);
});
// 3

const loadImage = (url, cd) => {
  const imgEl = document.createElement('img');
  imgEl.src = url;
  imgEl.addEventListener('load', () => {
    setTimeout(() => {
      cd(imgEl);
    }, 1000);
  });
};

const containerEl = document.querySelector('.container');
loadImage('url...', (imgEl) => {
  containerEl.innerHTML = '';
  cont

 

parameter pattern / argument

const user = {
  name: 'you',
  age: 85,
};

function getName({ name }) {
  return name;
}

console.log(getName(user)); // you

function getEmail({ email = 'no email.' }) {
  return email;
}

console.log(getEmail(user)); //no email

const fruits = ['apple', 'banana', 'cherry'];

function getSecondItem([a, b, c]) {
  return b;
}

console.log(getSecondItem(fruits)); // banana

function sum(...rest) {
  console.log(rest);
  console.log(arguments);
  return rest.reduce(function (acc, cur) {
    return acc + cur;
  }, 0);
}

console.log(sum(1, 2));
console.log(sum(1, 2, 3, 4));
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));

// arguments => Array-like => actually object data.

// [ 1, 2 ]
// [Arguments] { '0': 1, '1': 2 }
// 3

// [ 1, 2, 3, 4 ]
// [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }
// 10

// [
//   1, 2, 3, 4,  5,
//   6, 7, 8, 9, 10
// ]
// [Arguments] {
//   '0': 1,
//   '1': 2,
//   '2': 3,
//   '3': 4,
//   '4': 5,
//   '5': 6,
//   '6': 7,
//   '7': 8,
//   '8': 9,
//   '9': 10
// }
// 55

recursive

let i = 0;

const a = () => {
  console.log('a');
  i += 1;
  if (i < 4) {
    a();
  }
};
a();

// a
// a
// a
// a

const userA = { name: 'A', parent: null };
const userB = { name: 'B', parent: userA };
const userC = { name: 'C', parent: userB };
const userD = { name: 'D', parent: userC };

const getRootUser = (user) => {
  if (user.parent) {
    return getRootUser(user.parent);
  }
  return user;
};

console.log(getRootUser(userD)); // { name: 'A', parent: null }