How does JS understand props parameter as object in any function (react.js)?

Question

While i am studying react.js, i noticed that any function i wrote and then give it any parameter name, javascript will understand this parameter as object type

Like this :

function Somthing(some){
    return (
        <div>
            Hello, friends{console.log(some)}
        </div> 
    ) 
}

export default Something;

Then console.log(some) will give me "Object{}" type without assigning to it any object

So my question, How can i do this concept in vanilla javascript and how does javascript understand it?

Answer 1

You can think of React props as a normal function parameter , its an object contains some properties.

in next example we see , react components or jsx are normal constructor functions

function Greeting(props){
        return <h3>Hello {props.name}</h3>
}

When you insert your Greeting component inside your App or parent component like this:

function App (){
 return <Greeting name="Jack" />
}

what happen under the hood that Babel compile the code to something like this

function Greeting(props) {
  return React.createElement("h3", null, "Hello ", props.name);
}

and App Component complied to something like this

function App() {
      return React.createElement(Greeting, {
        name: "Jack"
      });
    }