JavaScript의 배열 메서드 pop()

 

 

 

jQuery에는 직접적으로 pop() 함수가 존재하지 않지만, JavaScript의 배열 메서드인 pop()을 사용할 수 있습니다. JavaScript의 배열 메서드 pop()은 배열의 마지막 요소를 제거하고 해당 요소를 반환합니다. 이를 jQuery와 함께 사용할 수 있는 예제와 함께 설명하겠습니다.

 

 

 

pop()의 기능

1. 배열에서 마지막 요소를 제거합니다.
2. 제거된 요소를 반환합니다.
3. 배열의 길이가 줄어듭니다.

 

---

 

사용 예제 1: 순수 JavaScript에서 pop()

let arr = [1, 2, 3, 4];
let lastElement = arr.pop(); // 배열의 마지막 요소 제거

console.log(lastElement); // 출력: 4
console.log(arr);         // 출력: [1, 2, 3]

 

---

 

사용 예제 2: jQuery와 함께 배열 pop() 사용

jQuery 객체는 배열이 아니지만, 일반 배열을 활용하거나 jQuery로 선택한 DOM 요소들을 배열로 변환한 후 pop()을 사용할 수 있습니다.

// 배열로 활용
let items = ['apple', 'banana', 'cherry'];
let lastFruit = items.pop();

console.log(lastFruit); // 출력: cherry
console.log(items);     // 출력: ['apple', 'banana']

// jQuery로 선택한 DOM 요소 처리
let $divs = $('div'); // 모든 <div> 요소 선택
let divArray = $divs.toArray(); // jQuery 객체를 일반 배열로 변환

let lastDiv = divArray.pop(); // 마지막 <div> 제거
console.log(lastDiv); // 출력: DOM 객체 (마지막 <div>)

 

---

 

사용 예제 3: 배열을 활용해 DOM 조작

// HTML 예시
// <ul id="list">
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>

// JavaScript
let items = $('#list li').toArray(); // li 요소를 배열로 변환
let lastItem = $(items.pop());       // 배열에서 마지막 li를 제거하고 jQuery 객체로 변환

lastItem.remove(); // 마지막 li를 DOM에서 제거

 

---

 

요약

• pop()은 배열의 마지막 요소를 제거하고 반환합니다.
• jQuery 자체에는 pop()이 없지만, 배열로 변환한 후 사용할 수 있습니다.
• DOM 조작에 활용하려면 jQuery 객체를 배열로 변환해야 합니다 (toArray() 메서드 사용).

 

 

 

 

 

#javascript #jquery #pop() #toArray() #remove()