자바스크립트 코딩의 기술_매개변수와 return 문을 정리하라_1

(본 포스팅은 길벗의 '자바스크립트-코딩의 기술' 책을 공부하면서 작성되었습니다_내돈내산)

 

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

• 초기 매개변수를 정한 후, 코드가 늘어나고 예외적인 경우가 늘어나면 처음 지정했던 매개변수로 문제를 다 처리할 수 없는 상황이 발생한다. 
• 이런경우 매개변수를 처리하는데 다양한 기법이 있는데, 가장 쉬운 방법은 매개변수 기본값을 사용하는 방법이다.
• 자바스크립트에서는 함수에 모든 매개변수를 전달할 필요가 없다. 매개변수를 누락하게 되면 값은 undefined가 되어 함수에서 작동하게 된다.

// 매개변수값의 전달여부에 따라 값이 바뀌도록 코딩한 경우
function convertWeight(weight, ounces, roundTo) {
  const oz = ounces / 16 || 0; // ounces 값이 있냐없냐에따라 값이 두가지로 나누어짐
  const total = weight + oz;
  const conversion = total / 2.2;
// 반올림자릿수를 지정하기 위함. 삼항연산자를 쓰지 않은 이유는 0이 false로 처리되는 오류를 방지하기 위함.
  const round = roundTo === undefined ? 2 : roundTo; 

  return roundToDecimalPlace(conversion, round);
}

// 매개변수 기본값을 지정해준 경우
// 본 코드의 경우 개발자에게 각 변수의 자료형까지 명시적으로 알려줄 수 있음.
// 매개변수에 undefined를 넣으면 저절로 지정된 변수를 사용하도록 함.
// 하지만 이런경우 undefined가 아닌 null을 보내는 경우 오류를 발생시킬 수 있으니 주의를 기울여야한다.
function convertWeight(weight, ounces = 0, roundTo = 2) {
  const total = weight + (ounces / 16);
  const conversion = total / 2.2;

  return roundToDecimalPlace(conversion, roundTo);
}

---

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

• 매개변수는 항상 순서를 지켜야 한다. 두 번째 매개변수는 중요하지 않으면서 세번째 매개변수를 입력하고 싶은 경우에도 반드시 두 번째 매개변수에 값을 입력해야 한다.
• 함수에 인수가 여러개 필요한경우, 또는 함수 요구사항이 변경될 것을 미리 알고 있는 경우 자바스크립트에서는 추가적인 인수를 객체에 담아 함수의 마지막 매개변수로 전달하게 된다.
• 엄청많은 정보를 가지고 있는 객체를 함수의 매개변수로 전달하게 되는 경우, 필요한 정보를 꺼내기 위해 점표기법을 사용하거나 객체를 조작하는 행위가 있을 수 있다. 하지만 이런경우 상당히 복잡하고 번거로운 작업이 이루어져야함을 알 수 있다.

function displayPhoto(photo) {
  const title = photo.title;
  const photographer = photo.photographer || 'Anonymous';
  const location = photo.location;
  const url = photo.src;

  const copy = { ...photo };
  delete copy.title;
  delete copy.photographer;
  delete copy.location;
  delete copy.src;

  const additional = Object.keys(copy).map(key => `${key}: ${copy[key]}`);

  return (`
    <img alt="Photo of ${title} by ${photographer}" src="${url}" />
    <div>${title}</div>
    <div>${photographer}</div>
    <div>Latitude: ${location[0]} </div>
    <div>Longitude: ${location[1]} </div>
    <div>${additional.join(' <br/> ')}</div>
  `);
}

// 이런 경우 코드의 절반이상을 객체에서 정보를 가져오는데 할애하고 있는 것을 알 수 있다.

• 위와같은 경우 자바스크립트에서는 해체할당이라는 과정을 통해 객체에 있는 정보를 곧바로 변수에 할당할 수 있게 된다. 해체할당의 경우
  - 객체에 있는 키와 같은 이름의 변수를 생성하고,
  - 객체에 있는 키에 연결된 값을
  - 생성된 변수의 값으로 할당함으로 이루어진다.

const landscape = {
 photographer: 'Nathan',
}

const { photographer } = landscape
// photographer변수에 landscape.photographer 의 값이 할당됨.
photographer // 'Nathan'

• 해체할당의 경우
  - const 의 사용을 추천하며.
  - 값을 할당하는 변수의 이름은 객체에 있는 키값과 반드시 일치해야 함.
  - 변수가 객체를 이용해서 선언되었음.
  (중괄호가 의미하는 것은 변수에 할당되는 값이 객체에 있다는 것을 나타내게 됨.)
  - 만일 객체에 키가 존재하지 않는 경우 값이 undefined가 되지만, 해체할당 하면서 동시에 기본값을 설정할수있음.
  - 키의 이름을 모르고, 객체에 남아있는 정보를 가져오고 싶은 경우 '...additional' 을 사용해 가져올 수 있다.
• g해체할당의 큰 장점은 해체할당을 함수의 매개변수에 적용할 수 있다는 점이다. 해체할당을 매개변수에 사용하면, 변수를 선언하지 않아도 마치 정보를 함수 몸체에서 할당한 것처럼 작동한다. 참고로 해체할당은 let으로 변수를 할당하기 때문에 해당 변수의 재할당 또한 가능하다.

const landscape = {};
const { photographer = 'Anonymous', title } = landscape

console.log(photographer) // 'Anonymous'
console.log(title) // undefined
-------------------------------------------------------------------------------------
const landsacpe = {
   photographer : 'Nathan',
   equipment : 'Canon',
   format : 'digiral'
};

const {
   photographer,
   ...additional
} = landscape;

additional;
// { equipment: 'Canon', format: 'digital' } // additional 이외의 다른 키값의 정보는 삭제한 것과 같은 결과
-------------------------------------------------------------------------------------
const landscape = {
   src : '/landscape-nm.jpg'
};
// 객체의 src의 내용을 url 이라는 변수에 할당하는 경우
const { src: url } = landscape;

src;
//ReferenceError: scr is not defined
url;
// 'landscape-nm.jpg' 
-------------------------------------------------------------------------------------
// 배열에 해체할당을 진행하는 경우
// 객체를 꺼내고 배열을 해체할당하는 경우
const landscpae = {
   location : [32.712222, -103.1405556],
};
const { location } = landscape;
const [latitude, longitude] = location

// 객체를 꺼내지않고 바로 해체할당하는 경우
const { location: [latitude,longitude] } = landscape;

latitude // 32.712222
longitude // -103.140555

function displayPhoto({
  title,
  photographer = 'Anonymous',
  location: [latitude, longitude],
  src: url,
  ...other
}) {
  const additional = Object.keys(other).map(key => `${key}: ${other[key]}`);
  return (`
    <img alt="Photo of ${title} by ${photographer}" src="${url}" />
    <div>${title}</div>
    <div>${photographer}</div>
    <div>Latitude: ${latitude} </div>
    <div>Longitude: ${longitude} </div>
    <div>${additional.join(' <br/> ')}</div>
  `);
}

• 최종적으로 위와같은 방법을 통해 변수에 해체할당을 넣어줌으로써, 객체를 매개변수로 전달해 조금더 원활하게 사용이 가능하다.