The **`e.key`** or **`event.key`** is a property of the `event` object that is created when the `keyup` or `keydown` event is fired. 
One good use of this property is when you click the enter key to search through a list of items on a website.

#    
## Syntax
The `key` property can be accessed with the `keyup` or `keydown` event listener.


[element].addEventListener("keydown", function(e){
    // The e.key can now be accessed!
    console.log(e.key)
})

#   
## Use case
There are many use cases for `e.key`, such as pressing the `enter` key, the `ctrl` key, the `shift` key, or even a combination of keys. When these keyboard events are fired, the `key` property is accessible, and the corresponding action is implemented in the code.

## Example
Take a look at the code below, which is a use case of the `key` property of a keyboard event. When the `enter` key is pressed, we get the search result.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" name="" id="inp" placeholder="search for tvshow">
        <ul id="tvshows"></ul>

    </div>
    <script>
        let tvshows = document.getElementById("tvshows")
        let searchBox = document.getElementById("inp");
        let listOfMovies = ["Game of thrones", "Money Heist", "Prison Break"];

        const createMovie = (movie) =>{
            let newMovie = document.createElement("li");
            newMovie.innerText = movie;
            tvshows.appendChild(newMovie);
        }
        // load tvshows
        window.addEventListener("load", ()=>{
            listOfMovies.forEach((eachMovie)=>{
                createMovie(eachMovie);
            })
        })

        // For when the enter key is pressed
        searchBox.addEventListener("keydown", (e)=>{

            // Check if the e.key property is "Enter"
            if(e.key === "Enter")
            listOfMovies.filter(movie =>{
               if(movie.toLowerCase() == e.target.value.toLowerCase()){
                    tvshows.innerHTML = ""
                    createMovie(movie)
                }
            })
        })
    </script>
</body>
</html>

codemirror

From the code above, when the enter key is pressed on your device and the correct name of the tv show is typed into the text input, the result is shown. The value of the `e.key` property for the `enter` key is "Enter". 


What is e.key in JavaScript?

e.key specifies which key is pressed during keyup or keydown events, aiding in actions like searches. For the enter key, e.key is "Enter".