Named and Optional Arguments in JavaScript(자바스크립트로 지정 파라미터 설정하기)

https://medium.com/dailyjs/named-and-optional-arguments-in-javascript-using-es6-destructuring-292a683d5b4e

Named and Optional Arguments in JavaScript

Parse your arguments more cleanly using ES6 destructuring

Jim Rottinger in DailyJS

Oct 17, 2016 · 4 min read

An example of using destructuring in a function signature

Destructuring is perhaps the biggest syntactical change that came to JavaScript in the ES6 specification. While the new syntax may seem weird to many long-time JavaScript programmers, once you are able to wrap your head around it, using it can be very powerful.

If you are not yet familiar with destructuring, it is the ability to map an object literal or array literal to multiple assignment statements at the same time. For example:

Destructuring can be used with array syntax to assign each value in the array to the variable name in the corresponding position of the left-hand side array.

//Destructuring using an array
let [a,b,c] = [1,2,3];
console.log(a,b,c) // 1, 2, 3

More commonly, however, it can be used with object literals to pull out the properties of the object you want to use as variables.

//Destructuring using an object literal. 
//Must be the same property name
let {x,y,z} = {x: 10, y: 20, z: 30};
console.log(x,y,z); //10, 20, 30

Note — In the above object literal example, the property names must be the same. Position does not matter here unlike the array example.

If you want to rename something during destructuring, you can use the keyName:newKeyName syntax on the left hand side of your destructuring.

//If you want to rename your properties...
let {x:newX,y:newY,z:newZ} = {x: 10, y: 20, z: 30};
console.log(newX,newY,newZ); //10, 20, 30

At first, this may just seem like some syntactic sugar on assignment statements, but what makes it much more than that is the ability to assign default values to the variables at the time of destructuring.

let {x = 5, y = 8, z = 13} = {x: 10, y: 20};
console.log(x,y,z); //10, 20, 13

This is pretty significant. Say that the right-hand side of the assignment expression is not an object literal but a call to function in the other part of your application. One day, a developer comes along and implements a short-circuiting return statement in that other function and now your call isn’t getting the expected response. Being able to set up defaults at the time of the assignment makes safeguarding your code much easier.

Destructuring Function Parameters

When you pass an argument to a function, before that function begins executing, it assigns the argument you passed in to the corresponding parameter in its function signature. Since it is an assignment statement, that means we can use destructuring to do assign parameters values in a function!

//destructuring to assign parameters
let myFunc = function({x,y,z}) {
    console.log(x,y,z);
};
myFunc({x:10,y:20,z:30}); //10 20 30

Just as was shown before, we can also rename our keys during destructuring.

//you can also rename them as before
myFunc = function({x:newX,y:newY,z:newZ}) {
    console.log(newX,newY,newZ);
};
myFunc({x:10,y:20,z:30}); //10 20 30

Lastly, we can assign default values to both the individual keys in our destructuring statement and the entire block itself.

//setting defaults on the individual values and the whole object works too
myFunc = function({x = 5,y = 8,z = 13} = {x:1,y:2,z:3}) {
    console.log(x,y,z);
};
myFunc(); //1 2 3  (hits the object literal default)
myFunc({}); //5 8 13   (hits the value defaults)

While this seems a bit tedious to type out, it prevents us from having to check for the existence of every single argument we pass in.

Named and Optional Arguments

If you recall the first example of assigning default values during destructuring and combine that with what we learned in the last section, you might know where I’m going with this. If you can destructure function parameters, and you can assign default values during destructuring, AND the object literal names have to match during the destructuring process, this means that you can have named and optional parameters in your function signature! (so long as you use destructuring). Here is an example:

let myFunc = function({x = 5,y = 8,z = 13} = {}) {
    console.log(x,y,z);
};
myFunc({y:15,x:10,a:1}); //10 15 13

Conclusion

Hopefully the title of this article was not too misleading. While we do not yet have true named and optional arguments in Javascript in the same way C# does, I have just demonstrated a way to get functionally equivalent behavior using ES6 destructuring. While I do not foresee this pattern replacing positional arguments, it is very nice for situations such as receiving an object in a callback to a promise when making a network call to the server. Instead of hoping the network call returns exactly what you are expecting it to, you can use the pattern described in this post to explicitly define what you are expecting to receive and set up defaults for those values.

Let me know what you think in the comments below!