자바스크립트의 pop() 메서드는 배열 데이터를 조작할 수 있는 여러 배열 메서드 중 하나입니다. 웹 개발자들은 배열의 마지막 요소를 제거하거나, 제거된 요소를 별도로 활용해야 할 때 이 메서드를 사용합니다. 지금부터 pop() 메서드의 개념과 실전 사용법을 자세히 알아보겠습니다.
pop() 메서드 문법
pop() 메서드의 문법은 매우 간단합니다. 이름 그대로 배열의 마지막 요소를 제거한 후, 해당 요소를 반환하는 것이 이 메서드의 핵심 역할입니다.
let frozen = [ "Anna", "Elsa", "Olaf", "Kristoff", "Sven" ]; let popped = frozen.pop();
위 코드를 브라우저 콘솔에 입력한 뒤(콘솔 사용법은 아래 참고) console.log(frozen)과 console.log(popped)를 실행하면 어떤 결과가 나올까요?
frozen 배열은 요소가 하나 줄어든 상태로 출력되며, popped 변수에는 배열에서 제거된 마지막 요소인 "Sven"이 담기게 됩니다.
* 참고: Chrome/Firefox/Safari에서 자바스크립트 콘솔 여는 방법
Chrome/Firefox: 크롬에서는 페이지에서 마우스 오른쪽 버튼을 클릭한 후 '검사(Inspect)'를 선택하세요. 크롬 개발자 도구가 열리면 상단의 탭 목록 중 'Console'을 클릭하면 작업 공간이 나타납니다. 파이어폭스도 절차가 비슷하지만, '요소 검사(Inspect Element)'를 선택해야 한다는 점이 다릅니다.
Safari: 사파리를 사용한다면 먼저 '개발자(Develop)' 메뉴를 활성화해야 합니다. 사파리 브라우저를 연 뒤 상단 메뉴에서 Safari → '설정(Preferences)'으로 이동하고, '고급(Advanced)' 탭에서 '메뉴 막대에서 개발용 메뉴 보기' 항목에 체크하세요. 설정 창을 닫은 후 메뉴 막대에서 '개발(Develop)' → 'JavaScript 콘솔 표시'를 선택하면 됩니다.
이제 위 예제 코드를 직접 입력해 보세요. 물론 자신만의 예제를 만들어 연습해도 좋습니다! frozen과 popped 변수가 모두 생성되면 console.log로 두 값을 출력하면서 코드가 배열에 어떤 영향을 주는지 눈으로 직접 확인해 보세요.
배열 길이 변화와 빈 배열 처리
pop() 메서드는 호출될 때마다 배열의 길이(length)를 변경합니다. 따라서 배열에 요소가 남아 있는 동안은 계속해서 사용할 수 있습니다. 흥미로운 점은 배열이 완전히 비어 있어도 이 메서드를 호출할 수 있다는 것입니다. 이 경우 에러가 발생하지 않지만, 반환값은 undefined가 됩니다.
마무리
pop() 메서드는 배열의 마지막 항목을 제거한 뒤 그 요소를 활용해야 하는 로직을 구현할 때 매우 유용합니다. 배열 끝에 새 요소를 추가하는 push() 메서드와는 정반대의 동작을 하며, 배열 맨 앞의 요소를 제거하고 반환하는 shift() 메서드와도 기능상 비교됩니다. 이 세 가지 메서드의 차이를 잘 이해해 두면 배열을 다루는 실력이 한층 향상될 것입니다.