Array = 배열
JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.
- 배열 만들기
let fruits = ['사과', '바나나']
console.log(fruits.length)
// 2
Copy to Clipboard
- 인덱스로 배열의 항목에 접근하기
let first = fruits[0]
// 사과
let last = fruits[fruits.length - 1]
// 바나나
Copy to Clipboard
- 배열의 항목들을 순환하며 처리하기
fruits.forEach(function (item, index, array) {
console.log(item, index)
})
// 사과 0
// 바나나 1
Copy to Clipboard
- 배열 끝에 항목 추가하기
let newLength = fruits.push('오렌지')
// ["사과", "바나나", "오렌지"]
Copy to Clipboard
- 배열 끝에서부터 항목 제거하기
let last = fruits.pop() // 끝에있던 '오렌지'를 제거
// ["사과", "바나나"]
Copy to Clipboard
- 배열 앞에서부터 항목 제거하기
let first = fruits.shift() // 제일 앞의 '사과'를 제거
// ["바나나"]
Copy to Clipboard
- 배열 앞에 항목 추가하기
let newLength = fruits.unshift('딸기') // 앞에 추가
// ["딸기", "바나나"]
Copy to Clipboard
- 배열 안 항목의 인덱스 찾기
fruits.push('망고')
// ["딸기", "바나나", "망고"]
let pos = fruits.indexOf("바나나")
// 1
Copy to Clipboard
- 인덱스 위치에 있는 항목 제거하기
let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법
// ["딸기", "망고"]
Copy to Clipboard
- 인덱스 위치에서부터 여러개의 항목 제거하기
let vegetables = ['양배추', '순무', '무', '당근']
console.log(vegetables)
// ["양배추", "순무", "무", "당근"]
let pos = 1
let n = 2
let removedItems = vegetables.splice(pos, n)
// 배열에서 항목을 제거하는 방법
// pos 인덱스부터 n개의 항목을 제거함
console.log(vegetables)
// ["양배추", "당근"] (원 배열 vegetables의 값이 변함)
console.log(removedItems)
// ["순무", "무"]
배열 요소에 접근하기
JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 length 속성에서 1을 뺀 것과 같습니다.
잘못된 인덱스를 사용하면 undefined를 반환합니다.
let arr = ['첫 번재 요소입니다', '두 번째 요소입니다', '마지막 요소입니다']
console.log(arr[0]) // '첫 번재 요소입니다'를 기록
console.log(arr[1]) // '두 번재 요소입니다'를 기록
console.log(arr[arr.length - 1]) // '마지막 요소입니다'를 기록
배열 길이와 숫자형 속성의 관계
JavaScript 배열의 length 속성과 숫자형 속성은 연결되어 있습니다.
몇몇 배열 내장 메서드(join, slice, indexOf 등)은 호출했을 때 배열의 length 속성의 값을 참고합니다.
다른 메서드(push, splice 등) 또한 배열의 length 속성을 바꾸는 결과를 낳습니다.
const fruits = []
fruits.push('바나나', '사과', '복숭아')
console.log(fruits.length) // 3
Copy to Clipboard
배열 인덱스로 유효한 속성을 JavaScript 배열에 설정할 때, 그 인덱스가 현재 배열의 경계 바깥에 있는 경우, JavaScript 엔진은 배열의 length 속성을 그에 맞춰 업데이트 합니다.
fruits[5] = 'mango'
console.log(fruits[5]) // '망고'
console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
console.log(fruits.length) // 6
Copy to Clipboard
length를 직접 늘려도 요소에 변화는 없습니다.
fruits.length = 10
console.log(fruits) // ['바나나', '사과', '복숭아', 비어 있음 x 2, '망고', 비어 있음 x 4]
console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
console.log(fruits.length) // 10
console.log(fruits[8]) // undefined
Copy to Clipboard
하지만, length 속성을 감소시키면 요소가 지워집니다.
fruits.length = 2
console.log(Object.keys(fruits)) // ['0', '1']
console.log(fruits.length) // 2
