Interview question: A programming question about destructuring assignment and parameter default values

In the front-end club QQ group , a friend asked such a question, saying that he encountered it in an interview recently, as shown below

 function fun( ? ) {
    return {a,b}
}
console.log(fun( )) // {a:1,b:2}
console.log(fun({a:3})) // {a:3,b:456}
console.log(fun({})) // {a:123,b:456}

Q, what should be filled in for the parameters of fun?

Tip: Take Advantage of Structure Assignments and Parameter Defaults

After some testing, the results are as follows:

 function fun({ a = 123, b = 456 } = { a: 1, b: 2 }) {
  return { a, b }
}

Problem solving ideas

First look at the first execution: console.log(fun( )) // {a:1,b:2}

fun() Do not pass parameters, execute directly, the result a is 1, b is 2. Description The default values are a : 1, b : 2.

can be drawn

 function fun(a = 1, b = 2) {
  return { a, b }
}

Look at the second execution: console.log(fun({a:3})) // {a:3,b:456}

fun({a: 3}) , the parameter is passed in an object, a in the object is 3, the result is a is 3, b is 456. It means that the default value of its parameter is an object, and the value in the object has default parameters a and b.

Combined with "execute 1", if no parameter is passed, the option of a = 1, b = 2 is used by default; if a parameter is passed in, the default parameter in the object is used. which is

 function fun({ a = XX, b = 456 } = { a: 1, b: 2 }) {
  return { a, b }
}

Finally look at the third execution: console.log(fun({})) // {a:123,b:456}

Obviously, we don't yet know what the default a in the object stands for. The third execution tells us it's 123

So in the end our answer is

 function fun({ a = 123, b = 456 } = { a: 1, b: 2 }) {
  return { a, b }
}

difficulty

While doing this question, I was confused by the assignments = and : . Take notes here

• : Assignment to object
• = is the default value

as the picture shows:

 const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
}
const { a, b } = obj // 解构赋值 a,b, a为1，b为2
const { a = 11, b = 21, e = 51 } = obj // 给解构赋值的 设置默认值，a为1，b为2，e为51，得默认值是当你对象中没有值时，赋予该变量的默认值

= Give variable default value

Then : where to use, when the value in the destructuring assignment is an object, the value in the set object is used ：

 const obj = {
  a: {
    aa: 11,
    bb: 22,
  },
  b: 2,
  c: 3,
  d: 4,
}
const { a, b } = obj // a={aa: 11, bb: 22} b=2
const { a = { aa: 111, bb: 222 }, b = 22, e = { aa: 111, bb: 222 } } = obj
// a={aa: 11, bb: 22},b = 22, e={aa: 111, bb: 222}

Here we should pay attention: when the destructed value is in the object, even if the default value is set, the value will prevail; if the destructed value is not in the object, it will appear in the result value in the form of the default value.

look back

 function fun( ? ) {
    return {a,b}
}
console.log(fun( )) // {a:1,b:2}
console.log(fun({a:3})) // {a:3,b:456}
console.log(fun({})) // {a:123,b:456}

Why does a = 123, b = 456 use an equals sign = instead of a colon : , because it is originally a "key" and can only be assigned a default value but not a key Rename

Summarize

When destructuring assignment, the colon : is the rename, and the equal sign = is the default value of the assignment

This article participated in the SegmentFault Sifu essay "How to "anti-kill" the interviewer?" , you are welcome to join.