배열 객체 join() / push() / pop()

배열 객체

배열 객체에서 많이 사용하는 메서드로 join(), pop(), push() 가 있습니다.

---

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

배열의 길이를 구하기 위해서 length 속성을 사용한다.

번호	기본값	매서드	리턴값
1	[100, 200, 300, 400, 500]	length	5
2	['a''b''c''d''f']	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', 'f']
        
                document.querySelector(".sample01_N2").innerHTML = "2";
                document.querySelector(".sample01_Q2").innerHTML = "['a', 'b', 'c', 'd', 'f']";
                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(' ')	100200300400500
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;
}

---

03. 배열 메서드 : push() 배열 마지막 요소에 추가 : 반환(숫자) : ★★
04. 배열 메서드 : 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()	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 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()";
                document.querySelector(".sample03_P2").innerHTML = arrPush2; //500
                document.querySelector(".sample03_A2").innerHTML = arrNum2;  //100,200,300,400
}