default parameter

Default Parameter

함수를 호출 시, 매개변수의 개수만큼 인수를 전달해야하지만, 그렇지 않은 경우에도 에러가 발생하지는 않는다. 이는 자바스크립트 엔진이 매개변수의 개수와 인수의 개수를 체크하지 않기 때문이다.
인수가 전달되지 않은 매개변수의 값은 undefined이 들어갈 뿐이다.
하지만 아래와 같은 경우 문제가 될 수 있다. - 인수가 매개변수의 개수보다 하나 적고, 그 하나는 undefined가 될 것이기 때문에 결과는 NaN이 나오게 된다.

function plusFunc (x, y) {
	return x + y;
}
plusFunc(1); // NaN

위와 같은 오류를 방지하기 위해 함수 내에 인 체크 및 초기화를 해 인수가 전달되지 않은 경우 매개변수 값이 undefined인 경우, 기본값 (0)을 할당하는 방식으로 오류를 막을 수 있다.

function plusFunc (x, y) {
	x = x || 0;
  	y = y || 0;
  	return x + y;
}
plusFunc(1); // 1

이보다 더 개선된 방법이 나왔다.
ES6에 도입된 매개변수 기본값을 사용하여 함수 내에 수행했던 인수 체크 및 초기화를 간소화할 수 있다.

function plusFunc (x = 0, y = 0) {
  	return x + y;
}
plusFunc(1); // 1
plusFunc(1, 3); // 4

Default Parameter를 사용하면 주어진 값이 없거나 undefined가 전달될 경우, 매개변수를 기본값으로 초기화할 수 있다.

매개변수 기본값은 매개변수에 인수를 전달하지 않은 경우 & undefined를 전달한 경우에만 유효하다.

리액트 컴포넌트 함수에서 매개변수 기본값을 사용하면 리렌더가 될 때마다 새로운 매개변수(parameter)를 갖게 된다.

import { useRef } from "react";

export default function App({ initialVal = 0 }) {
  console.log(initialVal);
  const countRef = useRef(initialVal);

  const handle = () => {
    countRef.current++;
    console.log(`Clicked ${countRef.current} times`);
  };
  console.log("I rendered!");
  return <button onClick={handle}>Click me</button>;
}