JCS - 매개변수와 return 문을 정리하라

본 글은 자바스크립트 코딩의 기술을 보고 필요한 부분만 정리되어있으며 제 생각이 적혀있어 정확하지 않을 수도 있습니다.(피드백 주세요:-)) 초기 20년 6월 3일에 작성되었으며 블로그를 이전하면서 제 생각을 추가하여 재작성하고 있습니다.

매개변수와 return 문을 정리하라

<Quiz>
  1. 나머지 인수를 사용하는 이유!
</Quiz>

매개변수 기본값을 생성하라

const round = roundTo || 2 은 올바른 방법이 아니다.

왜냐하면 만약 roundTo가 0일 경우 false로 평가되기 때문이다.

그래서 매개변수 기본값을 사용하자.

function fn(value = 10) {
  return value;
}

해체 할당으로 객체 속성에 접근하라

위 방식으로는 매개변수 순서가 정해져있어서 불편함이 있다.

또한

함수 매개변수로 값을 줄 때, 중간에 값을 줄 필요가 없는 경우가 있는데 그럴 때, 쓸데없이 undefined를 넣어서 방어를 해야된다는 단점이 있었음

그래서 해체 할당으로 함수 인자로 넘겨주기

const landscape = {
  location: [32, -103],
};

const {
  location: [lat, long],
} = landscape;

console.log(lat, long);

키-값 할당을 단순화하라

펼침연산자도 사용하고 있다.

determiceCityAndState함수가 반환값을 제한하여 필요한 부분만 가져다가 사용할 수 있다.

그리고 ...details 처럼 나머지 인자에 대해서는 그대로 반환할 수 있다는 편리함이 있다.

function setRegion({ location, ...details }) {
  const { city, state } = determiceCityAndState(location);
  return {
    city,
    state: state.abbreviation,
    ...details,
  }
}

나머지 매개변수로 여러 개의 인수를 변수로 전달하라

예전에는 여러 개의 인수를 함수한테 전달할 때,

arguments객체를 이용해서 문제를 해결했다.

function fn() {
  return arguments;
}

그런데 arguments는 일단 배열이 아닌 유사 배열이라서 배열 메서드를 사용하지 못한다. 그래서 변환이 필요함!

그래서 나머지 매개변수를 이용하자.

파라미터로 전개 연산자를 쓰면, 배열로 담기게 된다.

아니면 배열을 펼쳐 넣어 함수를 호출 할 수도 있음

중요한 것은 펼쳐진데는데 있다. 파라미터 값으로 배열이 들어오던 인수들이 들어오던 간에 전개 연산자를 통해 들어오면 배열로 만들어 준다.

function fn(...args) {
  return args;
}

fn(10,20,30,40); // [10,20,30,40]

나머지 인수를 사용하는 이유

  1. 인수를 배열로 다루는 것을 다른 개발자들에게 알려야 하는 경우
  2. 나머지 매개변수는 코드 디버깅에 좋은 방법
  3. 예로 나머지 매개변수를 이용해서 추가 매개변수를 가져오는 것으로 의심되는 라이브러리 함수를 해석하는 데 도움을 얻을 수 있고, 길게 나열된 인수를 확인할 수도 있음
  4. 나머지 인수는 함수 간에 속성을 전달하면서 해당 속성을 조작할 필요가 없을 때 사용하면 좋음

@kwonmory
성장을 위해 노력하고 있는 모리입니다.

깃허브