/ FRONTEND

클린코드 자바스크립트 7-2 함수 다루기(default value, Rest Parameters, void & return, 화살표 함수)

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

함수 다루기 😎

default value👍

function createCarousel(options) {
  var options = options || {};
  var margin = options.margin || 0;
  var center = options.center || false;
  var navElement = options.navElement || "div";

  return {
    margin,
    center,
    navElement,
  };
}

// 객체 구조 분해 이용
function createCarousel2({
  margin = 0,
  center = false,
  navElement = "div",
} = {}) {
  return {
    margin,
    center,
    navElement,
  };
}
createCarousel(); // default value
createCarousel2(); // default value
  • default parameter 적용
const required = (argName) => {
  throw new Error("required is " + argName);
};
function createCarousel({
  items = required("items"),
  margin = 0,
  center = false,
  navElement = "div",
} = {}) {
  return {
    margin,
    center,
    navElement,
  };
}

console.log(createCarousel({ center: true, navElement: "span" })); // "required is items"

Rest Parameters👍

  1. 나머지 매개변수는 가장 마지막에 들어가야 한다.
  2. 인자가 가변적으로 들어올 때 유용하다.
  3. 유사배열객체가 아닌 배열로 사용 가능하다.
function sumTotal() {
  typeof arguments; //object
  Array.isArray(arguments); // false
  return Array.from(args).reduce((acc, curr) => acc + curr);
}

sumTotal(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

// Rest Parameter로 들어온 것은 배열로 사용 가능
function sumTotal2(initialValue, bonusValue, ...args) {
  Array.isArray(args); // true

  console.log(initialValue); // 100
  console.log(bonusValue); // 1000
  return args.reduce((acc, curr) => acc + curr);
}

sumTotal2(100, 1000, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

void & return👍

  • void는 undefined를 return 한다.
  • return을 쓰지 않아도 되는데 굳이 사용하는 것을 방지하자.
function handleClick() {
  return setState(false);
}

function showAlert(message) {
  return alert(message);
}

// 개선
function handleClick2() {
  setState(false);
}

function showAlert2(message) {
  alert(message);
}

function test(sum1, sum2) {
  const result = sum1 + sum2;
}

console.log(test(1, 2)); // undefined

function testVoidFunc() {
  return test(1, 2);
}

console.log(testVoidFunc()); // undefined
  • return이 있는 함수 => get…, is…
function isAdult(age) {
  return age > 19;
}

function getUserName(name) {
  return "유저 " + name;
}

const isFlag = isAdult(10);
console.log(isFlag); // false

화살표 함수(Arrow Function)👍

  1. 렉시컬 스코프를 바라보게 된다.
  2. 객체를 바라보지 않고 상위 문맥을 따르는 경우가 있다.
  3. this 사용시 화살표 함수를 주의해야한다.
const user = {
  name: "Poco",
  getName: () => {
    return this.name;
  },
};

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

const user2 = {
  name: "Poco",
  getName() {
    return this.name;
  },
};

console.log(user2.getName()); // Poco

const user = {
  name: "Poco",
  getName: () => {
    return this.name;
  },
  newFriends: () => {
    // call, apply, bind 사용X
    const newFriendList = Array.from(arguments);
    return this.name + newFriendList;
  },
};

const user2 = {
  name: "Poco",
  getName: () => {
    return this.name;
  },
  newFriends: (...rest) => {
    return this.name + rest;
  },
};

const Person = (name, city) => {
  this.name = name;
  this.city = city;
};

const person = new Person("poco", "korea"); // Person is not a constructor

class Parent {
  parentMethod() {
    console.log("parentMethod");
  }

  parentMethodArrow = () => {
    console.log("parentMethodArrow");
  };

  overrideMethod = () => {
    return "parent";
  };
}

class Chiled extends Parent {
  chileMethod() {
    super.parentMethodArrow();
  }
  overrideMethod() {
    return "Child";
  }
}

new Child().childMethod(); // Error 발생, 생성자 함수 내부에서 초기화가 되는 현상 발생

new Child().overrideMethod(); // 'Parent' 부모 메서드 호출

function* gen() {
  yield () => ?? //문법적으로 지원 X
}

function* gen() {
  yield function hello() {
    //... some Code
  }
}

주의할 점🌼

  1. this 동작 방식
  2. Class 입장에서의 Override, 부모 메서드 응용 단계
  3. new 산자 조합 X
  4. arguments, call, apply, bind X
  5. React ,Vue 등 라이브러리말고 Vanilla JS 사용시 주의 필요!