배열 메서드

배열 메서드

배열 자체를 수정하며, 배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하는 메서드입니다.

---

01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)

length 속성은 배열의 길이를 반환하는 속성입니다.

번호	기본값	메서드	리턴값
1	[100, 200, 300, 400, 500]	length	5
2	['a', 'b', 'c', 'd', 'e']	length	5
3	[1, 2, ['a', 'b']]	length	3

//01
const arrNum = [100, 200, 300, 400, 500];

document.querySelector(".sample01_N1").innerHTML = "1";
document.querySelector(".sample01_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample01_M1").innerHTML = "length";
document.querySelector(".sample01_P1").innerHTML = arrNum.length;

//02
const arrTxt = ['a', 'b', 'c', 'd', 'e'];

document.querySelector(".sample01_N2").innerHTML = "2";
document.querySelector(".sample01_Q2").innerHTML = "['a', 'b', 'c', 'd', 'e']";
document.querySelector(".sample01_M2").innerHTML = "length";
document.querySelector(".sample01_P2").innerHTML = arrTxt.length;

//03
const arr = [1, 2, ['a', 'b']];

document.querySelector(".sample01_N3").innerHTML = "3";
document.querySelector(".sample01_Q3").innerHTML = "[1, 2, ['a', 'b']]";
document.querySelector(".sample01_M3").innerHTML = "length";
document.querySelector(".sample01_P3").innerHTML = arr.length;

02. 배열 메서드 : 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('-');

03. 배열 메서드 : push() / 04. pop()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이(length)를 반환합니다.
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

//01
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, 600

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