자바스크립트 기본 문법 – 배열 – 1 – 배열의 요소 추가, 삭제, 탐색
배열의 개념과 활용
배열은 자바스크립트에서 여러 개의 값을 순차적으로 저장하는 자료구조입니다. 비유하자면, 배열은 마치 장바구니처럼 여러 종류의 과일을 담을 수 있는 컨테이너입니다. 한 번에 여러 개의 과일을 담을 수도 있고, 필요한 과일을 찾거나 추가, 삭제할 수도 있습니다.
예를 들어, 과일을 담은 배열을 만들어보겠습니다. 아래의 예시를 따라해보세요.
const fruits = ['사과', '바나나', '오렌지'];
위의 코드는 fruits
라는 배열을 만들고, 배열 안에 ‘사과’, ‘바나나’, ‘오렌지’라는 세 가지 과일을 순서대로 담은 것입니다.
배열의 요소 추가하기
배열에 새로운 요소를 추가할 수 있습니다. 비유하자면, 마치 장바구니에 새로운 과일을 넣는 것과 같습니다.
배열에 요소를 추가하는 방법에는 여러 가지가 있습니다. 일반적인 방법은 push()
메서드를 사용하는 것입니다. 아래의 예시를 확인해보세요.
fruits.push('포도');
위의 코드는 fruits
배열에 ‘포도’라는 과일을 추가합니다. push()
메서드는 배열의 끝에 새로운 요소를 추가하는 역할을 합니다.
또 다른 방법으로는 인덱스를 지정하여 요소를 추가하는 방법이 있습니다. 예를 들어, 배열의 가장 앞에 요소를 추가하려면 unshift()
메서드를 사용합니다. 아래의 예시를 확인해보세요.
fruits.unshift('수박');
위의 코드는 fruits
배열의 맨 앞에 ‘수박’이라는 과일을 추가합니다.
배열의 요소 삭제하기
배열에서 요소를 삭제하는 것도 가능합니다. 비유하자면, 장바구니에서 과일을 하나씩 빼는 것과 같습니다.
배열에서 요소를 삭제하는 방법에도 여러 가지가 있습니다. 일반적으로는 pop()
메서드를 사용하여 배열의 마지막 요소를 삭제할 수 있습니다. 아래의 예시를 확인해보세요.
fruits.pop();
위의 코드는 fruits
배열에서 마지막에 있는 요소를 삭제합니다. pop()
메서드는 삭제한 요소를 반환하기도 합니다.
또 다른 방법으로는 인덱스를 지정하여 요소를 삭제하는 방법이 있습니다. 예를 들어, 배열의 첫 번째 요소를 삭제하려면 shift()
메서드를 사용합니다. 아래의 예시를 확인해보세요.
fruits.shift();
위의 코드는 fruits
배열에서 첫 번째 요소를 삭제합니다.
배열의 요소 탐색하기
배열에서 특정 요소를 찾는 것도 중요합니다. 비유하자면, 장바구니에서 원하는 과일을 찾는 것과 같습니다.
자바스크립트에서 배열의 요소를 탐색하는 방법에는 여러 가지가 있습니다. 가장 간단한 방법은 for
루프를 사용하는 것입니다. 아래의 예시를 확인해보세요.
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
위의 코드는 fruits
배열의 모든 요소를 순서대로 출력합니다. fruits.length
는 배열의 길이를 나타내는 속성이며, for
루프를 사용하여 배열을 탐색할 수 있습니다.
또 다른 방법으로는 forEach()
메서드를 사용하는 것이 있습니다. 아래의 예시를 확인해보세요.
fruits.forEach(function(fruit) {
console.log(fruit);
});
위의 코드는 fruits
배열의 모든 요소를 순서대로 출력합니다. forEach()
메서드는 배열의 각 요소에 대해 콜백 함수를 실행하는 역할을 합니다.
주의해야 할 점
- 배열의 인덱스는 0부터 시작한다는 점에 주의해야 합니다. 첫 번째 요소는 인덱스 0, 두 번째 요소는 인덱스 1로 접근합니다.
push()
메서드는 배열의 끝에 요소를 추가하고,pop()
메서드는 배열의 끝에서 요소를 삭제합니다.unshift()
메서드는 배열의 맨 앞에 요소를 추가하고,shift()
메서드는 배열의 맨 앞에서 요소를 삭제합니다.for
루프나forEach()
메서드를 사용하여 배열을 탐색할 수 있습니다.for
루프는 인덱스를 사용하여 요소에 접근하고,forEach()
메서드는 각 요소에 대해 콜백 함수를 실행합니다.
이제 배열의 요소 추가, 삭제, 탐색에 대해 기본적인 내용을 배웠습니다. 이것을 활용하여 자바스크립트에서 다양한 작업을 수행할 수 있습니다. 계속해서 자바스크립트의 다른 기능과 활용법을 익혀보세요!
[자바스크립트, 기본 문법, 배열, 1, 배열의 요소 추가, 삭제, 탐색]
주의해야 할 점 요약
- 배열의 인덱스는 0부터 시작합니다.
push()
메서드는 배열의 끝에 요소를 추가하고,pop()
메서드는 배열의 끝에서 요소를 삭제합니다.unshift()
메서드는 배열의 맨 앞에 요소를 추가하고,shift()
메서드는 배열의 맨 앞에서 요소를 삭제합니다.for
루프나forEach()
메서드를 사용하여 배열을 탐색할 수 있습니다.- 배열의 길이를 초과하는 인덱스에 접근하면
undefined
가 반환됩니다. 배열의 길이를 항상 확인하고 유효한 인덱스를 사용해야 합니다. - 배열에는 서로 다른 타입의 요소를 저장할 수 있지만, 주로 동일한 타입의 요소를 저장하는 것이 일반적입니다. 혼동을 피하기 위해 동일한 타입의 요소를 사용하는 것이 좋습니다.