/ FRONTEND

클린코드 자바스크립트 7-3 함수 다루기(Callback Function, 순수 함수, Closure)

Clean Code JS 강좌는 여러 절로 구성되어 있습니다.

함수 다루기 😎

Callback Function👍

  • 함수의 실행권을 다른 함수에 유임한다.

someElement.addEventListener('click',function() {//..somecode})

DOM.prototype.addEventListener = function (eventType, cbFunc) {
  if (eventType === "click") {
    const clickEventObject = {
      target: {},
    };
    cbFunc(clickEventObject);
  }
};

function register() {
  const isConfirm = confirm("회원가입에 성공했습니다.");

  if (isConfirm) {
    redirectUserInfoPage();
  }
}

function login() {
  const isConfirm = confirm("로그인에 성공했습니다.");

  if (isConfirm) {
    redirectIndexPage();
  }
}

// 리팩토링

function confirmModal(message, cbFunc) {
  const isConfirm = confirm(message);

  if (isConfirm && cbFunc) {
    cbFunc();
  }
}

function register() {
  confirmModal("회원가입에 성공했습니다.", redirectUserInfoPage);
}

function login() {
  confirmModal("로그인에 성공했습니다.", redirectIndexPage);
}

순수 함수👍

let num1 = 10;
let num2 = 20;
function impureSum1() {
  return num1 + num2;
}

function impureSum2() {
  return num1 + newNum;
}

impureSum1(); // 30

num1 = 30;
impureSum1(); // 50

// 함수는 동일한 인자를 받고 동일한 출력을 해야한다.
// 외부 조작으로 인해 고유한 일관성이나 값, 매개변수를 받고 있지 않음
// 함수 사용시, 예측이 안되는 것 > 비순수한 함수
impureSum1(20); // 50
impureSum1(30); // 60

num1 = 100;

impureSum1(20); // 120
impureSum1(30); // 130

function pureSum(num1, num2) {
  return num1 + num2;
}

pureSum(10, 20); // 30
pureSum(30, 20); // 50

function changeValue(num) {
  num++;
  return num;
}

changeValue(1); //2
changeValue(4); //5

const obj = { one: 1 };
function changeObj(targetObj) {
  targetObj.one = 100;

  return targetObj;
}

chagneObj(obj); // { one : 100 }
obj; // { one : 100 }

// 객체는 일반 primitive type 값과 다르게 작동한다.
// 객체 및 배열 => 새롭게 만들어서 반환

const obj2 = { one: 1 };
function changeObj2(targetObj) {
  return { ...targetObj, one: 100 };
}

chagneObj(obj2); // { one : 100 }
obj2; // { one : 1 }

Closure👍

function add(num1) {
  return function sum(num2) {
    return num1 + num2;
  };
}

const addOne = add(1); // sum(1,num2)
const addTwo = add(2); // sum(2,num2)

function sum1(num1, num2) {
  return num1 + num2;
}

function mul1(num1, num2) {
  return num1 * num2;
}

const addThree = add(5)(2); // 값을 캡쳐하고 있는 상태
const sumAdd = addThree(sum1); // 7
const sumAdd = addThree(mul1); // 10

function log(value) {
  return function (fn) {
    fn(value);
  };
}

const logFoo = log("foo");

logFoo((v) => console.log(v));
logFoo((v) => console.info(v));
logFoo((v) => console.error(v));
logFoo((v) => console.warn(v));

const arr = [1, 2, 3, "A", "B", "C"];

const isNumber = (value) => {
  typeof value === "number";
};
const isString = (value) => {
  typeof value === "string";
};

arr.filteR(isNumber);

// 함수 사용

function isTypeOf(type, value) {
  return typeof value === type;
}

const isNumber1 = (value) => {
  isTypeOf("number", value);
};
const isString1 = (value) => {
  isTypeOf("string", value);
};

// Closure 사용

function isTypeOf2(type) {
  return function (value) {
    return typeof value === type;
  };
}

const isNumber2 = isTypeOf2("number");

const isString2 = isTypeOf2("string");

arr.filter(isNumber2); // [1,2,3]
arr.filter(isString2); // ['A','B','C']

function fetcher(endpoint) {
  return function (url, options) {
    return fetch(endpoint + url, options)
      .then((res) => {
        if (res.ok) {
          return res.json();
        } else {
          throw new Error(res.error);
        }
      })
      .catch((err) => console.error(err));
  };
}

const naverApi = fetcher("http://naver.com/");
const daumApi = fetcher("http://daum.net/");

naverApi("/webtoon").then((res) => res);
daumApi("/webtoon").then((res) => res);

someElement.addEventListener("click", debounce(handleClick, 500));