자바스크립트에서 객체로 이루어진 배열에도 일반 배열과 동일하게 다양한 배열 메서드를 적용할 수 있습니다. 아래 예제는 pop(), push(), splice() 메서드를 객체 배열에 사용하는 방법을 보여줍니다.
- pop(): 배열의 마지막 요소를 제거합니다.
- push(): 배열의 끝에 새로운 요소를 추가합니다.
- splice(): 지정한 위치부터 특정 개수만큼 요소를 제거하거나 교체합니다.
예제
<!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;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Using methods of array on array of JavaScript objects</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click the above button to apply array methods on array of objects</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let arr = [
{
name: "Rohan",
age: 22,
rollNo: "A12",
},
{
name: "Mohit",
age: 12,
rollNo: "B21",
},
{
name: "Shawn",
age: 18,
rollNo: "C43",
},
];
BtnEle.addEventListener("click", () => {
arr.pop();
arr.push({ name: "Michael", age: 17, rollNo: "AC9" });
arr.splice(1, 1);
console.log(arr);
});
</script>
</body>
</html>
출력
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭한 뒤 브라우저 콘솔을 확인해 보면 다음과 같이 변경된 배열을 확인할 수 있습니다.
버튼을 클릭하면 먼저 pop()에 의해 마지막 객체(Shawn)가 제거되고, 이어서 push()로 새로운 객체(Michael)가 배열 끝에 추가됩니다. 마지막으로 splice(1, 1)가 인덱스 1 위치의 객체(Mohit)를 하나 제거하여 최종적으로 Rohan과 Michael 두 개의 객체만 남게 됩니다.