[JavaScript] 배열 메서드 알아보기

배열 메서드

이번 포스팅에서는 배열 메서드에 대해 다뤄보도록 하겠습니다.
배열 메서드 중 가장 많이 쓰이는 join(), push(), pop()에 대한 설명입니다.

---

join()

배열의 요소들을 연결하여 하나의 값으로 만든다. 문자열 값으로 반환한다.

번호	기본값	메서드	리턴값
1	[100, 200, 300, 400, 500]	join('')	100200300400500
2	[100, 200, 300, 400, 500]	join(' ')	100 200 300 400 500
3	[100, 200, 300, 400, 500]	join('★')	100★200★300★400★500
4	[100, 200, 300, 400, 500]	join('-')	100-200-300-400-500

코드 보기

const arrNum = [100, 200, 300, 400, 500];
// join 괄호 따옴표 안에 넣은 문자열 값을 출력될 데이터 사이사이에 넣음
const text1 = arrNum.join('');
const text2 = arrNum.join(' ');
const text3 = arrNum.join('★');
const text4 = arrNum.join('-');     // 전화번호 표기 등에 쓰이기 적합

//1
document.querySelector(".sample02_N1").innerHTML = "1";
document.querySelector(".sample02_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M1").innerHTML = "join('')";  //띄어쓰기 되지 않은 채 출력됨
document.querySelector(".sample02_P1").innerHTML = text1;

//2
document.querySelector(".sample02_N2").innerHTML = "2";
document.querySelector(".sample02_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M2").innerHTML = "join(' ')";     //띄어쓰기 한 칸 된 채 출력됨
document.querySelector(".sample02_P2").innerHTML = text2;

//3
document.querySelector(".sample02_N3").innerHTML = "3";
document.querySelector(".sample02_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M3").innerHTML = "join('★')";    //데이터 사이마다 ★ 출력됨
document.querySelector(".sample02_P3").innerHTML = text3;

//4
document.querySelector(".sample02_N4").innerHTML = "4";
document.querySelector(".sample02_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M4").innerHTML = "join('-')";     //데이터 사이마다 하이픈(-) 출력됨
document.querySelector(".sample02_P4").innerHTML = text4;

push() / pop()

push() 메서드는 배열 마지막 요소에 추가하여 숫자를 반환하고, pop() 메서드는 배열 마지막 요소를 삭제한다.

번호	기본값	메서드	리턴값	결과값
1	[100, 200, 300, 400, 500]	push(600)	6	100,200,300,400,500,600
2	[100, 200, 300, 400, 500]	pop(600)	500	100,200,300,400

코드 보기

//1. push()
const arrNum = [100, 200, 300, 400, 500];
const arrPush = arrNum.push(600);

document.querySelector(".sample03_N1").innerHTML = "1";
document.querySelector(".sample03_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample03_M1").innerHTML = "push(600)"; //배열 마지막 요소에 600 추가
document.querySelector(".sample03_P1").innerHTML = arrPush;     //6 --> 600을 추가한 후 배열의 총 개수를 출력
document.querySelector(".sample03_A1").innerHTML = arrNum;      //100,200,300,400,500,600 --> 600을 추가한 후 배열 안의 데이터 모두 출력

//2. pop()
const arrNum2 = [100, 200, 300, 400, 500];
const arrPush2 = arrNum2.pop();

document.querySelector(".sample03_N2").innerHTML = "2";
document.querySelector(".sample03_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample03_M2").innerHTML = "pop()";      //배열 마지막 요소 500 삭제
document.querySelector(".sample03_P2").innerHTML = arrPush2;     //500 --> 삭제된 요소를 출력(반환)
document.querySelector(".sample03_A2").innerHTML = arrNum2;      //100,200,300,400 --> 요소가 삭제된 후의 배열 안의 데이터 모두 출력