[자바스크립트] 배열 활용

배열

여러 자료를 묶어서 활용할 수 있는 특수한 자료형
여러 개의 변수를 한 번에 선언해서 다룰 수 있는 자료형
대괄호 사용하여 생성하고 내부에 쉼표로 구분하여 입력한다
요소 element : 배열 내부에 들어있는 값, 모든 자료형 가능

배열 요소에 접근 []

인덱스 : 요소의 순서
대괄호 안에 계산식을 넣을 수 있다

numbers[1 + 1], numbers[1 * 3]

배열 요소 개수 확인 : length

const datas = ['apple', 'banana', 'candy']
console.log(datas.length) // 4

배열 요소 추가

배열 뒷부분에 요소 추가 : push

const datas = ['apple', 'banana', 'candy']
datas.push('delete')
console.log(datas) // ['apple', 'banana', 'candy', 'delete']

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

자바스크립트에서 배열의 길이는 고정적이지 않기 때문에
3개의 요소를 가진 배열에서 10번째 인덱스에 요소를 강제로 추가할 수 있다
이 때 4~9번째 인덱스에는 아무것도 없는 empty 상태가 된다

const datas = ['apple', 'banana', 'candy']
datas[10] = 'ten'
console.log(datas) // ['apple', 'banana', 'candy', empty * 7, 'ten']
console.log(datas.length) // 11

length 속성을 사용 → 배열의 마지막 위치에 요소 추가

const datas = ['apple', 'banana', 'candy']
datas[datas.length] = 'end'
console.log(datas) // ['apple', 'banana', 'candy', 'end']

배열 특정 위치에 요소 추가 : splice()

배열의 특정 위치 인덱스에 요소를 추가할 때는 splice() 메서드를 사용한다
splice() 메서드의 2번째 매개변수에 0을 입력하면 splice() 메서드는 아무것도 제거되지 않고
3번째 매개변수에 추가하고 싶은 요소를 입력한다

const datas = ['apple', 'banana', 'candy']
datas.splice(1, 0, 'orange') // 1번째 인덱스에 'orange' 요소가 추가된다
console.log(datas) // ['apple', ''orange', banana', 'candy'] 

배열 요소 제거

인덱스 기반으로 제거 : splice()

접합 splice : 요소를 제거하거나 요소를 중간에 넣을 때 사용된다

const datas = ['apple', 'banana', 'candy']
datas.splice(2, 1)
// 배열의 2번째 인덱스로부터 1개의 요소 제거되고 + 제거된 요소가 배열로 리턴된다
// ['banana']
console.log(datas) // ['apple', 'candy']

값을 기반으로 제거 : indexOf(), splice()

배열 내부에 특정 값의 위치를 찾는 indexOf() 메서드를 사용해서 값의 위치를 추출한 뒤
splice() 메서드를 사용해 제거한다

indexOf() 메서드

배열 내부에 요소가 있을 경우 해당 값의 인덱스를 리턴하고
배열 내부에 요소가 없을 경우 -1을 리턴한다

문자열에서도 indexOf() 메서드를 사용해서 → 문자열 내부에서 특정 문자열의 시작 위치를 찾을 수 있다

const datas = ['apple', 'banana', 'candy']
datas.indexOf('banana') // 1

const stringA = '동해물과 백두산이 마르고 닳도록'
stringA.indexOf('백두산') // 5

filter()

indexOf() 메서드와 splice() 메서드는 배열 내부 요소를 하나만 제거할 수 있다
배열 내부에서 특정 값을 가진 요소를 모두 제거하고 싶다면 반복문을 사용하거나 filter() 메서드를 사용하면 된다

const items = ['apple', 'pear', 'banana', 'orange', 'orange']
items.filter((item) => item != 'orange')
console.log(items) // ['apple', 'pear', 'banana']