Clean Code with ES6 Default Parameters & Property Shorthands
이것은 제가 공부하면서 번역을 한 내용입니다. 번역이 정말 엉망이지만 저만 알아볼 수 있으면 된다고 생각해서 ^^ 혹시 원본을 보시 오역이나 더 좋은 번역은 알려주시면 변경하겠습니다. 또한 개인 적인것이기 때문에공유는 안 하셨으면 합니다. 혹시 또 번역을 보시고 문제를 제시 하시면 바로 삭제 하도록 하겠습니다.원본 : https://www.sitepoint.com/es6-default-parameters/
우리의 지식을 빠르게 신선하게 하고, 다시 구문을 살펴보자. 기본 파라미터에 기본 값으로 함수를 초기화 하는 것을 우리는 허락한다. default는 arguments가 omitted 이거나 undefined일때 사용되어 진다. 이것의 의미에 null은 유효한 값이다. 기본 파라미터는 숫자에서 다른 함수까지 할 수 있다.
// Basic syntax function multiply (a, b = 2) { return a * b; } multiply(5); // 10 // Default parameters are also available to later default parameters function foo (num = 1, multi = multiply(num)) { return [num, multi]; } foo(); // [1, 2] foo(6); // [6, 12]
기본 함수를 만들고, default parameters가 개발의 속도와 코드의 더 잘 구성 할수 있는 방법을 입증해 보자
우리의 예제 메소드는 createElement()를 불려진다. 몇가지 configuration arguments 가지고, HTML elements를 returns 한다. API는 이와 같이 본다.
// We want a <p> element, with some text content and two classes attached. // Returns <p class="very-special-text super-big">Such unique text</p> createElement('p', { content: 'Such unique text', classNames: ['very-special-text', 'super-big'] }); // To make this method even more useful, it should always return a default // element when any argument is left out or none are passed at all. createElement(); // <div class="module-text default">Very default</div>
이 구현은 많이 하지 않지만, 기본적은 범위에서 상당히 커질 수 있다.
// Without default parameters it looks quite bloated and unnecessary large. function createElement (tag, config) { tag = tag || 'div'; config = config || {}; const element = document.createElement(tag); const content = config.content || 'Very default'; const text = document.createTextNode(content); let classNames = config.classNames; if (classNames === undefined) { classNames = ['module-text', 'default']; } element.classList.add(...classNames); element.appendChild(text); return element; }
매개변수 tag 와 config에 기본값을 설정하고, 그것들이 통과되지 않는 경우
만약에 classNames가 정의되어지고, 기본적인 배열이 지정되지 않은다는 것을 체크하면
마지작으로 만들어 지고 수정하는 엘리먼트를 우리가 그것을 리턴하기 전에
지금 이 함수를 보면, 깔끔하게 구현되었고, 쓰기도 빠르고, 목적이 무엇인지 더 명백하다.
// Default all the things function createElement (tag = 'div', { content = 'Very default', classNames = ['module-text', 'special'] } = {}) { const element = document.createElement(tag); const text = document.createTextNode(content); element.classList.add(...classNames); element.appendChild(text); return element; }
우리는 함수의 로직은 만지지 않았지만 함수의 내의 모든 기본 조절을 지웠다. 함수의 시그니처는 모든 기본을 포함한다.
나에게 더 나아거 이 파트를 설명하는것은 조용히 혼란스러울지도 모른다.
// What exactly happens here? function createElement ({ content = 'Very default', classNames = ['module-text', 'special'] } = {}) { // function body }
우리는 기본 오브젝트 매개변수를 선언할 뿐 만 아니라, 기본 오브젝트 속성들도 선언한다. 이것은 그것을 말들었다 더 명백히 기본 환경이 보는 것과 같이 제공하는 것을 기본 객체(config={})와 기본 속성을 나중에 설정하는 것보다. 몇가지 추가적인 시간을 보자면 그것을 사용한다면 하지만 그것은 당신의 작업의 흐름을 향상 시킬것이다.
물론 우리는 더 큰 구성을 주장할수 있고 오버해드를 만들수 있지만 그것은 단지 함수 본문의 기본 적인 조절을 하는 것 입니다.
메소드가 변수 만큼 큰 구성 객체에 수용 한다면, 코드는 상당히 크게 될 수 있다. 그것은 몇개의 변수들을 준비하는 것이 일반적이다. 그리고 오브젝트를 추가한다. Property shorthands는 syntactic sugar이다. 이 단계는 짧고 더 읽어어야 한다.
const a = 'foo', b = 42, c = function () {}; // Previously we would use these constants like this. const alphabet = { a: a, b: b, c: c }; // But with the new shorthand we can actually do this now, // which is equivalent to the above. const alphabet = { a, b, c };
Okay, 다른 뒤에, 더 일반적인 예제이다. 다음 함수는 몇가지 데이터를 가지고, 그것을 변화시키고 다른 메소드를 호출한다.
function updateSomething (data = {}) { const target = data.target; const veryLongProperty = data.veryLongProperty; let willChange = data.willChange; if (willChange === 'unwantedValue') { willChange = 'wayBetter'; } // Do more. useDataSomewhereElse({ target: target, property: veryLongProperty, willChange: willChange, // .. more }); }
종종 우리는 변수의 이름과 객체 속성의이름을 같게 한다. property shorthand는 이것을 이용하여, 합친다. 우리는 우리의 코드의 큰 것을 짧게 할수 있다.
function updateSomething (data = {}) { // Here we use destructuring to store the constants from the data object. const { target, veryLongProperty: property } = data; let { willChange } = data; if (willChange === 'unwantedValue') { willChange = 'wayBetter'; } // Do more. useDataSomewhereElse({ target, property, willChange }); }
결과적으로 자바스크립트의 새로운 기능중의 하나이다. 코드는 빠르게 도와주고 함수는 내용은 깔끔하게 된다.
// Instead of writing the function keyword everytime, const module = { foo: 42, bar: function (value) { // do something } }; // we can just omit it and have shorter declarations const module = { foo: 42, bar (value) { // do something } };
Default parameters와 property shorthands는 당신의 메소드를 더 잘 구성하는 좋은 방법이고, 몇개의 경우는 짧은 것에서도. 전반적으로, default function parameters는 산만하지 않지 않게 메소드를 목표에 맞도록 기본적으로 준비하는 것이다. 만약 진술에
아마도 shorthands는 사실 컽치레 기능에 하나이지만 모든 변수들을 쓰는데 적어도 생산적인것을 찾을 수 있다. 객체의 구성, 그리고 함수의 키워드 이다.
벌써 default parameters 와 property shorthans를 사용하나?
