join()/push()/pop()

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

배열을 결합, 추가, 제거하는 메서드입니다.

매서드	설명
join( )	배열의 요소를 연결하여 하나의 값으로 만듭니다.
push( )	배열의 마지막에 하나 이상의 요소를 추가합니다.
pop( )	배열의 마지막 요소를 제거하고 그 요소를 반환합니다.

---

1. 배열 메서드 : join( )

join( ) 메서드는 배열의 요소를 연결해 하나의 값으로 만들어줍니다.
출력시 배열에 있는 요소들을 하나의 값으로 만들며, 각 요소의 구분은 콤마(,)로 합니다. 요소들의 구분을 다른 문자로 하려면 ( ) 안에 원하는 문자를 넣습니다.

//변수
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;   //배열을 불러올 때 100, 200, 300 식으로 나오지만 join은 따옴표가 생략된다.

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

결과보기

2. 배열 메서드 : push( )

push( )는 배열 메서드 마지막에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환합니다.

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

//01 push()
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 이 나옴

결과보기

3. 배열 메서드 : pop( )

pop( )은 배열의 마지막 요소를 제거하고 그 요소를 반환합니다.

//02 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()";
document.querySelector(".sample03_P2").innerHTML = arrPush2;     //마지막값을 불러오기 떄문에 500이 나옴
document.querySelector(".sample03_A2").innerHTML = arrNum2;      //마지막 값이 삭제된 100, 200, 300, 400 이 나옴

결과보기