자바스크립트에서 배열은 여러 개의 값을 하나의 변수에 저장할 수 있는 자료형입니다. 배열은 인덱스를 사용하여 요소에 접근할 수 있고 요소를 추가, 삭제, 수정이 가능합니다. 또한 반복문을 사용하여 순회할 수 있으며, 검색과 정렬도 가능합니다. 자바스크립트에서 매우 중요한 데이터 구조 중 하나입니다. 그럼 예제로 자바스크립트에서 배열을 생성하고 다루는 방법에 대해서 알아보겠습니다.

자바스크립트 배열: 생성부터 검색까지 사용법 및 예제

자바스크립트에서 배열은 여러 개의 값을 하나의 변수에 저장할 수 있는 자료형입니다. 배열은 인덱스를 사용하여 요소에 접근할 수 있고 요소를 추가, 삭제, 수정이 가능합니다. 또한 반복문을 사용하여 순회할 수 있으며, 검색과 정렬도 가능합니다. 자바스크립트에서 매우 중요한 데이터 구조 중 하나입니다. 그럼 예제로 자바스크립트에서 배열을 생성하고 다루는 방법에 대해서 알아보겠습니다.

▼ 목차

  1. 배열 생성 방법
  2. 배열의 길이와 요소 접근 방법
  3. 배열 요소의 추가와 삭제
  4. 배열 요소 수정하기
  5. 배열 복사하기
  6. 배열 순회하기
  7. 배열 검색하기

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>

자바스크립트 기초 이전 게시물

  1. 자바스크립트 HTML 추가 및 작성 위치 (async, defer)
  2. 자바스크립트 변수와 상수: var, let, const 차이점과 사용법
  3. 자바스크립트 자료형 종류 및 사용 예시
  4. 자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시
  5. 자바스크립트 형 변환(int, string 등) 방법 및 사용 예제
  6. 자바스크립트 조건문: if, switch, 삼항 연산자 사용법과 예제 코드
  7. 자바스크립트 반복문: for, while, do-while등 사용법과 예제
  8. 자바스크립트 함수: 선언, 매개변수, 반환값, 스코프, 호이스팅
  9. 자바스크립트 객체: 객체 생성, 접근, 변경, 추가, 삭제 방법
위로 스크롤