온보딩 2일차(2023.03.08) - 배열

최재홍·2023년 3월 9일
0

배열(Array)

배열은 여러 자료를 묶어서 활용할 수 있는 특수한 자료이다.

배열 만들기

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

[요소, 요소, 요소, 요소, ..., 요소]

배열 요소에 접근하기

배열의 각각의 요소에 접근하려면 배열 바로 뒤에 대괄호를 입력하고 그 안에 숫자를 넣는다. 자바스크립트에서는 가장 앞에 있는 요소를 0번째로 표현한다. 이때 요소의 순서를 인덱스(index)라고 부른다.

배열[인덱스]

배열은 여러 개의 요소를 갖기 때문에 일반적으로 배열 이름을 복수형으로 짓는다. 그리고 대괄호 안에 계산식을 넣어서 표현할 수도 있다.
ex)numbers[1+1]

배열 요소 개수 확인하기

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

배열.length

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

push() 메소드를 사용해 배열 뒷부분에 요소 추가하기

배열 뒷부분에 요소를 추가할 때는 push() 메소드를 사용한다.

배열.push(요소)

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

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

배열 요소 제거하기

배열 요소를 제거하는 방법은 일반적으로 2가지이다.
첫째, 인덱스를 기반으로 제거하는 경우
둘째, 값을 기반으로 제거하는 경우

인덱스로 요소 제거하기

배열의 특정 인덱스에 있는 요소를 제거할 때는 splice()메소드를 사용한다. spice는 '접합'이라는 의미이다. 제거된 요소는 empty값으로 남는게 아니기 때문에 해당 인덱스 다음 인덱스의 요소부터 차례대로 따라붙게 된다.

spice()는 일부를 제거한 뒤 붙일 때도 쓰이고, 중간에 다른 요소를 넣고 붙일 때도 사용된다.

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

splice()메소드로 배열에서 특정 인덱스를 제거하면, 제거하고 남은 배열을 반환하는 것이 아니라 제거해낸 요소가 반환된다.

const itemsA = ['사과', '배', '바나나]

itemsA.spice(2,1)
> ['바나나']

itemsA
> ['사과', '배']

값으로 요소 제거하기

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

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

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

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

배열의 특정 위치에 요소를 추가할 때는 splice() 메소드를 사용할 수 있다. spice() 메소드의 2번째 매개변수에 0을 입력하면 spice() 메소드는 아무 것도 제거하지 않으며, 3번째 매개변수에 추가하고 싶은 요소를 입력하면 된다.

배열.splice(인덱스, 0, 추가하고자하는 요소)

더 알아보기

파괴적 처리 vs 비파괴적 처리

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

과거에 컴퓨터의 메모리의 부족으로 배열과 같이 크기가 거대해질 수 있는 자료는 메모리를 절약할 수 있게 대부분 파괴적 처리로 처리하였다.

push() 메소드가 그와 같다.(push()메소드는 원형 배열을 변형시키 때문에)

초기에 표준화된 것들은 파괴적 처리를 많이 했으나, 최근 표준화된 것들은 비파괴적 처리를 많이 한다.


0개의 댓글

관련 채용 정보