JavaScript의 배열

변수에 대해 이야기하면 한 번에 하나의 값만 저장할 수 있지만 동일한 유형의 여러 값을 저장해야 하는 경우에는 어떻게 될까요?

예를 들어 이해합시다.

const firstVehicle = "Bike";
const secondVehicle = "Car";
const thirdVehicle = "Scootey";

참고: 아래를 클릭하여 이 문서에 제공된 예제를 실행할 수 있습니다.
Execute code here

제한된 수의 차량 목록이 있는 경우 다른 변수에 저장할 수 있습니다.
하지만 우리가 100대의 차량 목록을 가지고 있다면(저는 차량의 예를 들었습니다. 여기에서 무엇이든 생각할 수 있습니다),
나는 그것들을 다른 변수에 저장하는 것은 좋은 생각이 아니라고 생각합니다. 이 문제를 극복하기 위해 배열이 있습니다.

배열의 도움으로 이 문제를 어떻게 해결할 수 있는지 봅시다.

const vehicleWeHave = ['Car','Scootey','Bike'];

이제 이러한 값에 액세스하는 방법에 대해 질문할 수 있습니다.
이러한 값에 액세스하는 방법을 이해하려면 아래 예를 살펴보십시오.

const vehicleWeHave = ['Car','Scootey','Bike'];
console.log(vehicleWeHave[0]);// Car
console.log(vehicleWeHave[1]);// Scootey
console.log(vehicleWeHave[2]);// Bike

변수 이름 바로 뒤에 0,1,2가 무엇인지 생각할 수 있습니다. 인덱스 번호입니다.
즉, 단순히 vehicleWeHave[0]를 작성하여 첫 번째 값에 접근할 수 있고, vehicleWeHave[1]로 두 번째 값에 접근할 수 있다는 뜻입니다.

같은 방식으로 배열의 모든 값에 액세스할 수 있습니다.

참고: 인덱스는 항상 0으로 시작하므로 위의 예에서 첫 번째 값에 액세스하기 위해 1 대신 0을 사용했습니다.

루프를 사용하여 배열 값에 액세스할 수도 있습니다.

const vehicleWeHave = ['Car','Scootey','Bike'];
for(let index = 0; index < vehicleWeHave.length; index++){
console.log(vehicleWeHave[index]);
}

이제 배열에 적용할 수 있는 몇 가지 일반적인 방법을 이해해 보겠습니다.

1. 팝()

이 메서드는 배열에서 마지막 요소를 제거합니다.

const vehicleWeHave = ['Car','Scootey','Bike'];
vehicleWeHave.pop(); // remove Bike from this array

이제 마지막 값을 이미 제거했기 때문에 이 배열에는 두 개의 값만 있습니다.

pop 메서드는 제거된 항목을 반환합니다. pop 메서드의 효과를 보려면 아래 코드를 참조하십시오.

const vehicleWeHave = ['Car','Scootey','Bike'];
const removedVehicle = vehicleWeHave.pop();
console.log(removedVehicle);// Bike
console.log(vehicleWeHave);//['Car','Scootey']

위의 코드에서 우리가 한 것은 주어진 배열에서 마지막 항목을 제거하는 것이고, 당신은 이미 pop 메소드가 제거된 항목을 반환할 것이라는 것을 배웠습니다.

그래서, pop 메소드의 효과를 보기 위해 우리는 removeVehicle 변수에 반환값을 저장했습니다.

2. 푸시()

push 메서드는 주어진 배열의 끝에 요소를 추가하는 데 도움이 되며 배열의 새 길이를 반환합니다.

const vegetable = ['Onion','Spinach','Carrot'];
const lengthOfVegetableArray = vegetable.push('Tomato');

console.log(vegetable);//['Onion','Spinach','Carrot','Tomato']

console.log(lengthOfVegetableArray);//4

위의 예에서 우리는 야채 배열에 새로운 값이 있음을 알 수 있습니다.

그리고 반환된 값을 lengthOfVegetableArray(이 경우 4) 변수에 저장했습니다.

3. 시프트()

이 메서드는 배열의 시작 부분에서 요소를 제거하고 shift 메서드는 제거된 항목을 반환합니다.

아래 예에는 배열 이름이 야채이지만 실수로 여기에 과일을 추가했습니다. 따라서 주어진 배열에서 이 과일을 제거해야 합니다.

const vegetable = ['Apple','Onion','Spinach','Carrot'];
const removedFruit = vegetable.shift();
console.log(removedFruit);// Apple
console.log(vegetable); // ['Onion','Spinach','Carrot']

이제, removeFruit는 야채 배열에 적용된 shift 메소드에 의해 반환된 값(이 경우 사과)을 저장합니다.

4. unshift()

이 방법은 기존 배열의 시작 부분에 새 요소를 추가하는 데 도움이 되며 배열의 새 길이를 반환합니다.

const vegetable = ['Onion','Spinach','Carrot'];
const newVegetableLength = vegetable.unshift('Potato');
console.log(newVegetableLength);//4
console.log(vegetable);//['Potato','Onion','Spinach','Carrot']

이제 unshift 메서드는 길이를 newVegetableLength로 반환하고 새 요소가 배열의 시작 부분에 추가됩니다.

5. 연결()

이 방법은 두 개 이상의 배열을 병합합니다.

const bike = ['Ninja','Bullet','Hayabusa','Duke','Apache'];
const cars = ['Porsche','Ferrari','Lambourghini','Mercedes'];

위의 예에서 우리는 두 개의 배열 자전거와 자동차를 가지고 있습니다. 이제 concat 메서드를 사용하여 함께 병합합니다.

const myCollection = bike.concat(cars);
console.log(myCollection);//['Ninja','Bullet','Hayabusa','Duke','Apache','Porsche','Ferrari','Lambourghini','Mercedes']

원래 어레이 자전거는 동일하게 유지됩니다. Concat() 메서드는 항상 새 배열을 반환합니다.

6. 리버스()

이 방법은 원래 배열을 뒤집는 데 도움이 됩니다.

const weekDays = ['Sat','Fri','Thurs','Wed','Tue','Mon','Sun'];
weekDays.reverse();
console.log(weekDays);//['Sun', 'Mon', 'Tue', 'Wed', 'Thurs', 'Fri', 'Sat']

* 읽어주셔서 감사합니다. 제가 놓친 부분이 있으면 알려주세요.*

**배열의 맵, 필터 및 축소 방법에 대해 읽으려면 아래를 클릭하세요.**