자바스크립트 배열: 생성부터 검색까지 사용법 및 예제
자바스크립트에서 배열은 여러 개의 값을 하나의 변수에 저장할 수 있는 자료형입니다. 배열은 인덱스를 사용하여 요소에 접근할 수 있고 요소를 추가, 삭제, 수정이 가능합니다. 또한 반복문을 사용하여 순회할 수 있으며, 검색과 정렬도 가능합니다. 자바스크립트에서 매우 중요한 데이터 구조 중 하나입니다. 그럼 예제로 자바스크립트에서 배열을 생성하고 다루는 방법에 대해서 알아보겠습니다.
▼ 목차
- 배열 생성 방법
- 배열의 길이와 요소 접근 방법
- 배열 요소의 추가와 삭제
- 배열 요소 수정하기
- 배열 복사하기
- 배열 순회하기
- 배열 검색하기
1. 배열 생성 방법
배열을 생성할 때는 대괄호([])를 사용하며 각 요소는 쉼표(,)로 구분합니다.
▼ 예제코드: 배열을 생성하는 방법
<script>
// 빈 배열 생성
let arr1 = [];
// 배열 요소를 가지고 있는 배열 생성
let arr2 = [1, 2, 3];
// 배열 요소의 데이터 유형이 서로 다른 배열 생성
let arr3 = [1, "two", {three: 3}];
// 2차원 배열 생성
let arr4 = [[1, 2], [3, 4], [5, 6]];
</script>
2. 배열의 길이와 요소 접근 방법
- 배열의 길이는 length 프로퍼티를 사용하여 구할 수 있습니다.
- 각 요소에는 대괄호([]) 안에 해당 요소의 인덱스 번호를 넣어 접근할 수 있습니다. 배열의 인덱스 0부터 시작합니다.
▼ 예제코드: 배열의 길이와 요소 접근 방법
<script>
let arr = ["A", "B", "C"];
// 배열의 길이 출력
console.log(arr.length); // 3
// 첫 번째 요소에 접근
console.log(arr[0]); // "A"
// 두 번째 요소에 접근
console.log(arr[1]); // "B"
// 세 번째 요소에 접근
console.log(arr[2]); // "C"
</script>
3. 배열 요소의 추가와 삭제
push(), pop(), unshift(), shift()는 배열에서 요소를 추가하거나 삭제하는 메소드입니다. 그리고 각 메소드는 원래의 배열을 수정하며, 반환값으로 추가 또는 삭제된 요소를 반환합니다.
- push(): 배열의 끝에 새로운 요소를 추가합니다.
- pop(): 배열의 마지막 요소를 제거합니다.
- unshift(): 배열의 맨 앞에 새로운 요소를 추가합니다.
- shift(): 배열의 첫 번째 요소를 제거합니다.
▼ 예제코드: 배열 요소의 추가와 삭제
<script>
let arr = ['A', 'B', 'C'];
// 1. push(): 배열의 끝에 새로운 요소를 추가합니다.
arr.push('D');
console.log(arr); // ['A', 'B', 'C', 'D']
// 2. pop(): 배열의 마지막 요소를 제거합니다.
arr.pop();
console.log(arr); // ['A', 'B', 'C']
// 3. unshift(): 배열의 맨 앞에 새로운 요소를 추가합니다.
arr.unshift(0);
console.log(arr); // [0, 'A', 'B', 'C']
// 4. shift(): 배열의 첫 번째 요소를 제거합니다.
arr.shift();
console.log(arr); // ['A', 'B', 'C']
</script>
4. 배열 요소 수정하기
대괄호([]) 안에 해당 요소의 인덱스 번호를 넣고 새로운 값을 할당합니다. 배열 요소가 수정되면 원래의 값은 사라지고 새로운 값으로 대체됩니다.
▼ 예제코드: 배열 요소 수정하기
<script>
let arr = ['A', 'B', 'C'];
// 배열 요소 수정
arr[1] = "D";
console.log(arr); // ['A', 'D', 'C']
</script>
5. 배열 복사하기
배열을 복사하려면 slice() 메소드, concat() 메소드, spread 연산자를 사용합니다. 상황에 따라 적합한 방법으로 사용하시면 됩니다.
▼ 예제코드: 배열 복사하기
<script>
let arr1 = ['A', 'B', 'C'];
// 1. slice() 메소드를 사용한 배열 복사
let arr2 = arr1.slice();
console.log(arr2); // ['A', 'B', 'C']
// 2. concat() 메소드를 사용한 배열 복사
let arr3 = arr1.concat();
console.log(arr3); // ['A', 'B', 'C']
// 3. spread 연산자를 사용한 배열 복사
let arr4 = [...arr1];
console.log(arr4); // ['A', 'B', 'C']
</script>
6. 배열 순회하기
배열을 순회하는 방법에는 “for” 반복문, “for of” 반복문, “forEach()” 메소드 등이 있습니다. 상황에 따라 적합한 방법으로 사용하시면 됩니다.
▼ 예제코드: 배열 순회하기
<script>
let arr = ['A', 'B', 'C'];
// 1. for 반복문 사용한 배열 순회
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 2. for of 반복문을 사용한 배열 순회
for (let element of arr) {
console.log(element);
}
// 3. forEach() 메소드를 사용한 배열 순회
arr.forEach(function(element) {
console.log(element);
});
</script>
7. 배열 검색하기
includes(), indexOf(), lastIndexOf()는 배열에서 요소를 검색하는 메소드입니다.
- includes(): 배열에 지정한 요소가 포함되어 있는지 여부를 확인합니다.
- indexOf(): 배열에서 지정한 요소의 첫 번째 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다.
- lastIndexOf(): 배열에서 지정한 요소의 마지막 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다.
▼ 예제코드: 배열 검색하기
<script>
let arr = ['A', 'B', 'C', 'B'];
// 1. includes(): 배열에 지정한 요소가 포함되어 있는지 여부를 확인합니다.
console.log(arr.includes('A')); // true
console.log(arr.includes('D')); // false
// 2. indexOf(): 배열에서 지정한 요소의 첫 번째 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다.
console.log(arr.indexOf('B')); // 1
console.log(arr.indexOf('D')); // -1
// 3. lastIndexOf(): 배열에서 지정한 요소의 마지막 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다.
console.log(arr.lastIndexOf('B')); // 3
console.log(arr.lastIndexOf('D')); // -1
</script>
자바스크립트 기초 이전 게시물
- 자바스크립트 HTML 추가 및 작성 위치 (async, defer)
- 자바스크립트 변수와 상수: var, let, const 차이점과 사용법
- 자바스크립트 자료형 종류 및 사용 예시
- 자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시
- 자바스크립트 형 변환(int, string 등) 방법 및 사용 예제
- 자바스크립트 조건문: if, switch, 삼항 연산자 사용법과 예제 코드
- 자바스크립트 반복문: for, while, do-while등 사용법과 예제
- 자바스크립트 함수: 선언, 매개변수, 반환값, 스코프, 호이스팅
- 자바스크립트 객체: 객체 생성, 접근, 변경, 추가, 삭제 방법
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!