반복문 ① 배열

배열과 요소

 

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형으로,

 

대괄호를 사용해 생성하고 내부의 값을 쉼표로 구분한다.

 

이때 이 내부의 값을 요소라고 하고, 하나의 배열은 다양한 자료형의 요소를 가질 수 있다.*

* 예를 들어 [10, '10', true, function () {}, {}, [10, 20]]과 같은 형태의 배열도 가능하다.

 

배열 요소에 접근하기

배열[인덱스]

 

배열을 생성할 때도 대괄호를 사용하지만, 요소에 접근할 때도 대괄호를 사용한다.

 

배열명 뒤에 대괄호를 입력하고 대괄호 사이에 인덱스를 입력하면 인덱스에 해당하는 요소에 접근할 수 있다.

> const numbers = [10, 20, 30]
undefined
> numbers[0]
10
> numbers[1]
20
> numbers[1+1]
30

 

배열 요소 개수 확인하기

배열.length

 

배열 내부에 들어 있는 요소의 개수를 확인할 때는 배열의 length 속성을 사용한다.

> const numbers = [10, 20, 30]
undefined
> numbers.length
3
> numbers[numbers.length-1]
30

 

배열 요소 추가하기

 

배열 요소를 추가하는 경우는 크게 다음의 두 가지로 구분할 수 있다.

• 배열의 맨 뒤에 추가하는 경우
• 배열의 특정 위치에 추가하는 경우

 

배열의 맨 뒤에 추가하기

 

배열 맨 뒤에 요소를 추가하는 방법으로는 push() 메소드를 사용하는 방법과 인덱스를 사용하는 방법이 있다.

배열.push(추가할 요소의 값)

> const numbers = [10, 20, 30]
undefined
> numbers.push(40)
4
> numbers.push(50)
5
> numbers
(5) [10, 20, 30, 40, 50]

 

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

 

자바스크립트에서 배열의 길이는 고정이 아니다.

 

따라서 3개의 요소를 가진 배열을 생성한 뒤 10번째 인덱스에 요소를 강제로 추가할 수 있고,

 

이때 4~9번째 인덱스에는 empty가 삽입된다.

 

배열의 정확히 맨 뒤에 요소를 추가하고자 할 경우엔 인덱스의 값을 numbers.length로 설정하면 된다.

> const numbers = [10, 20, 30]
undefined

> numbers[10] = 40
40
> numbers
(11) [10, 20, 30, empty x 7, 40]

> numbers[numbers.length] = 50
50
> numbers
(12) [10, 20, 30, empty x 7, 40, 50]

 

배열의 특정 위치에 추가하기

배열.splice(인덱스, 0, 추가할 요소의 값)

 

splice() 메소드에 대해서는 아래 인덱스 기반 제거 방법에서 설명하고 있다.

 

splice() 메소드의 두 번째 매개변수로 0을 전달하면 splice() 메소드는 아무것도 제거하지 않고,

 

세 번째 매개변수로 추가할 요소의 값을 전달하게 된다.

> const numbers = [10, 20, 30]
undefined
> numbers.splice(1, 0, 15)
[]
> numbers
(4) [10, 15, 20, 30]

 

배열 요소 제거하기

 

배열 요소를 제거하는 방법은 크게 다음의 두 가지로 구분할 수 있다.

• 인덱스를 기반으로 제거하기
• 값을 기반으로 제거하기

 

인덱스를 기반으로 제거하기

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

 

splice는 '접합'이라는 뜻으로, 배열 요소 제거가 배열을 잘라 요소를 제거하고 다시 붙이는 과정임을 생각하면 쉽게 이해할 수 있다.

> const numbers = [10, 20, 30]
undefined
> numbers.splice(1, 2)
[10]
> numbers
(1) [10]

 

값을 기반으로 제거하기

const 인덱스 = 배열.indexOf(제거할 요소의 값)
배열.splice(인덱스, 1)

 

값을 기반으로 요소를 제거하려면 먼저 해당 값을 가지는 요소의 인덱스를 찾고,

 

이 인덱스를 이용해 앞서 배운 인덱스 기반 제거 방법을 사용하면 된다.

> const numbers = [10, 20, 30]
undefined
> const index = numbers.indexOf(20)
undefined
> numbers.splice(index, 1)
[20]
> numbers
[10, 30]

> numbers.indexOf(40)
-1

 

그러나, 아래와 같은 상황이 있을 수 있다.

> const numbers = [10, 20, 30, 20]
undefined
> const index = numbers.indexOf(20)
undefined
> numbers.splice(index, 1)
[20]
> numbers
[10, 30, 20]

 

값이 20인 요소를 제거하기 위해 위의 방법을 사용하였으나,

 

값이 20인 요소가 2개 이상이었고 그 중 제일 앞에 있는 요소만 제거되었다.

 

배열 내에서 특정 값을 가지는 요소를 모두 제거하는 방법은 아래와 같다.

> const numbers = [10, 20, 30, 20]
undefined
> numbers.filter((item) => item !== 20)
(2) [10, 30]

 

앞서 배운 내용들 중 일부는 문자열에도 동일하게 적용할 수 있다.

• 문자열 내부 문자에 접근하기 위해 문자열[인덱스]를 사용할 수 있다.
• 문자열의 길이는 문자열.length로 확인할 수 있다.
• 문자열 내부 특정 문자열의 위치는 문자열.indexOf(위치를 알고자 하는 문자열)로 확인할 수 있다.

> const string = '안녕하세요 만나서 반갑습니다'
undefined
> string.indexOf('만나서')
6

 

참고) 객체 ② 객체의 속성과 메소드

 

 

 

 

 

---

이 글은 혼자 공부하는 자바스크립트 (윤인성 저)를 바탕으로 공부한 내용을 작성한 글입니다.