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

JavascriptWeb DevelopmentObject Oriented Programming

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


 Live Demo

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
<h1>Change an object Key without changing the original array</h1>
<button class="Btn">CLICK HERE</button>
Click the above button to change the name object key to fullName
   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 = => {
         ele["fullName"] = ele["name"];
         delete ele["name"];
         return ele;


The above code will produce the following output −

On clicking the ‘CLICK HERE’ button and inspecting the output in console −

Published on 18-Jul-2020 09:08:33