[혼공스] 04 - 1 '배열' 정리

 

오늘은 04 - 1장의 내용을 정리해 보자.

 

04 - 1장의 제목은 '배열'로, 여러 자료를 묶어서 활용할 수 있는 특수한 자료 '배열'에 관해 설명하고 있다.

 

중요한 개념, 익숙하지 않은 개념들이 많이 등장해서 정리가 좀 길어질 것 같다...! 마음 다잡고 시작하자.

 

그럼 정리 시작!

 

배열 만들기

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다. 배열 내부에 들어 있는 값을 요소라고 한다.

대괄호를 사용하여 생성하고 쉼표로 구분하여 입력한다. 어떠한 종류의 자료형도 배열의 요소가 될 수 있다.

 

> const array = [273, 'String', true, function () {}, {}, [273, 103]]

undefined

> array

(6) [273, 'String', true, function () {}, {}, [273, 103]]

 

배열의 요소에 접근할 때는 인덱스를 이용한다.

배열[인덱스]

 

배열 요소 개수 확인하기

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

 

> const fruits = ['배', '사과', '키위', '바나나']

undefined

> fruits.length

4

> fruits[fruits.length - 1]

'바나나'

 

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

1. push0 메소드를 사용해 배열 뒷부분에 요소 추가하기

 

> const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']

undefined

> todos

(3) ["우유 구매", "업무 메일 확인하기", "필라테스 수업"]

> todos.push('저녁 식사 준비하기')

4

> todos.push('피아노 연습하기')

5

> todos

(5) ["우유 구매", "업무 메일 확인하기", "필라테스 수업", "저녁 식사 준비하기", "피아노 연습하기"]

 

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

 

자바스크립트에서 배열의 길이는 고정이 아니다. 다음과 같이 3개의 요소를 가진 배열을 만든 뒤, 10번째 인덱스에 요소를 강제로 추가할 수 있다. 이때 4~9번째 인덱스는 아무 것도 없는 empty가 된다.

 

> const fruitsA = ['사과', '배', '바나나']

Undefined

> fruitsA[10] = '귤'

"귤"

> fruitsA

(11) ["사과", "배", "바나나", empty * 7, "귤"]

 

인덱스로 요소를 추가하는 방법을 활용하면 length 속성을 사용하여 배열의 마지막 위치에 편리하게 요소를 추가할 수 있다.

 

> const fruitsB = ['사과', '배', '바나나']

Undefined

> fruitsB[fruitsB.length] = '귤'

"귤"

> fruitsB

(4) ["사과", "배", "바나나", "귤"]

 

배열 요소 제거하기

1. 인덱스로 요소 제거하기

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

배열을 자르고 요소를 제거/추가한 후 접합(splice) 한다고 생각하면 이해가 쉬울 것 같다.

 

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

 

splice 메소드의 2번째 매개변수에는 제거할 요소의 개수를 지정하는데, 예시 코드를 살표보자.

 

> const itemsA = ['사과', '배', '바나나']
undefined
> itemsA.splice(2, 1)	배열의 2번째 인덱스부터 1개 요소를 제거한다.
["바나나"]	제거된 요소가 배열로 러턴된다
> itemsA
(2) ["사과", "배"]

 

2. 값으로 요소 제거하기

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

 

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

배열.splice(인덱스, 1)

 

indexOf() 메소드는 배열 내부에 요소가 있을 경우 인덱스를 리턴한다. 하지만 배열 내부에 요소가 없을 때는 -1을 리턴한다.

 

> const itemsB = ['사과', '배', '바나나']
undefined
> const index = items.indexof('바나나')
Undefined
> index
2	배열에 바나나가 있으므로 해당 요소의 인덱스를 출력
> itemsB.splice(index, 1)
["바나나"]	배열의 2번째 인덱스에 있는 1개의 요소를 제거한다
> itemsB
(2) ["사과", "배"]	배열에서 바나나가 제거된 것을 확인할 수 있다.
> itemsB.indexOf('바나나')
-1	바나나는 배열에 없으므로 -1 을 출력한다

 

문자열에도 indexOf 메소드가 있다. 이를 사용하면 문자열 내부에서 특정 문자열의 위치를 찾을 수 있다.

문자열에 특정 문자열이 여러번 특정한다면 최초로 등장하는 위치를 출력한다.

 

> const stringA = "동해물과 백두산이 마르고 닳도록"

undefined

> stringA.indexOf("백두산")

5

 

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

splice() 메소드의 2번째 매개변수에 0을 입력하면 splice() 메소드는 아무 것도 제거하지 않으며, 3번째 매개변수에 추가하고 싶은 요소를 입력하면 된다.

 

배열.splice(인덱스, 0, 요소)

 

예시 코드를 살펴보자

 

> const itemsD = ["사과", "귤", "바나나", "오렌지"]
undefined
> itemsD.splice(1, 0, "양파")
[]
> itemsD
(5) ["사과", "양파", "귤", "바나나", "오렌지"]	1번째 인덱스에 양파가 추가됨을 확인할 수 있다

 

(☆)자료의 파괴와 비파괴(☆)

자바스크립트는 자료 처리를 위해서 다양한 연산자, 함수, 메소드를 제공한다. 자료 처리 연산자, 함수, 메소드는 크게 비파괴적 처리와 파괴적 처리로 구분할 수 있는데 이는 처리 후 원본의 상태 변화에 따라 구분한다.

 

• 비파괴적 처리 : 처리 후에 원본 내용이 변경되지 않는다.
• 파괴적 처리 : 처리 후에 원본 내용이 변경된다.

문자열 연결 연산자의 경우에는 비파괴적 처리(연결한 후에도 원본이 훼손되지 않음)이지만, push() 메소드와 같은 경우에는 원본이 훼손됨을 알 수 있다.

과거에는 컴퓨터의 메모리가 많이 부족했기 때문에 배열처럼 크기가 어느 정도인지 모르는 대상의 원본과 결과를 모두 메모리에 저장하는 것은 위험할 수 있었다. 그래서 배열과 같이 거대해질 수 있는 자료는 메모리를 절약할 수 있게 대부분 파괴적 처리로 이루어졌다.

 

3주차의 기본미션과 선택미션이 모두 파괴적 처리, 비파괴적 처리에 관한 내용이니 미션을 진행할 때 조금 더 자세히 다루도록 하겠다.

 

04 - 1 장의 내용은 여기서 마무리 된다.

 

04 - 1 장에서는 배열을 선언하고 활용하는 방법에 관해서 배웠다. 그리고 파괴적 처리와 비파괴적 처리는 학교 강의시간에도 다뤘던 내용인 만큼 잘 기억해 두어야 할 것 같다. 파괴적 처리의 경우에는 원본이 훼손되지 않게 사본을 만들어 활용하는 것이 좋다.

 

내일은 04 - 2 장의 내용을 정리해보자.

 

오늘 하루도 쌓였다.