JS - 배열 조작하기

요소 추가

요소가 없는 배열을 선언해보겠습니다.

let cities = [];

cities 라는 변수에 빈 배열을 할당해주었습니다. 그리고 아래와 같이 요소를 하나씩 추가할 수 있습니다.

cities[0] = "서울"; // ["서울"]
cities[1] = "대전"; // ["서울", "대전"]
cities[2] = "대구"; // ["서울", "대전", "대구"]
cities[0] = "서울"; // ["서울"]
cities[1] = "대전"; // ["서울", "대전"]
cities[2] = "대구"; // ["서울", "대전", "대구"]

그리고 6번째 요소에 미리 "제주도"를 할당해 볼까요?

cities[5] = "제주도";

왠지 차례대로 요소를 추가해야할 것 같지만, 이렇게 원하는 위치에 마음대로 요소를 할당할 수 있습니다. cities 의 4, 5번째 요소를 console.log 로 출력하면 아무것도 할당하지 않았기에 undefined 라고 출력됩니다.

이로써 다음과 같이 총 6개의 요소가 있는 배열이 되었습니다.
["서울", "대전", "대구", undefined, undefined, "제주도"]

요소를 수정하고 싶을 때는 아래와 같이 배열의 인덱스에 접근하여 값을 할당하면 됩니다.

cities[5] = "포항";
console.log(cities[5]);

push / unshift 메소드

다른 방법으로도 요소를 추가 할 수 있습니다.

let cities = [];
cities.push("경주", "전주");
cities.unshift("인천");

console.log(cities) // [ '인천', '경주', '전주' ]

push() , unshift() 메소드는 배열에 요소를 추가해주는 함수입니다.
둘의 차이는 요소들이 배열에 추가되는 위치가 다르다는 것 입니다.

push 는 배열의 마지막 부분, 즉 꼬리에 요소들을 추가하고,
unshift는 배열의 맨 앞부분, 즉 머리 부분에 요소를 추가합니다.

cities 라는 변수에 [] 배열을 할당하는 순간, cities 라는 변수는 Array형이 되었습니다.

Array형에는 기본적으로 제공되는 내장 메소드들이 많이 있습니다. 그 중에 방금 살펴본 push, unshift가 있는 것입니다.

pop 메소드

배열에 요소를 추가하는 것 말고도, 요소를 제거 할 수도 있습니다.

cities.pop();
console.log(cities) // [ '인천', '경주' ]

pop 메소드를 사용하면 마지막 요소가 제거되고, 마지막 요소의 값을 반환합니다.

요약

배열 조작 방법에는 3가지가 있습니다.

1. index로 접근하여 수정이나 추가
2. push, unshift 메소드로 추가
3. pop 메소드로 요소 제거

let day = ['m', 's', 'w', 't'];
day[1] = 't';
day[4] = 'f';
day[5] = 's'; // 방법 (1)
console.log(day) // [ 'm', 't', 'w', 't', 'f', 's' ]
​
let month = [1, 2, 3, 4]
month.push(5); // 방법 (2)
console.log(month) // [ 1, 2, 3, 4, 5 ]

month.pop(); // 방법 (3)
console.log(month) // [ 1, 2, 3, 4 ]