#default parameters

Default values can be used now in all modern JS environments like so:

function greet(name = '') { return 'Hello ' + name; } console.log(greet('Phil')); // Hello Phil console.log(greet()); // Hello

Though what is not often known is that these do not have to be primitive values like strings, they can be objects to. So default property settings are also useful for large objects. Which is useful for complex functions which take objects as configuration:

function createMessage(config = { type: 'default', name: 'Person', date: new Date(), }) { let message = ''; if (config.type === 'default') { message = `Hello, ${config.name}. You have received a package on ${config.date}.`; } else if (config.type === 'warning') { message = `${config.name}, a package has been in storage since ${config.date}, `; message += 'and will be sent back to sender in 1 day.' } return message; } console.log(createMessage()); // Hello, Person. You have received a package on <NOW>. console.log(createMessage({ type: 'warning', name: 'Phil', date: new Date('2019-01-27T08:00:00'), })); // Phil, a package has been in storage since Sun Jan 27 2019 08:00:00 GMT-0500 (EST), // and will be returned in 1 day.

Awhile ago I noticed an interesting feature that would save a lot of time in JavaScript; The ability to set function defaults in a function's parameter definition. At the time the only support was Firefox, but now this has grown to every modern browser (including major mobile ones) except for IE (but has MS Edge support). Here is an example without default parameters:

function formatName(firstName, lastName) { firstName = firstName !== undefined ? firstName : '(none)'; lastName = lastName !== undefined ? lastName : '(none)'; return '(First:Last) ' + firstName + ':' + lastName; } console.log(formatName('Jacob')); // (First:Last) Jacob:(none) console.log(formatName('Super', 'Jacob')); // (First:Last) Super:Jacob console.log(formatName()); // (First:Last) (none):(none)

And here is how default parameters can improve that code:

function formatName2(firstName = '(none)', lastName = '(none)') { return '(First:Last) ' + firstName + ':' + lastName; }

Basically any time an argument is not specified or is undefined, the default is used. Other falsey values like '' do not result in the default being used.

Default parameters can also build on each other if necessary. This is for more specialized cases. I think it is most useful when the second parameter should equal the first by default. Here is how it could simplify a basic isEqual check:

function isEqual(value1, value2 = value1) { return value1 === value2; } console.log(isEqual(2)); // true console.log(isEqual(2, 2)); // true console.log(isEqual(2, 3)); // false

There are a few extra features and some edge cases which can be explained here. Finally, the full compatability list is here.

이것은 제가 공부하면서 번역을 한 내용입니다. 번역이 정말 엉망이지만 저만 알아볼 수 있으면 된다고 생각해서 ^^ 혹시 원본을 보시 오역이나 더 좋은 번역은 알려주시면 변경하겠습니다. 또한 개인 적인것이기 때문에공유는 안 하셨으면 합니다. 혹시 또 번역을 보시고 문제를 제시 하시면 바로 삭제 하도록 하겠습니다.원본 : https://www.sitepoint.com/es6-default-parameters/

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]

A Real World Example

기본 함수를 만들고, 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={})와 기본 속성을 나중에 설정하는 것보다. 몇가지 추가적인 시간을 보자면 그것을 사용한다면 하지만 그것은 당신의 작업의 흐름을 향상 시킬것이다.

물론 우리는 더 큰 구성을 주장할수 있고 오버해드를 만들수 있지만 그것은 단지 함수 본문의 기본 적인 조절을 하는 것 입니다.

ES6 Property Shorthands

메소드가 변수 만큼 큰 구성 객체에 수용 한다면, 코드는 상당히 크게 될 수 있다. 그것은 몇개의 변수들을 준비하는 것이 일반적이다. 그리고 오브젝트를 추가한다. 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 };

Shorten Your API

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 } };

Conclusion

Default parameters와 property shorthands는 당신의 메소드를 더 잘 구성하는 좋은 방법이고, 몇개의 경우는 짧은 것에서도. 전반적으로, default function parameters는 산만하지 않지 않게 메소드를 목표에 맞도록 기본적으로 준비하는 것이다. 만약 진술에

아마도 shorthands는 사실 컽치레 기능에 하나이지만 모든 변수들을 쓰는데 적어도 생산적인것을 찾을 수 있다. 객체의 구성, 그리고 함수의 키워드 이다.

벌써 default parameters 와 property shorthans를 사용하나?

Some reading notes for Stroustrup’s “The C++ Programming Language, 4th Ed.”

I recently purchased Stroustrup’s C++11 book [1], after borrowing it a number of times from the Markham public library (it’s very popular, and only offered for short term loan) . Here are some notes of some bits and pieces that were new to me for this round of reading.

nothrow new

In DB2 we used to have to compile with -fcheck-new or similar, because we had lots of code that predated new…

Recursion

We will start from the last recitation’s topic, Recursion. So as a review, can we define what is Recursion?

Recursion is a divide and conquer techniques, in which we first identify the base case, where we can find the answer immediately, and then we break the big problem into problem of smaller size of the same type.

The biggest question with recursion is when to use recursion and when…