매개변수에 구조분해 활용

일반적인 매개변수의 형태

매개변수는 함수에 들어가는 값입니다.

function f(a, b, c){
  return a + b + c;
};
f();//NaN
f("I ", "LOVE ", "JS");//I LOVE JS

위의 소스코드에서는 a,b,c가 매개변수에 해당됩니다. 일반적으로 함수를 호출할 때 매개변수가 정의할 때의 수와 다르면 그 매개변수의 값은 undefined의 값이 됩니다. 그래서 인수(매개변수)를 아무것도 넣지 않은 f()는 NaN이 되는 것입니다.

배열의 구조분해를 매개변수에 활용

우선 배열의 구조분해에 대한 기초가 필요하시면 아래 링크를 통해 공부하고 오시면 이해하기가 더 쉽습니다.

자바스크립트 배열의 구조분해

function f([one, two, three]){
  return one + two + three;
};
const arr = ["I ", "LOVE ", "JS "];
f();//에러가남
f(arr);//I LOVE JS

함수에 아무 매개변수도 전달하지 않았을 때 에러가 났습니다. 이런 상황의 경우 만약에 구조분해된 매개변수를 필수로 하고 싶다면 상관없지만 상황에 따라서 선택적으로 넣기를 원한다면 문제가 될 수 있습니다. 에러가 발생한 이유는 아무것도 전달하지 않으면 구조분해 할당연산자의 오른쪽에 undefined가 오기 때문에 에러가 나게 된 것입니다. 

function f([one="I ", two="love ", three="js"]=[]){
  return one + two + three;
};
f(); //I love js

매개변수를 보시면 기본값(빈배열)을 제공했기 때문에 이제 에러가 나지 않습니다. 그리고 각 NaN이라는 값을 원하지 않으면 매개변수 각각에 기본값들을 줄 수 있습니다. 

객체의 구조분해를 매개변수에 활용

앞으로 특히나 많이 볼 형태는 배열보다는 객체의 구조분해를 활용한 형태일 것입니다. 

자바스크립트 객체의 구조분해

다양한 곳에서 활용되니 위의 링크를 통해 기초를 복습해주세요.

function f({one, two, three}){
  return one + two + three;
};
const obj = {one: "I", two: " love ", three: "js"};
f(obj); // l love js
f(); // 에러

함수에 아무것도 전달하지 않았을 때 에러가 났습니다. 매개변수가 필수일 땐 상관없지만 선택적으로 전달하고 싶을 땐 배열에서 수정했던 것처럼 똑같이 하시면 됩니다.

function f({one="I", two=" LOVE", three=" JS"}={}){
  return one + two + three;
};
f(); // l love js

공감은 제작자에게 큰 힘이 됩니다.