How to change an object Key without changing the original array in JavaScript?

Javascript Web Development Object Oriented Programming

JavaScript for beginners

Best Seller

Lets Kode It

More Detail

Modern Javascript for Beginners + Javascript Projects

The Complete Full-Stack JavaScript Course!

Best Seller

Joseph Delgadillo

More Detail

Following is the code to change an object key without changing the original array in JavaScript −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
</style>
</head>
<body>
<h1>Change an object Key without changing the original array</h1>
<button class="Btn">CLICK HERE</button>
<h3>
Click the above button to change the name object key to fullName
</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   let sampleEle = document.querySelector(".sample");
   let obj = [
      { name: "Rohan Sharma", age: 12 },
      { name: "Shawn Mendes", age: 18 },
      { name: "Michael Shaw", age: 15 },
      { name: "Mitch Johansson", age: 19 },
   ];
   BtnEle.addEventListener("click", () => {
      obj = obj.map((ele) => {
         ele["fullName"] = ele["name"];
         delete ele["name"];
         return ele;
      });
      console.log(obj);
   });
</script>
</body>
</html>