[javascript] 함수

KoEunseo·2023년 7월 1일

JavaScript cleancode function

javascript

목록 보기

28/32

함수, 메서드, 생성자

함수는 1급 객체이다.
변수, 데이터에 담길 수 있으며
매개변수로 전달이 가능하고(콜백)
함수가 함수를 반환할 수도 있다(고차함수)
메서드는 객체에 의존성이 있는 함수이다.
OOP행동을 의미한다(?) <- 찾아볼것
생성자는 class 문법이 대체하고있다.

Argument VS Parameter

argument는 실제로 사용되는 인자, 함수를 사용하는 시점에서의 value를 말한다.
parameter는 함수 키워드, 함수를 정의하는 시점에서의 value를 정의한 것을 말한다.

function axios(url) {} //여기서 url은 parameter

axios('www.naver.com') //여기서 함수의 인자로 들어간 문자열이 argument

복잡한 인자 관리

구조분해할당을 사용해 객체로 인자를 주고 받는다.
꼭 받아야 할 인자를 명시적으로 만들 수 있다.

function createCar({name, type, color}) {
  if(!name) {
    throw new Error('name is a required');
  }
}

required utill

const required = (argName) => {
  throw new Error('required is' + argName);
}
function createCar({name, type, color}) {
  name = required('name');
}

Default value

인자를 넘기지 않아도 기본값을 설정해 사용할 수 있게 만든다.

function createCarousel({
  items = required('items'),
  margin = 0,
  center = false,
  navElement = 'div',
} = {}) { // ={} : 이 부분은 options = options || {} 과 같다. 디폴트로 빈 객체 생성
  return {
    margin, center, navElement
  };
}

...Rest

arguments를 활용하다보면 문제가 생기는데, 추가적으로 인자를 받을 수 없다는 것이다.
이때 rest 연산자를 활용하면 다른 매개변수와 조합할 수 있다.
매개변수의 변동이 많을 경우 유용하게 쓸 수 있다.

function() {
  return Array.from(arguments).reduce((a,b) => a + b)
}

=> Refactor
function(init, bonus, ...args) {
  return args.reduce((a, b) => a + b, init)
}

void VS return

void: 리턴값이 없는 함수를 의미한다. undefined를 리턴하게 된다.
void함수의 경우 return 키워드를 적지 말자.
api doc을 볼 때 리턴값이 무엇인지 확인하는 습관을 들이자.
is어쩌고, get어쩌고와같은 네이밍만 봐도 리턴값이 있는지 없는지 느낌이 온다.

Arrow function

화살표함수와 일반 함수의 차이점에 대해 숙지하자.
- this: 화살표함수의 경우에는 this가 상위 요소의 this를 참조한다.
  생성자 함수는 생성된 인스턴스를 참조하기때문에 생성자함수에서도 사용이 불가능하다.
arguments: 화살표함수에서 사용 불가능하다.(대신 rest를 사용하자)
call, apply, bind로 this를 설정할 수 없다.

Callback function

콜백함수는 비동기함수에서 작업을 순차적으로 하기 위해 사용한다.
콜백함수를 인자로 받은 함수에서 실행권한을 위임받게 된다.

콜백함수는 비동기함수에서만 사용하는 것은 아니다.
실행권한을 위임하기 위해서 사용되기도 한다.
이 특성을 이용해서 공통되는 부분을 추상화해 리팩토링 할 수 있다.

function register(){
  const isConfirm = confirm('회원가입');
  if(isConfirm){
    redirectUserInfoPage();
  }
}
function login(){
  const isConfirm = conFirm('로그인');
  if(isConfirm){
    redirectIndexPage();
  }
}
=> Refactor
function confirmModal(messaage, cbFunc){ //추상화: 메시지와 콜백함수를 받는다.
  const  isConfirm = confirm(message);
  if(isConfirm && cbFunc){
    cbFunc();
  }
}

function register(){
  confirmModal('회원가입에 성공했습니다.',redirectUserInfoPage);
}
function login(){
  confirmModal('로그인에 성공했습니다.',redirectIndexPage);

순수함수

리덕스: 예측가능, 디버깅이 쉽다.
리듀서: 순수함수를 사용해야한다. (side effect 방지)
객체를 사용할 때에는 항상 새로운 객체를 반환하도록 해야한다.
동일한 input에 동일한 output이 되어야 한다.

클로저

클로저는 정말 이해하기 힘들다.
계속 이해 못하다가 자바스크립트 서적을 하나 읽으면서(코어자바스크립트) 그제야 이해는 됐다.
물론... 써먹는 건 다른 이야기.

내가 이해한 클로저는
상위 함수의 변수가 내부 함수에서 참조되었을때, 상위 함수의 실행이 종료된 상태가 되어도 내부 함수에서 해당 변수를 참조할 수 있게 되는 현상이다.
참조값이 0인 변수는 자바스크립트가 일종의 쓰레기통 비우기를 하지만, 참조값이 1이 되니 비워지지 않는 것이다.

클로저를 사용한 함수는 괄호가 2개!
클로저는 bind 메서드와 비슷한 역할을 한다.

여러 예시들이 있었지만 가장 와닿는 예시만 정리해보겠다.

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

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

const isNumber = isTypeOf('number');
const isString = isTypeOf('string');

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

function fetcher(endpoint) {
  return function(url, options) {
    return fetch(endpoint + url, options)
      .then((res) => {})
  };
}

const naverApi = fetcher('https://naver.com');
const daumApi = fetcher('https://daum.net');