배열 객체

배열 객체

배열 객체는 인접한 메모리 블록 내의 특정 위치에 보관되는 데이터 조각입니다.
이러한 메모리 블록을 "Array" 라고 하며 컴퓨터 프로그램 내에서 쉽게 구성하고 엑세스 할 수 있도록 유사한 객체를 함께 그룹화하는 데 사용됩니다.
배열에서 객체의 위치를 "Index" 라고 합니다. 대부분의 컴퓨터 언어에서 첫 번째 객체의 색인은 1인 아닌 0에서 시작합니다.
배열의 모든 객체는 동일한 유형이어야 하며 배울에 문자열을 포함하도록 선언된 경우 모든 배열 객체는 문자열이어야 합니다.
일반적인 객체 유형이 배열에 의해 선언된 것이면 배열 객체는 크기에 관계없이 모든 유형의 데이터를 포함할 수 있습니다.

▶ 배열 속성
: length
▶ 배열 메서드
01. join()
02. push() / pop()

---

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

length 예제

document.querySelector().innerHTML = 의 형식으로 결과값을 출력해 주었습니다.
03예제에서 배열에 배열이 들어가도 length에서는 하나의 index로 간주합니다.

//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(' ')	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

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('-');

document.querySelector(".sample02_N1").innerHTML = "1";
document.querySelector(".sample02_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M1").innerHTML = "join('')"; //원래 join아니고 배열이면 ,도 같이 나오는데 join은 안 나옴!
document.querySelector(".sample02_P1").innerHTML = text1;

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;

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;

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() / 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

push() / pop() 예제

push()는 데이터를 밀어넣는 메서드입니다.
결과값을 출력할 때 document.querySelector(".sample03_P1").innerHTML = arrPush;을 사용하면 arrPush는 총 배열의 수를 뜻하기 때문에 6이라는 값을 출력합니다.
pop()은 마지막 요소를 제거하고 마지막 값을 반환하는 메서드입니다.

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