[Javascript] 배열 객체 / join() / reverse() / sort() / slice() / splice() / concat() / pop() / push() / shift() / unshift() / length에 관해서

변수에는 데이터가 한 개만 저장. 여러 개의 데이터를 하나의 장소에 저장하려면?

 

배열 객체(Array Object)를 생성하면 됩니다.

 

배열 객체(Array object) 생성하는 방식

1. let 참조 변수 = new Array();
	참조변수[0]=값1; 참조 변수[10]=값2; ... 참조 변수[n-1]=값n;
    
2. let 참조 변수 = new Array(값1, 값2, ... 값n);
3. let 참조 변수 = [값2, 값2, ... 값n];

 

배열 객체 생성 예시

// 배열 선언 방법 1
let arr1 = [];

// 배열 선업 방법 2
let arr2 = Array();
let arr3 = new Array();

// 선언된 배열 호출
console.log( arr1);
console.log( arr2);
console.log( arr3);

 

출력

배열이 생성되었지만, 데이터가 없다.  그렇다면 어떤 자료형일까?

 

 

// 자료형을 알아내기 위한 메소드
    console.log( typeof arr1);
	console.log( typeof arr2);
	console.log( typeof arr3);

 

객체(object)라고 반환

 

추가 알고가기) 두 실행문의 차이점을 알아보자.

// 배열 arr41 선언
let arr41 = new Array( 4 );

// 배열 arr42 선언
let arr42 = new Array( 1, 2, 3, 4 );

// 배열 arr41 객체 정보
console.log( arr41 );
console.log( arr41.length );

// 배열 arr42 객체 정보
console.log( arr42 );
console.log( arr42.length );

 

let arr41 = new Array( 4 );

• 위와 같이 선언한 배열 arr41 객체는 크기가 "4" 이지만, 값이 없는 배열이며,

 

let arr42 = new Array( 1, 2, 3, 4 );

• 위와 같이 선언한 arr42 객체는 " 1, 2, 3, 4", 4개의 숫자 데이터가 존재하는 배열.

 

---

 

배열 객체(Array object)에 저장된 데이터 불러오기

저장된 각각의 데이터는 배열로 나누어진 저장소에 나열되며, 각각의 저장소에는 0부터 시작하는  인덱스 번호(번지수)가 부여됨. 

참조 변수[인덱스 번호];

 

배열의 순서 변경 및 새 데이터의 삽입과 삭제도 가능한,

배열 객체의 메서드 및 속성

join(연결 문자)	배열 객체의 데이터를 1개의 문자형 데이터로 반환
reverse()	배열 객체의 데이터 순서를 뒤집어서 반환
sort()	배열 객체의 데이터를 오름차순으로 정렬 ex) 문자열 10과 문자열 2를 비교할 때, "1" < "2" 이므로 10이 2보다 앞에 존재
slice(index1, index2)	배열 객체의 데이터 중 원하는 인덱스 구간만큼 자른 후 가져옴
splice()	배열 객체의 지정 데이터를 삭제 후 새로운 데이터 삽입
concat()	2개의 배열 객체를 1개의 배열 객체로 결합
pop()	배열의 마지막 인덱스 데이터를 삭제
push(new daa)	배열 객체의 마지막 인덱스에 데이터 삽입
shift()	배열 객체에 첫번쨰 인덱스 삭제
unshift(new data)	배열 객체의 첫번째 인덱스에 새 데이터 삽입
length	배열에 저장된 총 데이터 갯수 반환

 

concat()  메서드: 2개의 배열 객체를 하나로 결합

// 배열 선언
let arr1 = new Array( 1, 2, 3, 4 );
let arr2 = new Array( 5, 6, 7, 8 );

	// concat 메서드 사용 예 1
    let arr31 = arr1.concat( arr2 );
    	console.log( arr31 );

	// concat 메서드 사용 예 2	
    let arr32 = arr2.concat( arr1 );
        console.log( arr32 );

 

2개의 배열 arr1과 arr2을 하나로 결합

첫번쨰 실행문은  arr1 + arr2 이며, 두번쨰 실행문은 arr2 + arr1

 

split() 메서드: 문자열을 분해하여 배열을 반환

let str11 = "사과, 배, 귤, 수박";

	console.log( str11 );

let arr4 = str11.split(",");

	console.log( arr4 );

 

초기에 문자열로 선언해서 " 사과, 배, 귤, 수박 "이 출력되지만,

문자열을 분해하여 배열을 반환하는 split() 메서드를 이용하면 배열을 반환받을 수 있음.

 

join(연결 문자) 메서드: 연결 문자 기준으로 1개의 문자형 데이터로 반환

 

위에서 split() 메서드를 이용해서 배열로 반환받았던 배열 arr4 객체에 join() 메서드를 적용한다면?

let str11 = "사과, 배, 귤, 수박";
let arr4 = str11.split(",");	//	배열 반환 => [사과, 배, 귤, 수박]

let str12 = arr4.join( ":");
console.log(str12);

 

아래와 같이 지정한 문자(:)가 추가된 문자형 데이터를 반환받았다. 

 

pop() 메서드: 배열 객체의 마지막 인덱스에 저장된 데이터를 삭제

 

let arr01 = ["호랑이", "강아지", "고양이"]

let value = arr01.pop();
    console.log( arr01.length );
    console.log( arr01 );            
    console.log( value );

 초기 배열에는 3개의 데이터( "호랑이", "강아지", "고양이" )가 있었지만,

pop 메서드를 통해 배열 객체의 마지막 인덱스 "고양이"가 삭제되면서, 2개의 데이터만 존재

 

 

push(new data): 배열 객체의 마지막 인덱스에 새로운 데이터를 삽입

 

 let arr01 = ["호랑이", "강아지", "고양이"]
           
    arr01.push( "염소" );
    console.log( arr01 );

 초기 배열에는 3개의 데이터( "호랑이", "강아지", "고양이" )가 있었지만,

push 메서드를 통해 배열 객체의 마지막 인덱스 "염소"가 추가되면서, 4개의 데이터가 존재

 

reverse() 메서드: 배열 객체의 데이터 순서를 뒤집어서 반환

let arr01 = ["호랑이", "강아지", "고양이"]
    console.log( arr01 );

    let reversArr4 = arr01.reverse();
    console.log( reversArr4 );

 초기 배열에 순서와

reverse 메서드를 통해 배열 객체의 순서가 거꾸로 변경

 

slice( index1, index2) 메서드: 배열 객체의 데이터 중 원하는 구간만큼 자른 후 가져옴

let arr01 = ["호랑이", "강아지", "고양이"]

    let subArr1 = arr01.slice( 1, 2 );
    console.log(subArr1 );

 

arr01[1] <=  자르는 구간 < arr01[2] 에 해당하는

arr01[1]인 "강아지"에 값을 출력