배열 객체 (1)

⭐️ 배열 객체 ( length 속성 , join / push / pop 메서드 ) ⭐️

---

01. 표준 내장 객체의 종류 : 배열 객체

표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다.
내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다.
그 중에서 배열 객체(Array Object)는 연관성 있는 여러 데이터를 하나의 이름으로 저장/관리하기 위해 사용하는 객체를 의미합니다.

   ___ 참고하기 ___
  1)   배열을 생성할 때는 대괄호[ ]를 활용한 배열 리터럴 표기법을 사용하거나, Array( )라는 생성자 함수를 사용합니다.
  2)   뒤에 ( )가 붙지 않는 '속성'은, 영문법에 비유하자면 '명사'라고 할 수 있습니다. ☛ length; 속성
      속성을 사용하면 데이터가 기존에 가지고 있는 그대로의 것을 보여주게 됩니다.
  3)   뒤에 ( )가 붙는 '메서드'는, 영문법에 비유하자면 '동사'라고 할 수 있습니다. ☛ join( ); 메서드
      메서드를 사용하면 데이터의 값이나 위치가 변하는 것과 같이, 데이터가 어떠한 액션을 취하게 됩니다.

02. length 속성

length 는 배열의 길이를 구할 수 있는 속성으로, 배열에 저장된 '요소의 개수'를 반환(리턴)합니다.

// 1번 리턴 ----------------------------------------------------------------
    const arrNum = [100, 200, 300, 400, 500];
 
    document.querySelector(".sample01_P1").innerHTML = arrNum.length ;
 
// 2번 리턴 ----------------------------------------------------------------
    const arrTxt = ['a', 'b', 'c', 'd', 'f'];
 
    document.querySelector(".sample01_P2").innerHTML = arrTxt.length ;
 
// 3번 리턴 ----------------------------------------------------------------
    const arr = [1, 2, ['a', 'b']];
 
    document.querySelector(".sample01_P3").innerHTML = arr.length ;

번호	기본값	속성	리턴값
1	[100, 200, 300, 400, 500]	length	5
2	['a', 'b', 'c', 'd', 'f']		5
3	[1, 2, ['a', 'b']]		3

03. join 메서드 🤩🤩🤩

배열의 모든 요소를 결합하여 하나의 문자열로 반환합니다.
반환값으로 나오는 문자열의 구분자(띄어쓰기, 특수문자, - 다시, 등)을 지정할 수 있습니다.

    const arrNum = [100, 200, 300, 400, 500];
// 1번 리턴 ----------------------------------------------------------------
    const text1 = arrNum.join('');       // 기본식 (구분자를 사용하지 않음)
// 2번 리턴 ----------------------------------------------------------------
    const text2 = arrNum.join(' ');      // 구분자 : 띄어쓰기 (한 칸 띄움)
// 3번 리턴 ----------------------------------------------------------------
    const text3 = arrNum.join('🤗');     // 구분자 : 특수문자
// 4번 리턴 ----------------------------------------------------------------
    const text4 = arrNum.join('-');      //  구분자 : - (다시)

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

04. push 🤩🤩/ pop 메서드 🤏

push 메서드와 pop 메서드는 원본 배열을 수정하는 메서드 입니다.
🐢 push( ) 메서드는 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열의 길이(배열의 수)를 반환합니다.
🐢 pop( ) 메서드는 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환합니다.

// 1번 리턴 ----------------------------------------------------------------
    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;  //arrNum 배열의 마지막 요소로 '600'이 추가되고, 이에 따라 배열의 길이 = '6' 이 반환됨 (원본 배열이 바뀜)
    document.querySelector(".sample03_A1").innerHTML = arrNum;   //100, 200, 300, 400, 500, 600 (변경된 배열이 출력됨)
// 2번 리턴 ----------------------------------------------------------------
    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;  //arrNum2 배열의 마지막 요소인 '500'이 제거되고, 이에 따라 제거된 요소 = '500' 이 반환됨 (원본 배열이 바뀜)
    document.querySelector(".sample03_A2").innerHTML = arrNum2;   //100, 200, 300, 400 (변경된 배열이 출력됨)

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