(in javascript)
In this context:
const component = ({ name, value }) => <span></span>
Where the first argument of the arrow function is separated to its members. props => ({ name, value })
What is this called? I've seen some people doing this with babel but don't know what the proper term is.
Where the first argument of the arrow function is separated to its members.
props => ({ name, value })... What is this called?
It's called parameter destructuring (sometimes argument destructuring, it's the destructuring part that's important). What you pass the function is an object, but what the function receives are properties from the object. That is, they've been taken out of the structure (the object) and made into distinct things (hence, "destructuring"):
const adams = ({question, answer}) => {
console.log(question);
console.log(answer);
};
adams({question: "Life, the Unverse, and Everything!", answer: 42});JavaScript has destructuring in a few places, including function parameter lists as above. You can also do it with assignments:
const o = {question: "Life, the Unverse, and Everything!", answer: 42};
const {answer, question} = o;
console.log(question);
console.log(answer);There's a related feature in ES2018 and later (but it's been supported in JSX code for years via tranpsiling): The ability to get the "rest" of the properties as an object:
// ES2018+
const adams = ({question, answer, ...rest}) => {
console.log(question);
console.log(answer);
console.log(rest);
};
adams({
question: "Life, the Unverse, and Everything!",
answer: 42,
legend: true,
missed: true
});That ...rest inside the {} in the parameter list creates an object with the "rest" of the properties (those not captured as discrete arguments). It's the destructuring version of JavaScript's "rest params." You can do it in assignments, too:
// ES2018+
const o = {
question: "Life, the Unverse, and Everything!",
answer: 42,
legend: true,
missed: true
};
const {question, answer, ...rest} = o;
console.log(question);
console.log(answer);
console.log(rest);The ES2015 spec had it for arrays, ES2018 added it for object properties.
It's called destructuring. Here's an example on how it works and how to use it:
const employeeOne = { name: 'John', phone: '555-5555', age: 27 };
const { name, phone, age: john_age } = employeeOne;
console.log(name); // 'John'
console.log(phone); // '555-5555'
console.log(john_age); // '27'
sayHi = ({ name }) => console.log(`Hello ${name}, how are you?`);
sayHi(employeeOne); //'Hello John, how are you?'
