[JavaScript] 배열 / 2021.10.12

1. 배열

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다. 배열은 대괄호[ ]를 사용해 생성하고 내부의 값을 콤마 (,) 로 구분해 입력한다. 배열 내부에 들어있는 값을 요소라고 한다.

 

예시를 통해서 알아보자.

 

 

배열 array를 선언하고 배열의 요소들을 대입해주고 콘솔창에 array를 입력하면 요소의 개수와 요소들이 출력된다.

또한 array 라고 입력한 아랫줄의 ▶를 클릭하면 인덱스 번호마다 요소와 인덱스의 길이를 볼 수 있다.

 

 

2. 배열 요소에 접근하기 

배열의 기본적인 조작법은 문자열과 비슷하다. 각각의 요소에 접근하려면 배열바로 뒤에 대괄호[인덱스번호]로 접근한다. 자바스크립트에서는 인덱스번호가 0번부터 시작한다.

배열[인덱스]

 

 

- 인덱스 번호에는 계산식을 넣을 수 있다.

 

 

3. 배열의 요소 개수 (길이) 확인하기

배열의 요소의 개수를 확인할 때는 length속성을 사용한다.

배열.length

 

 

 

* 배열의 마지막 요소를 알고 싶을때에는 배열의 요소 길이에서 - 1 해주면 된다.

 

4. 배열 뒷부분에 요소 추가하기

(1) push()메소드를 사용하면 배열 뒷부분에 요소를 추가할 수 있다.

배열.push(요소)

 

 

 

(2) 인덱스를 사용해 배열 뒷부분에 요소 추가하기

만약 위의 fruits배열의 10번째 인덱스에 요소를 추가하고 싶다면? 

배열[인덱스] = 추가할 요소

 

10번째 인덱스에 요소를 추가할 시 6번부터 9번 인덱스는 비어있음으로 empty가 된다.

 

* length 속성을 이용하면 배열의 마지막 위치에 요소를 추가할 수 있다.

 

5. 배열 요소 제거하기

(1) 인덱스로 요소 제거하기

배열의 특정 인덱스에 있는 요소를 제거할 때는 splice()메소드를 사용한다.

배열.splice(인덱스, 제거할 요소의 개수)

 

만약 위의 fruits 배열의 2번째 인덱스부터 5개 요소를 제거하고 싶다면?

 

2번인 바나나 부터 6번 empty배열까지 제거가 된것을 확인할 수 있다.

 

(2) 값으로 요소 제거하기

값을 기반으로 요소를 제거할 때는 배열 내부에서 특정 값의 위치를 찾는 indexOf() 메소드를 사용해서 값의 위치를 추출한 뒤 splice()메소드를 사용해 제거한다.

const 인덱스 = 배열.indexOf(요소)
배열.splice(인덱스, 1)

 

 

6. 배열의 특정 위치에 요소 추가하기

splice() 메소드를 사용해서 요소를 추가해보자.

배열.splice(인덱스, 0, 요소)
-> 두 번째 매개변수에 0을 입력하면 splice()메소드는 아무것도 제거하지 않는다. 

 

array배열에 아까 삭제했던 '귤'을 다시 추가해보자.