[JavaScript] 자바스크립트 배열 2 : 배열 객체 메서드 총정리

📝 JavaScript

 

🖥️ 배열(Array)객체의 메서드 

하나의 저장소에 여러개의 데이터를 저장할 때 배열을 선언해 주는데요아래는 배열과 관련된 메서드와 속성입니다. 아래 메서드를 잘 사용하면 배열 순서를 변경 할 수도 있고, 배열 객체에 새 데이터를 삽입하거나 삭제하는 것도 가능합니다.

 

✅ Array 객체의 메서드와 속성 한 눈에 보기

​

종류	기능
join(연결 문자)	배열의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환
reverse()	배열의 데이터 순서를 거꾸로 바꾼 후 반환
sort()	배열의 데이터를 오름차순으로 정렬
slice(index1, index2)	배열의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져오기
splice()	배열의 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입
concat()	2개의 배열 객체를 하나로 결합
pop()	배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제
push(new data)	배열의 마지막 인덱스에 새 데이터를 삽입
shift()	배열에 저장된 데이터 중 첫번째 인덱스에 저장된 데이터를 삭제
unshift(new data)	배열의 가장 앞의 인덱스에 새 데이터 삽입
length	배열에 저장된 총 데이터의 개수를 반환

출처 : 이지스퍼블리싱 Do It! 자바스크립트 + 제이쿼리 입문 p.101

​

1. join(연결문자) 

배열에 저장된 값을 지정한 문자로 연결하여 하나의 문자열을 반환

let arr_1 = ["이대", "신촌", "홍대입구", "합정"];
let arr_2 = ["구로", "신도림", "영등포"];

let result = arr_1.join("-");
console.log(result);

이대-신촌-홍대입구-합정

 

2. concat() 

2개의 배열을 하나의 배열로 만들어 반환

let arr_1 = ["이대", "신촌", "홍대입구", "합정"];
let arr_2 = ["구로", "신도림", "영등포"];

let result = arr_1.concat(arr_2);
console.log(result);

▶(7) ["이대", "신촌", "홍대입구", "합정", "구로", "신도림", "영등포"]

 

3. slice(index1, index2) 

배열의 1번 이전의 인덱스 요소를 잘라내서 남은 값을 반환

let arr_1 = ["이대", "신촌", "홍대입구", "합정"];
let arr_2 = ["구로", "신도림", "영등포"];

let result = arr_1.slice(1, 3);
console.log(result);

▶(2) ["신촌", "홍대입구"]

 

4. sort() 

배열의 데이터를 오름차순으로 정렬 (한글과 영어는 가나다순 또는 abc순)

let arr_1 = ["이대", "신촌", "홍대입구", "합정"];
let arr_2 = ["구로", "신도림", "영등포"];

let result = arr_1.sort();
console.log(result);

▶(4) ["신촌", "이대", "합정", "홍대입구"]

 

5. reverse() 

배열 순서를 거꾸로 뒤집기

let arr_1 = ["이대", "신촌", "홍대입구", "합정"];
let arr_2 = ["구로", "신도림", "영등포"];

let result = arr_1.reverse();
console.log(result);

▶(4) ["합정", "홍대입구", "신촌", "이대"]

 

6. splice() 

배열에서 지정 구간의 데이터를 삭제하고 새로운 데이터를 삽입

let greenArr = ["교대", "방배", "강남"];
let YellowArr = ["미금", "정자", "수서"];

greenArr.splice(2, 1, "서초", "역삼");
// 2번 인덱스부터 1개의 데이터를 삭제한 후, "서초", "역삼"을 삽입
console.log(greenArr);

▶(4) ["교대", "방배", "서초", "역삼"]

 

7. pop() , shift() 

pop() : 배열의 가장 마지막에 있는 인덱스의 데이터를 꺼내오기

shift() : 배열의 가장 앞쪽 인덱스의 데이터를 꺼내오기

let greenArr = ["교대", "방배", "강남"];
let YellowArr = ["미금", "정자", "수서"];

let data1 = yellowArr.pop();
// yellowArr 마지막 인덱스의 데이터를 꺼내와서 data1 변수에 저장
let data2 = yellowArr.shift();
// yellowArr 가장 앞쪽 인덱스의 데이터를 data2에 저장

 

8. push(new data), unshift(new data) 

push() : 데이터를 배열의 마지막 인덱스에 추가(밀어넣기)

unshift() : 데이터를 배열의 맨 앞 인덱스에 추가(밀어넣기)

let greenArr = ["교대", "방배", "강남"];
let YellowArr = ["미금", "정자", "수서"];

let data1 = yellowArr.pop();
// yellowArr 마지막 인덱스의 데이터를 꺼내와서 data1 변수에 저장
// data1에는 "수서"가 저장되고 YellowArr = ["미금", "정자"]만 남음

let data2 = yellowArr.shift();
// yellowArr 가장 앞쪽 인덱스의 데이터를 꺼내와서 data2에 저장 
// data2에는 "미금"이 저장되고 YellowArr = ["정자"]만 남음

yellowArr.push(data2);
// data2에 저장되어 있는 데이터를 yellowArr의 마지막 인덱스에 삽입
console.log(yellowArr);

yellowArr.unshfit(data1);
// data1에 저장된 데이터를 yellowArr 배열의 가장 앞 쪽 인덱스에 삽입
console.log(yellowArr);

▶(2) ["정자", "미금"]
▶(2) ["수서", "정자", "미금"]