배열 메서드 : join() / push() / pop()

배열 메서드 : join() / push() / pop()

배열 메서드를 사용하면 배열의 요소를 불러올 때 다양한 효과를 줄 수 있습니다. 잘 기억해 두었다가 적절히 사용합시다.
각 메서드마다 리턴값과 결과값으로 어떤 값을 나타내는지 구분합시다.

> join() 메서드

join() 메서드는 배열 요소의 문자열을 결합한 뒤 반환하여 줍니다. ()괄호 안에 문자를 넣어 작성한 경우, 배열의 요소 사이에 해당 문자를 넣어 결합한 뒤 반환하여 줍니다. 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];
const text1 = arrNum.join('');
const text2 = arrNum.join(' ');
const text3 = arrNum.join('♠');
const text4 = arrNum.join('-');

//01
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;

//02
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;

//03
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;

//04
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() 메서드

push() 메서드는 배열의 마지막에 괄호()안에 넣은 내용을 새로운 요소로 추가하는 메서드이며, 추가한 뒤 배열의 길이값을 숫자로 반환합니다.

> pop() 메서드

pop() 메서드는 배열의 마지막 요소를 삭제하는 메서드이며, 삭제한 요소를 리턴값으로 반환합니다. 괄호()안을 비워두면 마지막 요소를 선택해 삭제합니다.

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

//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)";
document.querySelector(".sample03_P1").innerHTML = arrPush; //6
document.querySelector(".sample03_A1").innerHTML = arrNum;  //100,200,300,400,500

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

document.querySelector(".sample03_N2").innerHTML = "2";
document.querySelector(".sample03_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample03_M2").innerHTML = "pop()";
document.querySelector(".sample03_P2").innerHTML = arrPop;  //500
document.querySelector(".sample03_A2").innerHTML = arrNum2; //100,200,300,400