Deconstructment assignment notation

user_976299 0
Viewed 39

I am following this example for creating a blog with Gatsby.

Throughout this tutorial, assignment notation is used like so:

export default function Index({ data }) {

  const { edges: posts } = data.allMarkdownRemark

  return (
    <div className="blog-posts">
      {posts
        .filter(post => post.node.frontmatter.title.length > 0)
        .map(({ node: post }) => {
          return (...);
        })}
    </div>
  )
}

Line 2, which appears to me as deconstructing assignment, is confusing to me. From what dictionary are we assigning the key edges's value posts to? Why are we able to reference posts later on without referencing it using the edges key?

reactjs javascript
1 Answers

You've stumbled upon destructuring and assigning to a new variable.

You can find the docs here and the scroll down to Assigning to new variable names.

What it does is that you are giving a declaring a new variable (in your case named posts that has the value of data.allMarkdownRemark.edges.

The syntax may seem backwards as edges is giving value to posts and not the other way around, but I think this makes sense if you think about it a bit.

Having it like this allows you to change from this:

const { edges } = data.allMarkdownRemark

to this:

const { edges: posts } = data.allMarkdownRemark

with minimal changes.

user_20546020
Related